选择年级和学期页面第一版

common/styles/global/pages.scss

@@ -79,7 +79,41 @@
 	}
 }
 
-
+// 选择年级和学期
+.grades-terms-page{
+	width:100%;height:100vh; 
+	background-color: #80dfff;padding-top: 52%;
+	background-image: url("@/static/images/grade/grades-terms-bj.png");@include ezy-no-repeat-cover(top);
+	.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);
+	}
+	.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 {
+		width: 277rpx;height: 87rpx;line-height: 82rpx;margin: 2% 0;
+		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;
+		-webkit-text-stroke: 1.6rpx #003466; 
+		text-stroke: 1.6rpx #003466; 
+	}
+	.grade-item.active{
+		color: #fff;-webkit-text-stroke: 1.6rpx #ac5300;text-stroke: 1.6rpx #ac5300; 
+		background-image: url("@/static/images/grade/grades-a-bj.png");
+	}
+	.grade-line{width: 90%;height: 4rpx;border-top: 4rpx dashed #7cbeee;margin: 5% auto 4%;}
+	.grade-confirm-btn{
+		width: 644rpx;height: 108rpx;background-image: url("@/static/images/grade/confirm-btn.png");@include ezy-no-repeat-cover;
+	}
+	.grade-confirm-btn:after{display: none;}
+}
 
 	// height:$titleBar-tabBar-page;
 .lli-develop-expect-page{

pages/selectGradesTerms/index.vue

@@ -1,24 +1,20 @@
 <template>
-	<view class="grades-terms-container">
-		<view class="content-container">
-			<view class="content-title">请选择年级和学期</view>
-			<text class="content-desc">我们会根据您选择，为您匹配对应的学习内容</text>
-			<view class="grade-label">
-				年级
-			</view>
-			<view class="grade-container">
+	<view class="grades-terms-page">
+		<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 v-for="item in nianji_list" :key="item.id" @click="handleSelectGrade(item)"
 					:class="['grade-item', {active: item.id == activeNianji}]">{{item.label}}</view>
 			</view>
-			<view class="term-label">
-				学期
-			</view>
-			<view class="term-container">
+			<view class="grades-terms-title grades-title-img"></view>
+			<view class="grade-item-box">
 				<view v-for="item in xueqi_list" :key="item.id" @click="handleSelectTerm(item)"
-					:class="['term-item',{active: item.id == activeXueqi}]">{{item.label}}</view>
+					:class="['grade-item',{active: item.id == activeXueqi}]">{{item.label}}</view>
 			</view>
-			<view class="under-line"></view>
-			<button class="confirm-btn" @click="handleConfirm">确定</button>
+			<view class="grade-line"></view>
+			<button class="grade-confirm-btn" @click="handleConfirm"></button>
 		</view>
 	</view>
 </template>
@@ -47,44 +43,3 @@
 		activeXueqi.value = item.id;
 	}
 </script>
-
-<style lang="scss" scoped>
-	.active {
-		// 选中状态
-		color: red
-	}
-
-	.grade-container {
-		display: flex;
-		flex-wrap: wrap;
-	}
-
-	.grade-item {
-		flex: 1;
-		min-width: 50%;
-		text-align: center;
-		padding: 10px;
-	}
-
-	.grade-label {
-		text-align: center;
-		padding: 10px;
-	}
-
-	.term-container {
-		display: flex;
-		flex-wrap: wrap;
-	}
-
-	.term-item {
-		flex: 1;
-		min-width: 50%;
-		text-align: center;
-		padding: 10px;
-	}
-
-	.term-label {
-		text-align: center;
-		padding: 10px;
-	}
-</style>