数学岛页面样式修改

common/styles/global/pages.scss

@@ -270,19 +270,20 @@
 	@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.gif");
+		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;
 	}
+	.animal-img{left: 380rpx;top: 290rpx;}
 	.chapter-box{
 		width: 160rpx;text-align: center;font-weight: 800;color: #5c1a11;
-		font-size: 30rpx;position: absolute;top:122rpx;left:322rpx;
+		font-size: 30rpx;position: absolute;top:125rpx;left:322rpx;
 	}
 	.chapter-title-box{
 		width: 325rpx;height: 80rpx;text-align: center;font-weight: 800;color: #fbb030;
-		position: absolute;top:170rpx;left:240rpx;white-space: pre-wrap;
+		position: absolute;top:176rpx;left:240rpx;white-space: pre-wrap;
 	}
 	.chapter-small-title-box{line-height: 2;font-size: 38rpx;}
-	.chapter-middle-title-box{line-height: 2.2;font-size: 34rpx;}
+	.chapter-middle-title-box{line-height: 2.3;font-size: 34rpx;}
 	.chapter-big-title-box{line-height: 1.2;font-size: 32rpx;}
 	
 	// brand-content
@@ -301,23 +302,23 @@
 	}
 	.brand-finish-icon{background-image: url("@/static/images/study/dao-finish-icon.png");}
 	
-	.animal-img{left: 28%;top: 48%;animation: shakeOpacity 1s 1;}
-	@keyframes shakeOpacity {
-		0% {opacity: 0;}
-		100% {opacity: 1;;}
-	}
-	
+	.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");
+		}
 	// brand-item
 	.brand-item{box-sizing: border-box;font-size: 24rpx;color: #fff;text-align: center;
 	font-weight: 600;position: relative;position: absolute;@include ezy-no-repeat-cover;}
 	.small-brand-item{width: 231rpx;height: 147rpx;padding: 40rpx 0 10rpx;
 		background-image: url("@/static/images/study/shuxue/duan-pai-disabled.png");
+		.brand-arrow{transform: translateX(-50%);}
 		.brand-content{width: 90%;}
 	}
 	.small-brand-item.brand-active{background-image: url("@/static/images/study/shuxue/duan-pai-active.png");}
 	.big-brand-item{
 		width: 307.69rpx;height: 141.35rpx;padding: 40rpx 0 10rpx;
 		background-image: url("@/static/images/study/shuxue/chang-pai-disabled.png");
+		.brand-arrow{transform: translateX(-46%);}
 		.brand-content{width: 94%;}
 	}
 	.big-brand-item.brand-active{background-image: url("@/static/images/study/shuxue/chang-pai-active.png");}
@@ -325,6 +326,7 @@
 			width: 185rpx;height: 121rpx;@include ezy-no-repeat-cover;
 			padding: 16rpx 10rpx 10rpx 10rpx;position: absolute;top:1112rpx;right:140rpx;
 			background-image: url("@/static/images/study/shuxue/ceshi-pai-disabled.png");
+		.brand-arrow{top: 50%;left: 35%;transform: unset;}
 		.brand-lock,.brand-icon,.brand-finish-icon{left: 0;top: -30rpx;}
 	}
 	.ceshi-brand-item.brand-active{background-image: url("@/static/images/study/shuxue/ceshi-pai-active.png");}
@@ -341,8 +343,9 @@
 	@media (max-height: 800px) {
 		// 0.92
 		.ezy-study-wrap{width: 690rpx;height: 1284rpx;}
-		.chapter-box{width: 138rpx;top:112rpx;left:300rpx;font-size: 28rpx;}
-		.chapter-title-box{width: 296rpx;height: 70rpx;top:155rpx;left:223rpx;font-size: 28rpx;}
+		.animal-img{left: 350rpx;top: 265rpx;}
+		.chapter-box{width: 138rpx;top:118rpx;left:300rpx;font-size: 28rpx;}
+		.chapter-title-box{width: 296rpx;height: 70rpx;top:163rpx;left:223rpx;font-size: 28rpx;}
 		.chapter-small-title-box{line-height: 1.8;font-size: 36rpx;}
 		.chapter-middle-title-box{line-height: 2.4;font-size: 30rpx;}
 		.chapter-big-title-box{line-height: 1.3;font-size: 28rpx;}
@@ -360,8 +363,9 @@
 		min-height: 1260rpx;
 		//0.88
 		.ezy-study-wrap{width: 630rpx;height: 1198rpx;}
-		.chapter-box{top:105rpx;left:278rpx;}
-		.chapter-title-box{width: 280rpx;height: 66rpx;top:145rpx;left:208rpx;}
+		.animal-img{left: 310rpx;top: 250rpx;}
+		.chapter-box{top:110rpx;left:265rpx;}
+		.chapter-title-box{width: 280rpx;height: 66rpx;top:150rpx;left:195rpx;}
 		.chapter-middle-title-box{line-height: 2.2;}
 		.chapter-big-title-box{line-height: 1.2;}
 		.small-brand-item:nth-child(1){top:260rpx;right:50rpx;}
@@ -378,8 +382,9 @@
 		//0.76
 		min-height:1200rpx;
 		.ezy-study-wrap{width: 577rpx;height: 1072rpx;}
-		.chapter-box{width: 120rpx;top:90rpx;left:250rpx;font-size: 26rpx;}
-		.chapter-title-box{width: 250rpx;height: 60rpx;top:128rpx;left:185rpx;}
+		.animal-img{left: 280rpx;top: 210rpx;}
+		.chapter-box{width: 120rpx;top:96rpx;left:245rpx;font-size: 26rpx;}
+		.chapter-title-box{width: 250rpx;height: 60rpx;top:136rpx;left:181rpx;}
 		.chapter-small-title-box{line-height: 1.6;font-size: 34rpx;}
 		.chapter-middle-title-box{line-height: 2;font-size: 28rpx;}
 		.chapter-big-title-box{line-height: 1.2;font-size: 26rpx;}

pages/study/product/shuxue.vue

@@ -6,6 +6,8 @@
 			<view @click="handleCheckCatalogue" :class="getTitleClass(options.zhangName)">
 				{{getZhangName(options.zhangName)}}
 			</view>
+			<!-- 动物类型 -->
+			<view :class="currentGrowth()"></view>
 			<view>
 				<!-- 小岛 -->
 				<view class="brand-item" v-for="(item, index) in options.jieList" :key="item.jieId"
@@ -15,8 +17,8 @@
 						<view class="brand-icon" v-if="item.studyFlag===0">{{ 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 v-if="item.daeFlag &&animalNum == index" class="brand-arrow"></view>
 						<!-- 节名称 -->
 						<view class="brand-content">{{ item.jieName }}</view>
 					</view>
@@ -25,8 +27,8 @@
 						<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="currentGrowth()"></view>
+						<!-- 箭头 -->
+						<view v-if="item.daeFlag  &&  animalNum == index &&isVip != 'Visitor'" class="brand-arrow"></view>
 						<!-- 节名称 -->
 						<view class="brand-content"> {{ item.jieName }} </view>
 					</view>