瀏覽代碼

Merge remote-tracking branch 'origin/2024鹅状元' into 2024鹅状元

wangxy 4 月之前
父節點
當前提交
b860d07514
共有 4 個文件被更改,包括 36 次插入32 次删除
  1. 18 24
      common/styles/global/pages.scss
  2. 1 1
      pages/study/index.vue
  3. 2 2
      pages/study/product/shuxue.vue
  4. 15 5
      pages/study/product/yingyu.vue

+ 18 - 24
common/styles/global/pages.scss

@@ -245,23 +245,10 @@
 	}
 	// animal
 	.animal-img{width:48rpx;height: 68rpx;@include ezy-no-repeat-cover;position: absolute;}
-	@keyframes shakeDan {
-		0% {transform: translateX(0) scale(1);}
-		25% {transform: rotate(-20deg);}
-		50% {transform: rotate(20deg);}
-		75% {transform: rotate(0deg) scale(1.2);}
-		100% {transform: rotate(0deg) scale(1);}
-	}
-	@keyframes shakeE {
-		0% {transform: translateX(0);}
-		25% {transform: rotate(-8deg);}
-		75% {transform: rotate(8deg);}
-		100% {transform: rotate(0deg);}
-	}
-	.dan-img{background-image: url("@/static/images/study/animal-img1.png");animation: shakeDan 3s infinite;}
-	.xiao-e-img{background-image: url("@/static/images/study/animal-img2.png");animation: shakeE 3s infinite;}
-	.zhong-e-img{background-image: url("@/static/images/study/animal-img3.png");animation: shakeE 3s infinite;}
-	.da-e-img{background-image: url("@/static/images/study/animal-img4.png");animation: shakeE 3s infinite;}
+	.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{
@@ -299,8 +286,11 @@
 	}
 	.brand-finish-icon{background-image: url("@/static/images/study/dao-finish-icon.png");}
 	
-	// animal
-	.animal-img{left: 28%;top: 48%;}
+	.animal-img{left: 28%;top: 48%;animation: shakeOpacity 1s 1;}
+	@keyframes shakeOpacity {
+		0% {opacity: 0;}
+		100% {opacity: 1;;}
+	}
 	
 	// brand-item
 	.brand-item{box-sizing: border-box;font-size: 24rpx;color: #fff;text-align: center;
@@ -434,29 +424,33 @@
 	.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;}
+		.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;}
+		.animal-img{top: 60rpx;right: 180rpx;animation: shakeOpacity 1s 1;}
 	}
 	.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;}
+		.animal-img{top: 20rpx;right: 30rpx;animation: shakeOpacity 1s 1;}
 		}
 	.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;}
+		.animal-img{top: 60rpx;right: 180rpx;animation: shakeOpacity 1s 1;}
 	}
 	.brand-item.ceshi-brand-item{
 		width: 308rpx;height: 225rpx;top:1250rpx;right:30rpx;left: unset;@include ezy-no-repeat-cover;
@@ -464,7 +458,7 @@
 		.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;}
+		.animal-img{top: 100rpx;right: 40rpx;animation: shakeOpacity 1s 1;}
 	}
 	
 	@media (max-height: 800px) {

+ 1 - 1
pages/study/index.vue

@@ -8,7 +8,7 @@
 					:options="item">
 				</shuxueZhangjie>
 				<yingyuZhangjie v-if="currentProduct ==2" @clickGradeTerm="clickGradeTerm"
-					@handleCheckCatalogue="handleCheckCatalogue" @listClick="listClick" :options="item">
+					@handleCheckCatalogue="handleCheckCatalogue" @listClick="listClick" :gradeTerm='gradeTerm' :options="item">
 				</yingyuZhangjie>
 			</view>
 		</swiper-item>

+ 2 - 2
pages/study/product/shuxue.vue

@@ -23,8 +23,8 @@
 					</view>
 					<view v-if="isVip !== 'VIP'">
 						<!-- 序号或锁 -->
-						<view v-if="item.firstFlag ==1" class="brand-icon">{{ item.number }}</view>
-						<view v-if="item.firstFlag !=1" class="brand-lock"></view>
+						<view v-if="options.number ==1" class="brand-icon">{{ item.number }}</view>
+						<view v-if="options.number !=1" 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>

+ 15 - 5
pages/study/product/yingyu.vue

@@ -70,6 +70,9 @@
 		options: {
 			type: Object,
 		},
+		gradeTerm: {
+			type: String,
+		},
 	})
 	const isVip = getUserIdentity();
 	const gradeMapping = {
@@ -90,6 +93,7 @@
 	let isSliding = ref(false);
 	let endX = ref(0);
 	let gradeTerm = ref('');
+	
 
 	function clickGradeTerm() {
 		$emit('clickGradeTerm');
@@ -132,10 +136,6 @@
 		}
 	}
 	
-	function translateData(data) {
-		return gradeMapping[data.nianji] + termMapping[data.cardId]
-	}
-
 	function handleCheckCatalogue() {
 		$emit('handleCheckCatalogue');
 	}
@@ -196,12 +196,22 @@
 	//	console.log('New options:', newVal);
 	//	console.log('Old options:', oldVal);
 		// 在这里可以根据新的 options 做一些操作,比如发起请求等
-		gradeTerm.value = translateData(newVal);
+		
 		dataRecom(newVal)
 	}, {
 		deep: true,
 		immediate: true
 	});
+	watch(() => props.gradeTerm, (newVal, oldVal) => {
+	//	console.log('New options:', newVal);
+	//	console.log('Old options:', oldVal);
+		// 在这里可以根据新的 options 做一些操作,比如发起请求等
+		gradeTerm.value = newVal
+	
+	}, {
+		deep: true,
+		immediate: true
+	});
 </script>
 
 <style>