样式修改

common/styles/global/pages.scss

@@ -988,20 +988,21 @@
 			width: 715rpx;margin: 0 auto 16rpx;padding: 47rpx 16rpx 16rpx 16rpx;
 			border-radius: 10rpx;position: relative;
 			.card-body-box{
-				img{width: 124rpx;height: 157rpx;border-radius: 10rpx;}
+				img{width: 124rpx;height: 157rpx;border-radius: 10rpx;flex-shrink: 0;margin-right: 16rpx;}
 				.body-right{
-					margin-left: 16rpx;font-size: 20rpx;display: block;
-					.right-name{font-size: 22rpx;margin: 5rpx 0;}
-					.right-item{width: 50%;display: inline-block;vertical-align: middle;margin: 5rpx 0;}
-					.right-item-mini{width: 40%;}
+					width: calc(100% - 140rpx);margin-left: 0;font-size: 20rpx;display: block;
+					.right-name{font-size: 22rpx;margin: 5rpx 0;@include single-line-ellipsis;}
+					.right-item{width: 49%;display: inline-block;vertical-align: middle;
+					margin: 5rpx 0;@include single-line-ellipsis;}
+					.right-item-all{width: 100%;margin: 5rpx 0;@include single-line-ellipsis;}
 				}
 			}
 			.card-progress-box{
-				position: absolute;bottom: 12rpx;left:140rpx;right: 10rpx;margin-top: 0;
-				.xx-progress-box{margin-right: 42rpx;font-size: 18rpx;}
+				position: absolute;bottom: 16rpx;left:156rpx;right: 10rpx;margin-top: 0;
+				.xx-progress-box{margin-right: 24rpx;font-size: 18rpx;}
 				.xx-progress{margin-top: 0;}
 				.progress-title{display: none;}
-				.jxxx-btn{width: 104rpx;height: 50rpx;margin-right: 16rpx;}
+				.jxxx-btn{width: 100rpx;height: 46rpx;margin-right: 16rpx;}
 			}
 		}
 		.xxjl-card-box::before{width: 188rpx;height: 50rpx;line-height: 50rpx;top: -18rpx;font-size: 22rpx;}
@@ -1055,21 +1056,21 @@
 			width: 1940rpx;margin: 0 auto 38rpx;padding: 115rpx 38rpx 38rpx 38rpx;
 			border-radius: 26rpx;position: relative;
 			.card-body-box{
-				img{width: 304rpx;height: 387rpx;border-radius: 26rpx;}
+				img{width: 304rpx;height: 387rpx;border-radius: 26rpx;margin-right: 42rpx;}
 				.body-right{
-					margin-left: 38rpx;font-size: 46rpx;
+					width: calc(100% - 330rpx);font-size: 46rpx;
 					.right-name{font-size: 54rpx;margin: 16rpx 0;}
 					.right-item{width: 50%;display: inline-block;vertical-align: middle;margin: 16rpx 0;}
 					view{margin: 16rpx 0;}
-					.right-item-mini{width: 40%;}
+					.right-item-all{margin: 16rpx 0;}
 				}
 			}
 			.card-progress-box{
-				position: absolute;bottom: 36rpx;left:360rpx;right: 16rpx;
-				.xx-progress-box{margin-right: 102rpx;font-size: 45rpx;}
+				position: absolute;bottom: 40rpx;left:380rpx;right: 16rpx;
+				.xx-progress-box{margin-right: 64rpx;font-size: 45rpx;}
 				.xx-progress{margin-top: 0;}
 				.progress-title{display: none;}
-				.jxxx-btn{width: 263rpx;height: 122rpx;margin-right: 38rpx;}
+				.jxxx-btn{width: 254rpx;height: 110rpx;margin-right: 38rpx;}
 			}
 		}
 		.xxjl-card-box::before{width: 462rpx;height: 123rpx;line-height: 123rpx;top: -45rpx;font-size: 54rpx;}
@@ -3077,11 +3078,13 @@
 			width: 100%;height: 77rpx;line-height: 77rpx;
 			padding: 0 32rpx;display: flex;margin: 16rpx auto 0;
 		}
-		.big-btn{width: 120rpx;background-color: #fff;border-bottom:6rpx solid #e2e2e2;color:#000;margin-right: 6px;border-radius: 8rpx;}
+		.big-btn{width: 120rpx;height: 78rpx;line-height: 78rpx;background-color: #fff;border-bottom:6rpx solid #e2e2e2;
+		color:#000;margin-right: 6px;border-radius: 8rpx;font-size: 30rpx;box-sizing: border-box;}
 		.big-btn.active{color: #2c9cfe;font-weight: bolder;}
 		.bei-confirm-btn{
+			height: 78rpx;line-height: 78rpx;
 			background-color: transparent;color: #fff;border-radius: 8rpx;flex: 1;
-			background-color: #2c9cfe;border-bottom:6rpx solid #0285fb;
+			background-color: #2c9cfe;border-bottom:6rpx solid #0285fb;font-size: 30rpx;
 		}
 	}
 	@media (max-height: 800px) {
@@ -3105,20 +3108,84 @@
 		.clean-btn{margin-top: 24rpx;}
 		.words-answer-error-box::after,.words-answer-right-box::after{width: 36rpx;height: 36rpx;top: -6rpx;right: -6rpx;}
 	}
+	
+	@include mediaSmall() {
+			height: calc(100vh - 270rpx - var(--status-bar-height));
+			.words-answer-box{
+				min-width: 273rpx;height: 78rpx;line-height: 78rpx;margin: 16rpx auto 0;
+				font-size: 46rpx;border-radius: 5rpx;padding: 0 6rpx;
+				.uni-input-placeholder.input-placeholder{font-size: 42rpx;}
+			}
+			.words-answer-box::placeholder { font-size: 42rpx; }
+			.words-answer-error-box::after,.words-answer-right-box::after{width: 30rpx;height: 30rpx;top: -14rpx;right: -8rpx;}
+			.bei-body-box{margin-bottom: 282rpx;}
+			.words-keyboard-box{
+				padding: 16rpx 0;
+				.keyboard-row{padding: 0 21rpx;margin-bottom: 8rpx;}
+				.keyboard-button{
+					width: 70rpx;height: 58rpx;line-height: 58rpx;
+					font-size: 22rpx;border-radius: 4rpx;border-bottom: 4rpx solid #e2e2e2;
+				}
+				.keyboard-button.active{border-bottom: 4rpx solid #a4e6fc;}
+				.del-btn::after{width: 30rpx;height: 30rpx;margin: 14rpx auto;}
+				.bei-confirm-btn-box{height: 50rpx;line-height: 50rpx;padding: 0 21rpx;margin: 10rpx auto 0;}
+				.big-btn{width: 146rpx;height: 58rpx;line-height: 58rpx;border-radius: 5rpx;margin-right: 6px;font-size: 20rpx;}
+				.bei-confirm-btn{height: 58rpx;line-height: 58rpx;border-radius: 5rpx;font-size: 20rpx;}
+			}
+		}
+		
+	@include mediaBig() {
+		height: calc(100vh - 624rpx - var(--status-bar-height));
+		.words-answer-box{
+			min-width: 672rpx;height: 192rpx;line-height: 192rpx;margin: 64rpx auto 0;
+			font-size: 115rpx;border-radius: 13rpx;padding: 0 16rpx;
+			.uni-input-placeholder.input-placeholder{font-size: 102rpx;}
+		}
+		.words-answer-box::placeholder { font-size: 102rpx; }
+		.words-answer-error-box::after,.words-answer-right-box::after{width: 74rpx;height: 74rpx;top: -35rpx;right: -19rpx;}
+		.bei-body-box{margin-bottom: 694rpx;}
+		.words-keyboard-box{
+			padding: 38rpx 0;
+			.keyboard-row{padding: 0 51rpx;margin-bottom: 19rpx;}
+			.keyboard-button{
+				width: 190rpx;height: 144rpx;line-height: 144rpx;
+				font-size: 54rpx;border-radius: 10rpx;border-bottom: 10rpx solid #e2e2e2;
+			}
+			.keyboard-button.active{border-bottom: 10rpx solid #a4e6fc;}
+			.del-btn::after{width: 74rpx;height: 74rpx;margin: 35rpx auto;}
+			.bei-confirm-btn-box{height: 123rpx;line-height: 123rpx;padding: 0 51rpx;margin: 26rpx auto 0;}
+			.big-btn{
+				width: 400rpx;height: 125rpx;line-height: 125rpx;
+				border-radius: 13rpx;margin-right: 10px;font-size: 46rpx;
+			}
+			.bei-confirm-btn{height: 125rpx;line-height: 125rpx;border-radius: 13rpx;font-size: 46rpx;}
+		}
+	}
+	
+
 }
 
 // 单词详解
 .words-details-page{
-	// background-image: url("@/static/images/course/course-cjdc-bj.png");
 	.words-details-body{overflow-y: auto;padding: 0;}
 	.details-word{color: #000;font-size: 62rpx;font-weight: bold;margin:6rpx 0 24rpx;}
 	.tysy-content{color: #333;margin: 16rpx 12rpx 0;}
+	@include mediaSmall() {
+		.details-word{font-size: 40rpx;margin: 4rpx 0 16rpx;}
+		.tysy-content{margin: 10rpx 8rpx 0;}
+	}
+	@include mediaBig() {
+		.details-word{font-size: 100rpx;margin: 10rpx 0 38rpx;}
+		.tysy-content{margin: 26rpx 19rpx 0;}
+	}
 }
 
 // 对错弹窗
 .ezy-image-dialog{
 	width: 500rpx;height: 440rpx;background-position: center;
 	background-size: cover;background-repeat: no-repeat;
+	@include mediaSmall() {width: 325rpx;height: 286rpx;}
+	@include mediaBig() {width: 800rpx;height: 704rpx;}
 }
 .ezy-image-dialog.wrong{background-image: url("@/static/images/common/wordView/error-tip-img.gif");}
 .ezy-image-dialog.right{background-image: url("@/static/images/common/wordView/right-tip-img.gif");}

pages/chanpinneirong/chanpin1.vue

@@ -10,9 +10,9 @@
 						<img :src="banbenInfo.cover" />
 						<view class="body-right">
 							<view class="right-name">{{ banbenInfo.chanpinName }}</view>
-							<view class="right-item right-item-mini">等级：{{banbenInfo.dengjiName}}</view>
+							<view class="right-item">等级：{{banbenInfo.dengjiName}}</view>
 							<view class="right-item">版本：{{banbenInfo.name}}</view>
-							<view class="right-item right-item-mini">单元：{{banbenInfo.curDanyuanName}}</view>
+							<view class="right-item">单元：{{banbenInfo.curDanyuanName}}</view>
 							<view class="right-item">课程：{{banbenInfo.curKechengName}}</view>
 						</view>
 					</view>

pages/chanpinneirong/chanpin2.vue

@@ -10,9 +10,9 @@
 						<img :src="neirongInfo.cover" />
 						<view class="body-right">
 							<view class="right-name">{{ neirongInfo.chanpinName }}</view>
-							<view class="right-item right-item-mini">等级：{{neirongInfo.dengjiName}}</view>
+							<view class="right-item">等级：{{neirongInfo.dengjiName}}</view>
 							<view class="right-item">版本：{{neirongInfo.name}}</view>
-							<view>课程：{{neirongInfo.curKechengName}}</view>
+							<view class="right-item-all">课程：{{neirongInfo.curKechengName}}</view>
 						</view>
 					</view>
 					<view class="card-progress-box">

pages/chanpinneirong/chanpin3.vue

@@ -10,9 +10,9 @@
 						<img :src="neirongInfo.cover" />
 						<view class="body-right">
 							<view class="right-name">{{ neirongInfo.chanpinName }}</view>
-							<view class="right-item right-item-mini">等级：{{neirongInfo.dengjiName}}</view>
+							<view class="right-item">等级：{{neirongInfo.dengjiName}}</view>
 							<view class="right-item">版本：{{neirongInfo.name}}</view>
-							<view>课程：{{neirongInfo.curDanyuanName}}</view>
+							<view class="right-item-all">课程：{{neirongInfo.curDanyuanName}}</view>
 						</view>
 					</view>
 					<view class="card-progress-box">

pages/chanpinneirong/chanpin4.vue

@@ -10,9 +10,9 @@
 						<img :src="banbenInfo.cover" />
 						<view class="body-right">
 							<view class="right-name">{{ banbenInfo.chanpinName }}</view>
-							<view class="right-item right-item-mini">等级：{{banbenInfo.dengjiName}}</view>
+							<view class="right-item">等级：{{banbenInfo.dengjiName}}</view>
 							<view class="right-item">版本：{{banbenInfo.name}}</view>
-							<view class="right-item right-item-mini">单元：{{banbenInfo.curDanyuanName}}</view>
+							<view class="right-item">单元：{{banbenInfo.curDanyuanName}}</view>
 							<view class="right-item">课程：{{banbenInfo.curKechengName}}</view>
 						</view>
 					</view>