样式修改

common/styles/global/pages.scss

@@ -185,30 +185,38 @@
 // 选择年级和学期
 .grades-terms-page{
 	width:100%;height:100vh;background-color: #43c1f6;box-sizing: border-box;padding-top:var(--status-bar-height);
-	background-image: url("@/static/images/grade/grades-terms-bj.png");@include ezy-no-repeat-cover(top);
+	background-image: url("@/static/images/grade/grades-terms-bj1.png");@include ezy-no-repeat-cover(top);
 	// padding-top: 52%;
 	position: relative;min-height: 1212rpx;
-	.grades-body{
-		width: 752rpx;max-width: 100%;height: 1212rpx;display: flex;flex-direction: column;margin: 0 auto;
-		background-image: url("@/static/images/grade/grades-border.png");@include ezy-no-repeat-cover(top);
-		position: absolute;left: 50%;transform: translateX(-50%);top: 24%;
-	}
-	.grades-change-title{
-		width: 577rpx;height: 92rpx;margin: 10% auto 0;
-		background-image: url("@/static/images/grade/grades-title.png");@include ezy-no-repeat-cover;
-	}
-	.grades-title-desc{font-size: 28rpx;color: #777;text-align: center;margin-top: 10rpx;}
-	.grades-terms-title{width: 692rpx;height: 92rpx;margin: 3% auto 0;@include ezy-no-repeat-cover;}
-	.grades-title-img{background-image: url("@/static/images/grade/grade-title.png");}
-	.terms-title-img{background-image: url("@/static/images/grade/term-bj.png");}
-	.grade-item-box{display: flex;flex-wrap: wrap;justify-content: space-evenly;box-sizing: border-box;padding: 3% 4% 1%;}
+	.grade-item-box{
+		display: flex;flex-wrap: wrap;justify-content: space-evenly;
+		box-sizing: border-box;padding:  calc(264rpx + var(--status-bar-height)) 4% 1%;}
 	.grade-item {
-		width: 277rpx;height: 87rpx;line-height: 82rpx;margin: 2% 0;
+		width: 277rpx;height: 87rpx;line-height: 82rpx;
 		background-image: url("@/static/images/grade/grades-bj.png");@include ezy-no-repeat-cover;
 		text-align: center;font-size: 36rpx;color: #fff;font-weight: 800;
 	}
-	.grade-yingyu-item{width: 277rpx;height: 87rpx;line-height: 82rpx;margin: 2% 0;}
-	// -webkit-text-stroke: 1.6rpx #ac5300;text-stroke: 1.6rpx #ac5300; 
+	.subject-body{
+		width: 100%;height: calc(100vh - 540rpx - var(--status-bar-height));overflow-y: auto;display: flex;flex-direction: column;margin: 0 auto;
+		box-sizing: border-box;padding: 80rpx 0;
+		
+	}
+	.subject-content-box{
+		width: 750rpx;height: auto;display: flex;flex-direction: row;flex-wrap: wrap;
+		box-sizing: border-box;padding:0 20rpx;background-repeat: repeat-y;
+	}
+	.subject-item{
+		margin:48rpx 8rpx 0 0;position: relative;
+		.subject-item-img{width: 190rpx;height: 190rpx;margin: 20rpx auto 0;display: block;}
+		// .subject-item-text{}
+	}
+	.subject-item-border{
+		width: 231rpx;height: 288rpx;z-index: 2;position: relative;
+		background-image: url("@/static/images/grade/grades-item.png");@include ezy-no-repeat-cover;}
+	.subject-item:nth-child(3n+3){margin-right: 0;}
+	.subject-item:nth-child(3n+1)::after{
+		content: '';width: 750rpx;height: 327rpx;position: absolute;left: 0;bottom: 0;z-index: 1;
+		background-image: url("@/static/images/grade/grades-row-bj.png");@include ezy-no-repeat-contain;}
 	.grade-item.active{
 		color: #fff;background-image: url("@/static/images/grade/grades-a-bj.png");
 	}
@@ -1123,13 +1131,14 @@
 		.order-content-box{
 			display: flex;margin-top: 10rpx;border-bottom: 1px dashed #fff;
 			box-sizing: border-box;padding-bottom: 32rpx;margin-bottom: 24rpx;
-			icon{width: 212rpx;height: 202rpx;margin-right: 20rpx;@include ezy-no-repeat-cover;}
+			icon{width: 212rpx;height: 202rpx;margin-right: 20rpx;@include ezy-no-repeat-cover;flex-shrink: 0;}
 			.content-img1{background-image: url("@/static/images/pay/svip1.png");}
 			.content-img2{background-image: url("@/static/images/pay/svip2.png");}
 			.content-body-box{display: flex;flex-direction: column;}
 			.content-name{
-				font-size: 40rpx;color: #333;margin-bottom: 12rpx;
+				font-size: 36rpx;color: #000;margin-bottom: 12rpx;@include single-line-ellipsis;max-width: 320rpx;
 			}
+			.content-text{font-size: 24rpx;color: #666;@include multi-line-ellipsis(3);line-height: 1.4;}
 			.content-tag{
 				width: 160rpx;height: 40rpx;line-height: 40rpx;
 				font-size: 24rpx;color: #01c6fe;background-color: rgba(255, 255, 255, 0.6);
@@ -1140,6 +1149,12 @@
 		
 		.order-bottom-box{
 			box-sizing: border-box;padding-bottom: 24rpx;
+			.order-kcb-btn{
+				width: 180rpx;height: 56rpx;line-height: 56rpx;text-align: center;font-size: 24rpx;color: #fff;
+				@include ezy-no-repeat-cover;background-image: url("@/static/images/common/jf-bj.png");
+				icon{width: 18rpx;height: 18rpx;@include ezy-no-repeat-cover;margin-left: 4rpx;
+			background-image: url("@/static/images/common/jt-up-white-icon.svg");transform: scale(180deg);}
+			}
 			.bottom-money-box{
 				 display: flex;justify-content: space-between;align-items: center;
 				.bottom-data{font-size: 24rpx;color: #999;}
@@ -1559,7 +1574,7 @@
 			.content-body-box{display: flex;flex-direction: column;justify-content: space-between;}
 			.content-name{
 				font-size: 36rpx;color: #000;margin-bottom: 12rpx;display: flex;align-items: center;
-				.name-text{@include single-line-ellipsis;max-width: 320rpx;margin-right: 10rpx;}
+				.name-text{@include single-line-ellipsis;max-width: 360rpx;margin-right: 10rpx;}
 			}
 			.content-text{font-size: 24rpx;color: #666;@include multi-line-ellipsis(3);line-height: 1.4;}
 			.content-row{

pages/selectGradesTerms/index.vue

@@ -4,23 +4,24 @@
 			<!-- 返回按钮↓ -->
 			<view class="nav-bar-icon"  @click="handleBack"></view>
 		</view>
-		<view class="grades-body">
-			<view class="grades-change-title"></view>
-			<text class="grades-title-desc">我们会根据您选择，为您匹配对应的学习内容</text>
-			<view class="grades-terms-title terms-title-img"></view>
-      <view class="grade-item-box">
-        <view :key="xueke.id" @click="handleSelectXueke(xueke)" v-for="xueke in xuekeData"
-              :class="['grade-item',{active: xueke.id == activeXueke}]">{{xueke.lable}}</view>
-      </view>
-      <view class="grades-terms-title grades-title-img"></view>
-      <view class="grade-item-box">
-        <!-- 产品 -->
-        <view v-for="item in xuekeList" :key="item.id" @click="handleSelectGrade(item)"
-              :class="['grade-item', {active: item.id == activeProduct}]">{{item.lable}}</view>
-      </view>
-      <view class="grade-line"></view>
-			<button class="grade-confirm-btn" @click="handleConfirm"></button>
+		<view class="grade-item-box">
+			<view :key="xueke.id" @click="handleSelectXueke(xueke)" v-for="xueke in xuekeData"
+					  :class="['grade-item',{active: xueke.id == activeXueke}]">{{xueke.lable}}</view>
 		</view>
+		<view class="subject-body">
+			<view class="subject-content-box">
+				<!-- 产品 -->
+				<view v-for="item in xuekeList" :key="item.id" @click="handleSelectGrade(item)"
+					  :class="['subject-item', {active: item.id == activeProduct}]">
+					  <view class="subject-item-border">
+						  <img :src="item.cover" class="subject-item-img"/>
+						  <view class="subject-item-text">{{item.lable}}</view>
+					  </view>
+				</view>
+			</view>
+		</view>
+		<view class="grade-line"></view>
+		<button class="grade-confirm-btn" @click="handleConfirm"></button>
 	</view>
 </template>