英语岛样式修改

common/styles/global/pages.scss

@@ -246,12 +246,13 @@
 	@media (max-height: 600px) {min-height:1200rpx;}
 }
 .ezy-study-swiper2{
-	@media (max-height: 800px) {min-height:1500rpx;}
-	@media (max-height: 700px) {min-height:1350rpx;}
+	@media (max-height: 800px) {min-height:1400rpx;}
+	@media (max-height: 700px) {min-height:1300rpx;}
 }
 .ezy-study-page{
 	width:100%;height: 100vh;display: flex;flex-direction: column;
 	box-sizing: border-box;padding-top:var(--status-bar-height);justify-content: center;position: relative;
+	.ezy-study-wrap{@include ezy-no-repeat-cover;position: relative;margin: 0 auto;}
 	.study-school-year{
 		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;
@@ -269,10 +270,7 @@
 .ezy-shuxue-study-page{
 	@include ezy-no-repeat-cover(top);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.png");
-		@include ezy-no-repeat-cover;position: relative;margin: 0 auto;
-	}
+	.ezy-study-wrap{width:750rpx;height:1394rpx;background-image: url("@/static/images/study/shuxue/study-wrap-bj.png");}
 	.animal-img{left: 380rpx;top: 290rpx;}
 	.chapter-box{
 		width: 160rpx;text-align: center;font-weight: 800;color: #5c1a11;
@@ -301,7 +299,6 @@
 		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-arrow{
 		width: 58rpx;height: 58rpx;left: 50%;top: 64%;position: absolute;
 		@include ezy-no-repeat-cover;background-image: url("@/static/images/study/brand-arrow.gif");
@@ -402,132 +399,104 @@
 
 // 英语
 .ezy-yingyu-study-page{
-	background-color: #00aeee;
-	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/study/yingyu/study-yingyu-bj.png");
-	.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;
-	}
+	background-color: #00aeee;@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/study/yingyu/study-yingyu-bj.png");
+	.ezy-study-wrap{
+		width:750rpx;height:1365rpx;position: absolute;top:calc(var(--status-bar-height) + -7%);
+		background-image: url("@/static/images/study/yingyu/study-wrap-bj.png");}
+	.animal-img{left: 280rpx;top: 420rpx;}
 	.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;
+		position: absolute;top:200rpx;left:228rpx;white-space: pre-wrap;line-height: 2;
 	}
-	// 锁 星星
+	// brand-content
+	.brand-icon,.brand-content{text-align: center;@include single-line-ellipsis;}
+	.brand-icon{width: 170rpx;height: 34rpx;line-height: 34rpx;color: #180b34;margin: 2rpx auto 0;}
+	.brand-content{width: 246rpx;height: 42rpx;line-height: 42rpx;color: #fff;margin: 0 auto;}
 	.brand-lock,.brand-finish-icon{
 		width: 70rpx;height: 70rpx;@include ezy-no-repeat-cover;
-		position: absolute;transform: translateX(-50%);}
+		position: absolute;transform: translateX(-50%);top: -125rpx;right: 58rpx;}
 	.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-arrow{
+		width: 58rpx;height: 58rpx;left: 38%;top: -58%;position: absolute;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/study/brand-arrow.gif");
+		}
+	// brand-item 
+	.brand-item{
+		width: 260rpx;height: 81rpx;position: absolute;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/study/yingyu/dao-item-disabled.png");
+		}
+	.brand-active{background-image: url("@/static/images/study/yingyu/dao-item-active.png");}
 	
-	// brand-item
-	.brand-item{box-sizing: border-box;text-align: center;z-index: 3;
-	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");}
-	}
-	@keyframes shakeOpacity {
-		0% {opacity: 0;}
-		100% {opacity: 1;;}
-	}
-	.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: 40rpx;animation: shakeOpacity 1s 1;}
-	}
-	.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;}
-		.animal-img{top: 60rpx;right: 180rpx;animation: shakeOpacity 1s 1;}
-	}
+	.brand-item:nth-child(1){top:758rpx;right:46rpx;}
+	.brand-item:nth-child(2){top:920rpx;left:55rpx;}
 	.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;}
-		.animal-img{top: 20rpx;right: 30rpx;animation: shakeOpacity 1s 1;}
+		top:1110rpx;right:78rpx;
+		.brand-lock,.brand-finish-icon{top: -135rpx;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;}
-		.animal-img{top: 60rpx;right: 180rpx;animation: shakeOpacity 1s 1;}
-	}
+	.brand-item:nth-child(4){top:1280rpx;left:52rpx;}
 	.brand-item.ceshi-brand-item{
-		width: 308rpx;height: 225rpx;top:1250rpx;right:30rpx;left: unset;@include ezy-no-repeat-cover;
+		width: 394rpx;height: 288rpx;top:1280rpx;
+		left: unset;right:-10rpx;@include ezy-no-repeat-cover;
 		background-image: url("@/static/images/study/yingyu/test-item-disabled.png");
-		.icon-content-box{background-image: unset;}
 		.brand-content{display: none;}
-		.brand-lock,.brand-finish-icon{top: 120rpx;right: 120rpx;}
-		.animal-img{top: 100rpx;right: 40rpx;animation: shakeOpacity 1s 1;}
+		.brand-lock,.brand-finish-icon{top: 150rpx;right: 170rpx;}
+		.brand-arrow{left: 32%;top: 14%;}
 	}
 	.brand-item.ceshi-brand-item.brand-active{background-image: url("@/static/images/study/yingyu/test-item-active.png");}
 	
 	@media (max-height: 800px) {
-		min-height:1500rpx;
-		// 0.92
-		.brand-item:nth-child(1){top:540rpx;right:30rpx;}
-		.brand-item:nth-child(2){top:640rpx;left:55rpx;}
-		.brand-item:nth-child(3){top:830rpx;right:110rpx;}
-		.brand-item:nth-child(4){top:960rpx;left:60rpx;}
+		// 0.9
+		min-height:1400rpx;
+		.animal-img{left: 260rpx;top: 390rpx;}
+		.chapter-title-box{top:180rpx;left:205rpx;}
+		.ezy-study-wrap{width: 687rpx;height: 1250rpx;left:50%;top:calc(var(--status-bar-height) + -4%);transform: translateX(-50%);}
+		.brand-lock,.brand-finish-icon{top: -120rpx;right: 60rpx;}
+		.brand-item:nth-child(1){top:685rpx;right:30rpx;}
+		.brand-item:nth-child(2){top:830rpx;left:42rpx;}
+		.brand-item:nth-child(3){
+			top:1000rpx;right:60rpx;
+			.brand-lock,.brand-finish-icon{top: -122rpx;right: 62rpx;}
+			}
+		.brand-item:nth-child(4){top:1180rpx;left:42rpx;}
 		.brand-item.ceshi-brand-item{
-			width: 250rpx;height: 183rpx;top:1050rpx;left: unset;right: 60rpx;
-			.brand-lock,.brand-finish-icon{top: 0;right: 80rpx;}
+			width: 337rpx;height: 246rpx;top:1140rpx;left: unset;right:-40rpx;
+			.brand-lock,.brand-finish-icon{top: 125rpx;right: 130rpx;}
 		}
 	}
+	@media (max-height: 750px) {
+		.ezy-study-wrap{top:calc(var(--status-bar-height) + -7%);}
+		.brand-item.ceshi-brand-item{top:1110rpx;}
+	}
 	@media (max-height: 700px) {
-		min-height:1350rpx;
-		.brand-lock,.brand-finish-icon{width: 50rpx;height: 50rpx;}
-		.brand-lock::before{content: '';width: 26rpx;height: 33rpx;margin-top: 6rpx;}
-		// 0.9
-		.brand-item:nth-child(1){
-			width: 288rpx;height: 218rpx;top:506rpx;right:70rpx;
-			.icon-content-box{top: 150rpx;right: -10rpx;}
-			.brand-lock,.brand-finish-icon{top: 102rpx;right: 70rpx;}
-		}
-		.brand-item:nth-child(2){
-			width: 356rpx;height: 173rpx;top:610rpx;left:65rpx;
-			.icon-content-box{top: 130rpx;right: 112rpx;}
-			.brand-lock,.brand-finish-icon{top: 82rpx;right: 192rpx;}
-			.animal-img{right: 160rpx;}
-		}
+		min-height:1300rpx;
+		.animal-img{left: 240rpx;top: 340rpx;}
+		.chapter-title-box{width: 100rpx;height: 50rpx;top:162rpx;left:180rpx;font-size: 24rpx;}
+		.ezy-study-wrap{width: 600rpx;height: 1092rpx;top:calc(var(--status-bar-height) + -7%);}
+		.brand-lock,.brand-finish-icon{top: -120rpx;right: 60rpx;}
+		.brand-item:nth-child(1){top:610rpx;right:10rpx;}
+		.brand-item:nth-child(2){top:730rpx;left:22rpx;}
 		.brand-item:nth-child(3){
-			width: 346rpx;height: 138rpx;top:770rpx;right:70rpx;
-			.icon-content-box{top: 90rpx;right: -10rpx;}
-			.brand-lock,.brand-finish-icon{top: 42rpx;right: 70rpx;}
-		}
-		.brand-item:nth-child(4){
-			width: 346rpx;height: 182rpx;top:850rpx;left:80rpx;
-			.icon-content-box{top: 130rpx;right: 112rpx;}
-			.brand-lock,.brand-finish-icon{top: 82rpx;right: 192rpx;}
-			.animal-img{right: 160rpx;}
-		}
+			top:885rpx;right:38rpx;
+			.brand-lock,.brand-finish-icon{top: -128rpx;right: 62rpx;}
+			}
+		.brand-item:nth-child(4){top:1040rpx;left:20rpx;}
 		.brand-item.ceshi-brand-item{
-			width: 250rpx;height: 183rpx;top:980rpx;left: unset;right:70rpx;
-			.brand-lock,.brand-finish-icon{top: 10rpx;right: 100rpx;}
-			.animal-img{top: 95rpx;right: 30rpx;}
+			width: 315rpx;height: 231rpx;top:1020rpx;left: unset;right:-40rpx;
+			.brand-lock,.brand-finish-icon{top: 125rpx;right: 130rpx;}
 		}
 	}
+	@media (max-height: 650px){
+		.ezy-study-wrap{top:calc(var(--status-bar-height) + -7%);}
+		.brand-item.ceshi-brand-item{width: 296rpx;height: 216rpx;left: unset;top:1000rpx;}
+	}
+	@media (max-height: 600px){
+		.brand-item.ceshi-brand-item{left: unset;top:1020rpx;}
+	}
 }
 
 //目录页

pages/study/product/shuxue.vue

@@ -26,6 +26,7 @@
 						<!-- 序号或锁 -->
 						<view v-if="options.number ==1 && item.firstFlag ==1" class="brand-icon">{{ item.number }}
 						</view>
+						<!-- 锁 -->
 						<view v-else class="brand-lock"></view>
 						<!-- 箭头 -->
 						<view v-if="item.daeFlag  &&  animalNum == index &&isVip != 'Visitor'" class="brand-arrow"></view>

pages/study/product/yingyu.vue

@@ -2,36 +2,32 @@
 	<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="yingyu-house-box">
-				<view @click="handleCheckCatalogue" class="chapter-title-box">{{options.zhangName}}</view>
-			</view>
+			<view @click="handleCheckCatalogue" class="chapter-title-box">{{options.zhangName}}</view>
+			<!-- 动物类型 -->
+			<view :class="currentGrowth()"></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">{{ item.number }}</view>
 						<!-- 星星 -->
 						<view class="brand-finish-icon" v-if="item.studyFlag===1"></view>
-						<!-- 动物类型 -->
-						<view v-if="item.daeFlag &&animalNum == index" :class="currentGrowth()"></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 class="brand-arrow" v-if="item.daeFlag &&animalNum == index"></view>
+						<!-- 节名称 -->
+						<view class="brand-content">{{ item.jieName }}</view>
 					</view>
 					<view v-if="isVip !== 'VIP'">
+						<!-- 序号 -->
+						<view lass="brand-icon">{{ item.number }}</view>
 						<!-- 锁 -->
-						<view v-if="item.firstFlag !='1'" class="brand-lock"></view>
-						<!-- 动物类型 -->
-						<view v-if="item.daeFlag  &&  animalNum == index && isVip != 'Visitor'" :class="currentGrowth()"></view>
-						<view class="icon-content-box">
-							<!-- 序号 -->
-							<view class="brand-icon">{{ item.number }}</view>
-							<!-- 节名称 -->
-							<view class="brand-content"> {{ item.jieName }} </view>
-						</view>
+						<view v-if="item.firstFlag !='1'"  class="brand-lock"></view>
+						<!-- 箭头 -->
+						<view v-if="item.daeFlag  &&  animalNum == index && isVip != 'Visitor'" class="brand-arrow"></view>
+						<!-- 节名称 -->
+						<view class="brand-content"> {{ item.jieName }} </view>
 
 					</view>
 				</view>