样式修改

common/styles/global/pages.scss

@@ -206,6 +206,9 @@
 	}
 	.subject-item{
 		width: 32%;margin:24rpx 0.8% 68rpx;position: relative;
+		.subject-active-icon{width: 40rpx;height: 40rpx;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/grade/grades-item-a.png");
+		position: absolute;top: 32rpx;right: 20rpx;}
 		.subject-item-img{width: 220rpx;height: 220rpx;margin: 20rpx auto 0;display: block;border-radius: 30rpx;}
 		.subject-item-text{
 			width: 100%;height: 60rpx;font-size: 24rpx;line-height: 1.2;
@@ -221,8 +224,8 @@
 		background-image: url("@/static/images/grade/grades-item.png");@include ezy-no-repeat-cover;
 		position: absolute;top: 5rpx;
 	}
-	.subject-jstx-item::before{background-image: url("@/static/images/grade/grades-jstx-item.png");}
-	.subject-item.active::before,.subject-jstx-item.active::before{background-image: url("@/static/images/grade/grades-item-active.png");}
+	.subject-jstx-item::before{
+		background-image: url("@/static/images/grade/grades-jstx-item.png");}
 	.subject-item:nth-child(3n+3){margin-right: 0;}
 	.subject-item:nth-child(3n+1)::after{
 		content: '';width: 750rpx;height: 72rpx;position: absolute;left: -20rpx;bottom: -80rpx;z-index: 1;
@@ -619,6 +622,111 @@
 	}
 }
 
+// 超级单词
+.ezy-cjdc-study-page{
+	background-color: #00aeee;@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/study/cjdc/study-cjdc-bj.png");
+	.ezy-study-wrap{
+		width:750rpx;height:1250rpx;position: absolute;top:calc(var(--status-bar-height) + 2%);
+		background-image: url("@/static/images/study/cjdc/study-wrap-bj.png");}
+	.animal-img{right: 60rpx;top: 280rpx;}
+	
+	
+	
+	.chapter-title-box{
+		width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-weight: 800;color: #66ffff;font-size: 28rpx;
+		position: absolute;top:175rpx;left:25rpx;box-sizing: content-box;padding: 10rpx 54rpx 175rpx 250rpx;
+	}
+	// brand-content
+	.brand-content{width: 225rpx;height: 48rpx;line-height: 48rpx;color: #fff;margin: 0 auto;
+	text-align: center;@include single-line-ellipsis;font-size: 18rpx;box-sizing: border-box;padding: 0 4rpx;}
+	.brand-lock,.brand-finish-icon{
+		width: 70rpx;height: 70rpx;@include ezy-no-repeat-cover;
+		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-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: 225rpx;height: 48rpx;position: absolute;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/study/cjdc/dao-item-disabled.png");
+		}
+	.brand-active{background-image: url("@/static/images/study/cjdc/dao-item-active.png");}
+	
+	.brand-item:nth-child(1){top:700rpx;right:24rpx;}
+	.brand-item:nth-child(2){top:850rpx;left:70rpx;}
+	.brand-item:nth-child(3){
+		top:1024rpx;right:56rpx;
+		.brand-lock,.brand-finish-icon{top: -135rpx;right: 60rpx;}
+		}
+	.brand-item:nth-child(4){top:1180rpx;left:52rpx;}
+	.brand-item.ceshi-brand-item{
+		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");
+		.brand-content{display: none;}
+		.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) {
+		// 0.9
+		min-height:1400rpx;
+		.animal-img{left: 260rpx;top: 390rpx;}
+		.chapter-title-box{width: 120rpx;height: 48rpx;line-height: 52rpx;top:162rpx;left:26rpx;padding: 10rpx 42rpx 170rpx 220rpx;}
+		.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: 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:1300rpx;
+		.animal-img{left: 240rpx;top: 340rpx;}
+		.chapter-title-box{width: 100rpx;height: 40rpx;line-height: 40rpx;top:145rpx;left:22rpx;font-size: 24rpx;padding: 10rpx 24rpx 170rpx 196rpx;}
+		.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){
+			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: 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){
+		.chapter-title-box{padding: 10rpx 44rpx 150rpx 195rpx;}
+		.brand-item.ceshi-brand-item{left: unset;top:1020rpx;}
+	}
+}
+
 // 岛弹窗
 .dao-popup-box{
 	width: 100%;height: 865rpx;

pages/selectGradesTerms/index.vue

@@ -13,13 +13,8 @@
 				<view class="subject-content-box">
 					<!-- 产品 -->
 					<view v-for="item in xuekeList" :key="item.id" :id="`s_${item.id}`"  @click="handleSelectGrade(item)"
-						:class="[
-						    'subject-item',
-						    item.typeId === 1 && 'subject-jstx-item',
-						    {
-						      'active': item.id == activeProduct
-						    }
-						  ]">
+						:class="[ 'subject-item', item.typeId === 1 && 'subject-jstx-item' ]">
+							<icon v-if="item.id === activeProduct" class="subject-active-icon"></icon>
 							<img :src="item.cover" class="subject-item-img" />
 							<view class="subject-item-text"><text>{{item.lable}}</text></view>
 					</view>