样式修改

common/styles/global/pages.scss

@@ -190,54 +190,50 @@
 	position: relative;min-height: 1212rpx;
 	.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%;}
+		box-sizing: border-box;padding:  calc(270rpx - var(--status-bar-height)) 4% 1%;}
 	.grade-item {
-		width: 277rpx;height: 87rpx;line-height: 82rpx;
+		width: 270rpx;height: 80rpx;line-height: 70rpx;
 		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;
 	}
 	.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;
-		
+		width: 100%;height: calc(100vh - 620rpx);overflow-y: auto;
+		display: flex;flex-direction: column;margin: 0 auto;box-sizing: border-box;margin: 80rpx 0 0;
 	}
 	.subject-content-box{
-		width: 750rpx;height: auto;display: flex;flex-direction: row;flex-wrap: wrap;
+		width: 750rpx;height: auto;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;
 		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{}
+		width: 32%;margin:24rpx 0 68rpx;position: relative;
+		.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;
+			box-sizing: border-box;padding: 0 36rpx;text-align: center;
+			position: absolute;z-index: 3;left: 0;bottom: -22rpx;color: #fff;
+			display: flex;align-items: center;justify-content: center;
+		}
+		
+	}
+	.subject-item::before{
+		content: '';width: 231rpx;height: 288rpx;z-index: 2;display: block;
+		background-image: url("@/static/images/grade/grades-item.png");@include ezy-no-repeat-cover;
+		position: absolute;top: 5rpx;
 	}
-	.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.active::before{background-image: url("@/static/images/grade/grades-item-active.png");}
 	.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;
+		content: '';width: 750rpx;height: 72rpx;position: absolute;left: -20rpx;bottom: -80rpx;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");
 	}
-	.grade-line{width: 90%;height: 4rpx;border-top: 4rpx dashed #7cbeee;margin: 5% auto 4%;}
+	.grade-line{width: 90%;height: 4rpx;border-top: 4rpx dashed #7cbeee;margin: 16rpx auto;}
 	.grade-confirm-btn{
-		width: 644rpx;height: 108rpx;background-image: url("@/static/images/grade/confirm-btn.png");@include ezy-no-repeat-cover;
+		width: 644rpx;height: 108rpx;background-color: transparent;
+		background-image: url("@/static/images/grade/confirm-btn.png");@include ezy-no-repeat-cover;
 	}
 	.grade-confirm-btn:after{display: none;}
-	/* 针对小屏幕设备 */
-	@media (max-height: 800px) {
-		min-height: 1300rpx;
-		.grades-body{zoom:0.9;bottom: 1%;top: unset;}
-	}
-	@media (max-height: 700px) {
-		min-height: 1200rpx;
-		.grades-body{zoom:0.8;}
-	}
-	@media (max-height: 480px) {
-		min-height: 1200rpx;
-		.grades-body{zoom:0.75;}
-	}
 	
 }