样式修改

common/styles/global/pages.scss

@@ -1911,54 +1911,16 @@
 			.word-view-btn + .word-view-btn{margin-left: 30rpx;}
 		}
 	}
-	.word-view-swiper-box{flex: 1;overflow-y: auto;box-sizing: border-box;padding: 10rpx;}
-	
-	/*****拼*****/
-	.words-pin-box{display: flex;flex-direction: column;height: calc(100vh - 310rpx - var(--status-bar-height));}
-	.pin-body-box{flex: 1;overflow-y: auto;}
-	// 拼读 +选择
-	.pin-words-box{
-		// min-width: 80rpx;height: 100rpx;font-size: 64rpx;
-		display: flex;justify-content: center;margin-top: 64rpx;
-		.words-item{min-width: 90rpx;height: 120rpx;line-height: 120rpx;font-size: 80rpx;
-			text-align: center;box-sizing: border-box;padding: 0 6rpx;font-weight: bold;
-			border-radius: 8rpx;background-color: #b7e2f5;color: #015fb0;}
-		.words-item + .words-item{margin-left: 12rpx;}
-	}
-	.pin-small-words-box{
-		.words-item{min-width: 70rpx;height: 100rpx;line-height: 110rpx;font-size: 64rpx;padding: 0 4rpx;}
-		.words-item + .words-item{margin-left: 8rpx;}
-	}
-	// 回答正确 && 回答错误
-	.pin-error-words-box,.pin-right-words-box{
-		.words-item:last-child{position: relative;}
-		.words-item:last-child::after{
-			content: '';width: 46rpx;height: 46rpx;display: block;@include ezy-no-repeat-cover;
-			position: absolute;top: -22rpx;right: -12rpx;
-		}
-	}
-	.pin-error-words-box.isAll{
-		.words-item{background-color: #fbc2c2;color: #ff4d4d;}
-		.words-item:last-child::after{background-image: url("@/static/images/study/cjdc/wordView/word-error-icon.png");}
-	}
-	.pin-right-words-box.isAll{
-		.words-item{background-color: #ddffdd;color: #36c336;}
-		.words-item:last-child::after{background-image: url("@/static/images/study/cjdc/wordView/word-right-icon.png");}
-	}
-	
-	// 清空按钮
-	.pin-tip{width: 560rpx;margin: 24rpx auto 0;font-size: 26rpx;text-align: center;border-radius: 8rpx;
-	color: #015fb0;border: 1rpx dashed #015fb0;box-sizing: border-box;padding: 10rpx 0;}
-	// 提示
-	.clean-btn{width: 171rpx;height:58rpx;@include ezy-no-repeat-cover;margin: 24rpx auto 0;
-	background-image: url("@/static/images/study/cjdc/wordView/clean-btn.png");
-	}
+	.word-view-swiper-box{flex: 1;overflow-y: auto;box-sizing: border-box;}
+	/*****componets*****/
 	// 解释
 	.pin-words-explain-box{
 		margin-top: 64rpx;
 		.words-explain-item{font-size: 28rpx;color: #333;text-align: center;}
 		.words-explain-item + .words-explain-item{margin-top: 16rpx;}
 	}
+	
+	//播放
 	.audio-play-btn,.audio-playing-btn{
 		width: 110rpx;height:110rpx;
 	@include ezy-no-repeat-cover;margin: 56rpx auto 0;
@@ -1966,26 +1928,103 @@
 	.audio-play-btn{background-image: url("@/static/images/study/cjdc/wordView/play-btn.png");}
 	.audio-playing-btn{background-image: url("@/static/images/study/cjdc/wordView/playing-btn.gif");}
 	
-	// 选择单词
-	.pin-words-change-box{
-		margin-bottom: 32rpx;
-		.words-change-item{line-height: 116rpx;border: 1rpx solid #2da8e7;border-bottom: 8rpx solid #41c5ff}
-		.words-change-item.disabled{border: 1rpx solid #999;border-bottom: 8rpx solid #ccc;
-		color: #999;background-color: #f0f0f0;}
-	}
-	.pin-words-change-box.pin-small-words-box{
-		.words-item{line-height: 90rpx;}
+	// 清空按钮
+	.pin-tip{width: 560rpx;margin: 24rpx auto 0;font-size: 26rpx;text-align: center;border-radius: 8rpx;
+	color: #015fb0;border: 1rpx dashed #015fb0;box-sizing: border-box;padding: 10rpx 0;}
+	// 提示
+	.clean-btn{width: 171rpx;height:58rpx;@include ezy-no-repeat-cover;margin: 24rpx auto 0;
+	background-image: url("@/static/images/study/cjdc/wordView/clean-btn.png");
 	}
 	
-	@media (max-height: 600px) {
-		// 拼
-		.words-pin-box{
-			.select-types-box{margin-top: 10rpx;}
-			.pin-words-box,.pin-words-explain-box{margin-top: 32rpx;}
-			.audio-play-btn,.audio-playing-btn{width: 96rpx;height:96rpx;margin-top: 24rpx;}
+	
+	/*****拼*****/
+	.words-pin-box{
+		display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
+		height: calc(100vh - 290rpx - var(--status-bar-height));
+		.pin-body-box{flex: 1;overflow-y: auto;}
+		// 拼读 +选择
+		.pin-words-box{
+			// min-width: 80rpx;height: 100rpx;font-size: 64rpx;
+			display: flex;justify-content: center;margin-top: 64rpx;
+			.words-item{min-width: 90rpx;height: 120rpx;line-height: 120rpx;font-size: 80rpx;
+				text-align: center;box-sizing: border-box;padding: 0 6rpx;font-weight: bold;
+				border-radius: 8rpx;background-color: #b7e2f5;color: #015fb0;}
+			.words-item + .words-item{margin-left: 12rpx;}
+		}
+		.pin-small-words-box{
+			.words-item{min-width: 70rpx;height: 100rpx;line-height: 110rpx;font-size: 64rpx;padding: 0 4rpx;}
+			.words-item + .words-item{margin-left: 8rpx;}
+		}
+		// 回答正确 && 回答错误
+		.pin-error-words-box,.pin-right-words-box{
+			.words-item:last-child{position: relative;}
+			.words-item:last-child::after{
+				content: '';width: 46rpx;height: 46rpx;display: block;@include ezy-no-repeat-cover;
+				position: absolute;top: -22rpx;right: -12rpx;
+			}
+		}
+		.pin-error-words-box.isAll{
+			.words-item{background-color: #fbc2c2;color: #ff4d4d;}
+			.words-item:last-child::after{background-image: url("@/static/images/study/cjdc/wordView/word-error-icon.png");}
+		}
+		.pin-right-words-box.isAll{
+			.words-item{background-color: #ddffdd;color: #36c336;}
+			.words-item:last-child::after{background-image: url("@/static/images/study/cjdc/wordView/word-right-icon.png");}
+		}
+		
+		// 选择单词
+		.pin-words-change-box{
+			margin-bottom: 32rpx;
+			.words-change-item{line-height: 116rpx;border: 1rpx solid #2da8e7;border-bottom: 8rpx solid #41c5ff}
+			.words-change-item.disabled{border: 1rpx solid #999;border-bottom: 8rpx solid #ccc;
+			color: #999;background-color: #f0f0f0;}
+		}
+		.pin-words-change-box.pin-small-words-box{
+			.words-item{line-height: 90rpx;}
+		}
+		
+		@media (max-height: 600px) {
+			// 拼
+			.words-pin-box{
+				.select-types-box{margin-top: 10rpx;}
+				.pin-words-box,.pin-words-explain-box{margin-top: 32rpx;}
+				.audio-play-btn,.audio-playing-btn{width: 96rpx;height:96rpx;margin-top: 24rpx;}
+			}
+		}
+	}
+	/***** 背 *****/
+	.words-bei-box{
+		text-align: center;
+		// 答案
+		.words-answer-box{
+			min-width: 420rpx;max-width: 90%;height: 120rpx;line-height: 120rpx;margin-top: 64rpx;
+			background-color: #b7e2f5;color: #015fb0;font-size: 72rpx;display: inline-block;
+			border-radius: 8rpx;padding: 0 10rpx;box-sizing: border-box;font-weight: bold;
+			.uni-input-placeholder.input-placeholder{color: #015fb0;font-size: 64rpx;}
+		}
+		// 
+		.words-answer-box::placeholder { color: #015fb0;font-size: 64rpx; }
+			
+		// 键盘
+		.words-keyboard-box{
+			background-color: #e5e8ee;box-sizing: border-box;padding: 24rpx 0;
+			position: absolute;bottom: -10rpx;left: -10rpx;right: -10rpx;
+			.keyboard-row{display: flex;justify-content: space-between;
+			box-sizing: border-box;padding: 0 32rpx;margin-bottom: 12rpx;}
+			.keyboard-button{
+				width: 56rpx;height: 90rpx;line-height: 90rpx;text-align: center;
+				background-color: #fff;color:#000;border-radius: 6rpx;
+				border-bottom:6rpx solid #e2e2e2;box-sizing: border-box;}
+			.keyboard-button.active{background-color: #b7e2f5;color:#015fb0;border-bottom:6rpx solid #41c5ff;}
+			.del-btn::after{
+				content: '';width: 46rpx;height: 46rpx;display: block;margin: 22rpx auto;
+			background-image: url("@/static/images/study/cjdc/wordView/del-btn.svg");@include ezy-no-repeat-cover;}
+			.bei-confirm-btn{
+				width: 610rpx;height: 77rpx;background-color: transparent;margin: 16rpx auto 0;
+				background-image: url("@/static/images/study/cjdc/wordView/confirm-btn.png");@include ezy-no-repeat-cover;
+			}
 		}
 	}
-	
 }
 
 // 选择版本

pages/newEnglish/components/beiPage.vue

@@ -5,7 +5,8 @@
 		<!-- 显示区 -->
 		<selectTypesVue activeSelect="5"></selectTypesVue>
 		<!-- 输入区 -->
-		<view  class="words-answer-box">{{data.answer}}</view>
+		<!-- <view  class="words-answer-box">{{data.answer}}</view> -->
+		<input class="words-answer-box" placeholder="请输入答案" v-model.trim="data.answer" readonly/>
 		<!-- 清空和提示互斥 需要分成多行 大哥看这里 -->
 		<!-- 清空按钮 -->
 		<view class="clean-btn" @click="handleReset('all')"></view>