样式修改

common/styles/global/pages.scss

@@ -1994,21 +1994,24 @@
 	}
 	/***** 背 *****/
 	.words-bei-box{
-		text-align: center;
+		display: flex;flex-direction: column;text-align: center;
+		height: calc(100vh - 290rpx - var(--status-bar-height));
 		// 答案
 		.words-answer-box{
-			min-width: 420rpx;max-width: 90%;height: 120rpx;line-height: 120rpx;margin-top: 64rpx;
+			min-width: 420rpx;max-width: 90%;height: 120rpx;line-height: 120rpx;margin: 64rpx auto 0;
 			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; }
+		
+		.bei-body-box{flex: 1;overflow-y: auto;}
 			
 		// 键盘
 		.words-keyboard-box{
 			background-color: #e5e8ee;box-sizing: border-box;padding: 24rpx 0;
-			position: absolute;bottom: -10rpx;left: -10rpx;right: -10rpx;
+			// 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{
@@ -2024,6 +2027,27 @@
 				background-image: url("@/static/images/study/cjdc/wordView/confirm-btn.png");@include ezy-no-repeat-cover;
 			}
 		}
+		@media (max-height: 800px) {
+			.words-answer-box{margin-top: 32rpx;}
+			.pin-words-explain-box{margin-top: 32rpx;}
+			.audio-play-btn{margin: 32rpx auto 0;}
+		}
+		@media (max-height: 750px) {
+			.words-answer-box{
+				max-width: 86%;height: 100rpx;line-height: 100rpx;font-size: 66rpx;
+				.uni-input-placeholder.input-placeholder{font-size: 56rpx;}
+			}
+			.words-answer-box{margin-top: 16rpx;}
+			.pin-words-explain-box{margin-top: 16rpx;}
+			.audio-play-btn{width: 80rpx;height:80rpx;margin: 16rpx auto 0;}
+			.clean-btn{margin-top: 16rpx;}
+		}
+		@media (max-height: 700px) {
+			.words-answer-box{margin-top: 12rpx;}
+			.pin-words-explain-box{margin-top: 12rpx;}
+			.audio-play-btn{margin: 12rpx auto 0;}
+			.clean-btn{margin-top: 12rpx;}
+		}
 	}
 }
 

pages/newEnglish/components/beiPage.vue

@@ -10,19 +10,20 @@
 		<!-- 清空和提示互斥 需要分成多行 大哥看这里 -->
 		<!-- 清空按钮 -->
 		<view class="clean-btn" @click="handleReset('all')"></view>
-		<!-- 提示 -->
-		<view class="pin-tip">提示：请点击页面下方键盘，输入正确字母。</view>
-		
-		<!-- 解释区 需要分成多行 大哥看这里-->
-		<view class="pin-words-explain-box">
-			<view class="words-explain-item">{{activeWord.jianyi.join(';')}}</view>
+		<view class="bei-body-box">
+			<!-- 提示 -->
+			<!-- <view class="pin-tip">提示：请点击页面下方键盘，输入正确字母。</view> -->
+			
+			<!-- 解释区 需要分成多行 大哥看这里-->
+			<view class="pin-words-explain-box">
+				<view class="words-explain-item">{{activeWord.jianyi.join(';')}}</view>
+			</view>
+			<!-- 播放和待播放需要写个切换 大哥看这里 -->
+			<!-- 待播放 -->
+			<view class="audio-play-btn"></view>
+			<!-- 播放中 -->
+			<view class="audio-playing-btn" v-if="false"></view>
 		</view>
-		<!-- 播放和待播放需要写个切换 大哥看这里 -->
-		<!-- 待播放 -->
-		<view class="audio-play-btn"></view>
-		<!-- 播放中 -->
-		<view class="audio-playing-btn" v-if="false"></view>
-		
 		<!-- 浮层输入区 -->
 		<view class="words-keyboard-box">
 			<view class="keyboard-row">