英语岛页面开发

common/styles/global/pages.scss

@@ -236,15 +236,25 @@
 }
 	
 //地图页	
-.ezy-shuxue-study-page{
-	width:100%;height: 100vh;min-height:1400rpx;background-color: #43c1f6;display: flex;flex-direction: column;
-	background-image: url("@/static/images/study/shuxue/study-shuxue-bj.png");@include ezy-no-repeat-cover(top);
+.ezy-study-page{
+	width:100%;height: 100vh;@include ezy-no-repeat-cover(top);display: flex;flex-direction: column;
 	box-sizing: border-box;padding-top:var(--status-bar-height);justify-content: center;position: relative;
 	.study-school-year{
-		width: 285rpx;height: 69rpx;line-height:65rpx;background-image: url("@/static/images/study/shuxue/school-year-bj.png");
+		width: 285rpx;height: 69rpx;line-height:65rpx;background-image: url("@/static/images/study/school-year-bj.png");
 		color: #fff;@include ezy-no-repeat-cover;padding-left: 78rpx;font-size: 30rpx;font-weight: 600;
-		position: absolute;left: 20rpx;top:var(--status-bar-height);
+		position: absolute;left: 20rpx;top:var(--status-bar-height);z-index: 2;
 	}
+	// animal
+	.animal-img{width:48rpx;height: 68rpx;@include ezy-no-repeat-cover;position: absolute;}
+	.dan-img{background-image: url("@/static/images/study/animal-img1.png");}
+	.xiao-e-img{background-image: url("@/static/images/study/animal-img2.png");}
+	.zhong-e-img{background-image: url("@/static/images/study/animal-img3.png");}
+	.da-e-img{background-image: url("@/static/images/study/animal-img4.png");}
+}
+// 数学
+.ezy-shuxue-study-page{
+	background-color: #43c1f6;background-image: url("@/static/images/study/shuxue/study-shuxue-bj.png");
+	
 	.ezy-study-wrap{
 		width:750rpx;height:1394rpx;background-image: url("@/static/images/study/shuxue/study-wrap-bj.gif");
 		@include ezy-no-repeat-cover;position: relative;margin: 0 auto;
@@ -270,19 +280,15 @@
 		font-size: 36rpx;font-weight: 600;color: #ff6501;line-height: 70rpx;
 		background-image: url("@/static/images/study/shuxue/number-bj.png");
 		}
-	.brand-lock{background-image: url("@/static/images/study/shuxue/lock-bj.png");display: flex;justify-content: center;}
+	.brand-lock{background-image: url("@/static/images/study/lock-bj.png");display: flex;justify-content: center;}
 	.brand-lock::before{
 		content: '';width: 38rpx;height: 45rpx;display: block;@include ezy-no-repeat-cover;
-		background-image: url("@/static/images/study/shuxue/lock-img.png");margin-top: 10rpx;
+		background-image: url("@/static/images/study/lock-img.png");margin-top: 10rpx;
 	}
 	.brand-finish-icon{background-image: url("@/static/images/study/dao-finish-icon.png");}
 	
 	// animal
-	.animal-img{width:48rpx;height: 68rpx;@include ezy-no-repeat-cover;position: absolute;left: 28%;top: 48%;}
-	.dan-img{background-image: url("@/static/images/study/animal-img1.png");}
-	.xiao-e-img{background-image: url("@/static/images/study/animal-img2.png");}
-	.zhong-e-img{background-image: url("@/static/images/study/animal-img3.png");}
-	.da-e-img{background-image: url("@/static/images/study/animal-img4.png");}
+	.animal-img{left: 28%;top: 48%;}
 	
 	// brand-item
 	.brand-item{box-sizing: border-box;font-size: 24rpx;color: #fff;text-align: center;
@@ -347,6 +353,81 @@
 	}
 }
 
+// 英语
+.ezy-yingyu-study-page{
+	background-image: url("@/static/images/study/yingyu/study-yingyu-bj.png");
+	// .ezy-study-wrap{position: relative;}
+	.yingyu-house-box{
+		width: 750rpx;height: 769rpx;@include ezy-no-repeat-cover;position: absolute;
+		top:calc(-100rpx + var(--status-bar-height));
+		background-image: url("@/static/images/study/yingyu/study-wrap-bj.gif");z-index: 1;
+	}
+	.chapter-title-box{
+		width: 120rpx;height: 60rpx;text-align: center;font-weight: 800;color: #66ffff;font-size: 28rpx;
+		position: absolute;top:228rpx;left:222rpx;white-space: pre-wrap;line-height: 2;
+	}
+	// 锁 星星
+	.brand-lock,.brand-finish-icon{
+		width: 70rpx;height: 70rpx;@include ezy-no-repeat-cover;
+		position: absolute;transform: translateX(-50%);}
+	.brand-lock{background-image: url("@/static/images/study/lock-bj.png");display: flex;justify-content: center;}
+	.brand-lock::before{
+		content: '';width: 38rpx;height: 45rpx;display: block;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/study/lock-img.png");margin-top: 10rpx;
+	}
+	.brand-finish-icon{background-image: url("@/static/images/study/dao-finish-icon.png");}
+	.brand-lock{background-image: url("@/static/images/study/lock-bj.png");display: flex;justify-content: center;}
+	.brand-lock::before{
+		content: '';width: 38rpx;height: 45rpx;display: block;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/study/lock-img.png");margin-top: 10rpx;
+	}
+	//icon-content-box
+	.icon-content-box{
+		width: 260rpx;height: 81rpx;@include ezy-no-repeat-cover;font-size: 24rpx;position: absolute;
+		background-image: url("@/static/images/study/yingyu/dao-item-disabled.png");
+		.brand-icon,.brand-content{margin: 0 auto;}
+		.brand-icon{
+			width: 170rpx;height: 36rpx;color: #180b34;line-height: 1.6;
+			@include single-line-ellipsis;}
+		.brand-content{width: 246rpx;height: 42rpx;color: #fff;@include single-line-ellipsis;line-height: 42rpx;}
+	}
+	
+	// brand-item
+	.brand-item{box-sizing: border-box;text-align: center;
+	font-weight: 600;position: relative;position: absolute;@include ezy-no-repeat-cover;}
+	.brand-active {
+		.icon-content-box{background-image: url("@/static/images/study/yingyu/dao-item-active.png");}
+	}
+	.brand-item:nth-child(1){
+		width: 317rpx;height: 240rpx;top:630rpx;right:30rpx;background-image: url("@/static/images/study/yingyu/dao-item-bj1.png");
+		.icon-content-box{top: 160rpx;right: 0rpx;}
+		.brand-lock,.brand-finish-icon{top: 98rpx;right: 60rpx;}
+		.animal-img{top: 88rpx;right: 30rpx;}
+	}
+	.brand-item:nth-child(2){
+		width: 394rpx;height: 192rpx;top:760rpx;left:55rpx;background-image: url("@/static/images/study/yingyu/dao-item-bj2.png");
+		.icon-content-box{top: 130rpx;right: 130rpx;}
+		.brand-lock,.brand-finish-icon{top: 62rpx;right: 200rpx;}
+	}
+	.brand-item:nth-child(3){
+		width: 385rpx;height: 154rpx;top:980rpx;right:110rpx;background-image: url("@/static/images/study/yingyu/dao-item-bj3.png");
+		.icon-content-box{top: 100rpx;right: 0rpx;}
+		.brand-lock,.brand-finish-icon{top: 28rpx;right: 60rpx;}
+		}
+	.brand-item:nth-child(4){
+		width: 385rpx;height: 202rpx;top:1100rpx;left:60rpx;background-image: url("@/static/images/study/yingyu/dao-item-bj4.png");
+		.icon-content-box{top: 130rpx;right: 130rpx;}
+		.brand-lock,.brand-finish-icon{top: 62rpx;right: 200rpx;}
+	}
+	.brand-item.ceshi-brand-item{
+		width: 394rpx;height: 288rpx;top:1200rpx;right:0rpx;left: unset;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/study/yingyu/test-item.png");
+		.icon-content-box{background-image: unset;}
+		.brand-content{display: none;}
+		.brand-lock,.brand-finish-icon{top: 150rpx;right: 160rpx;}
+	}
+}
+
 //目录页
 .ezy-catalogue-dialog{
 	width: 663rpx;height: 1038rpx;padding: 180rpx 52rpx 60rpx;box-sizing: border-box;position: relative;

pages/study/product/shuxue.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ezy-shuxue-study-page">
+	<view class="ezy-study-page ezy-shuxue-study-page">
 		<view class="study-school-year" @click="clickGradeTerm">{{gradeTerm}}</view>
 		<view class="ezy-study-wrap" @touchstart="onTouchStart" @touchend="onTouchEnd">
 			<view class="chapter-box" @click="handleCheckCatalogue">{{options.numberStr}}</view>

pages/study/product/yingyu.vue

@@ -1,16 +1,15 @@
 <template>
-	<view class="ezy-shuxue-study-page">
+	<view class="ezy-study-page ezy-yingyu-study-page">
 		<view class="study-school-year" @click="clickGradeTerm">{{gradeTerm}}</view>
 		<view class="ezy-study-wrap" @touchstart="onTouchStart" @touchend="onTouchEnd">
-			<view class="chapter-box" @click="handleCheckCatalogue">{{options.numberStr}}</view>
-			<view @click="handleCheckCatalogue" :class="getTitleClass(options.zhangName)">{{getZhangName(options.zhangName)}}</view>
+			<view class="yingyu-house-box">
+				<view @click="handleCheckCatalogue" class="chapter-title-box">{{options.zhangName}}</view>
+			</view>
 			<view>
 				<!-- 小岛 -->
 				<view class="brand-item" v-for="(item, index) in options.jieList" :key="item.jieId"
 					@click="listClick(item, index)" :class="getClass(options.jieList,index,isVip)">
 					<view v-if="isVip === 'VIP'">
-						<!-- 序号 -->
-						<view class="brand-icon" v-if="item.studyFlag===0">{{ item.number }}</view>
 						<!-- 星星 -->
 						<view class="brand-finish-icon" v-if="item.studyFlag===1"></view>
 						<!-- 动物类型 -->
@@ -18,20 +17,28 @@
 						<view v-if="item.daeFlag && growthType ==1" class="animal-img xiao-e-img"></view>
 						<view v-if="item.daeFlag && growthType ==2" class="animal-img zhong-e-img"></view>
 						<view v-if="item.daeFlag && growthType ==3" class="animal-img da-e-img"></view>
-						<!-- 节名称 -->
-						<view class="brand-content">{{ item.jieName }}</view>
+						<view  class="icon-content-box">
+							<!-- 序号 -->
+							<view class="brand-icon" v-if="item.studyFlag===0">{{ item.number }}</view>
+							<!-- 节名称 -->
+							<view class="brand-content">{{ item.jieName }}</view>
+						</view>
 					</view>
 					<view v-if="isVip !== 'VIP'">
-						<!-- 序号或锁 -->
-						<view v-if="item.number ==1" class="brand-icon">{{ item.number }}</view>
-						<view v-if="item.number !=1" class="brand-lock"></view>
+						<!-- 锁 -->
+						<view class="brand-lock"></view>
 						<!-- 动物类型 -->
 						<view v-if="item.daeFlag && growthType ==0" class="animal-img dan-img"></view>
 						<view v-if="item.daeFlag && growthType ==1" class="animal-img xiao-e-img"></view>
 						<view v-if="item.daeFlag && growthType ==2" class="animal-img zhong-e-img"></view>
 						<view v-if="item.daeFlag && growthType ==3" class="animal-img da-e-img"></view>
-						<!-- 节名称 -->
-						<view class="brand-content"> {{ item.jieName }} </view>
+						<view  class="icon-content-box">
+							<!-- 序号 -->
+							<view class="brand-icon">{{ item.number }}</view>
+							<!-- 节名称 -->
+							<view class="brand-content"> {{ item.jieName }} </view>
+						</view>
+						
 					</view>
 				</view>
 			</view>
@@ -86,14 +93,6 @@
 	function listClick(data) {
 		$emit('listClick', data);
 	}
-	// 获取章name
-	function getZhangName(data){
-		if(data.length <=9){
-			return data
-		}else{
-			return getZhangContent(data);
-		}
-	}
 	
 	// 章换行显示
 	function getZhangContent(data){
@@ -109,18 +108,6 @@
 		return firstLine + '\n' + secondLine;
 	}
 	
-	// 章class
-	function getTitleClass(data){
-		console.log(data.length,'getTitleClass');
-		if(data.length <=5){
-			return 'chapter-title-box chapter-small-title-box'
-		}else if(data.length <=9){
-			return 'chapter-title-box chapter-middle-title-box'
-		}else if(data.length >9){
-			return 'chapter-title-box chapter-big-title-box'
-		}
-	}
-	
 	// 获取节class
 	function getClass (data,index,isVip){
 		let brandActive = '';
@@ -133,19 +120,10 @@
 		}
 		let indexLast = data.length -1;
 		// 判断最后一个为名称是否为单元测试，是单元测试则返回ceshi-jie
-		if(index===indexLast && data[data.length -1].jieName =='单元测试'){
+		if(index===indexLast && data[data.length -1].jieName =='Testing'){
 			return 'ceshi-brand-item' +' '+ brandActive;
 		}else{
-			return getJieClass(data,index,brandActive)
-		}
-	}
-	// 根据获取节字数获取class
-	function getJieClass(data,index,active){
-		let itemJieName = data[index].jieName.length;
-		if(itemJieName > 7){
-			return 'big-brand-item' +' '+ active;
-		}else{
-			return 'small-brand-item' +' '+ active;
+			return brandActive;
 		}
 	}