样式修改

pages/newEnglish/components/beiPage.vue

@@ -1,24 +1,30 @@
 <template>
-	<view>
+	<view class="words-bei-box">
 		<!-- 单词区 -->
-		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
+		<!-- <selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue> -->
 		<!-- 显示区 -->
 		<selectTypesVue activeSelect="5"></selectTypesVue>
 		<!-- 输入区 -->
-		<view>{{data.answer}}</view>
-		<!-- 解释区 -->
-		<view>
-			{{activeWord.jianyi.join(';')}}
-		</view>
-		<!-- 音标区 -->
-		<view></view>
-		<!-- 清理区 -->
-		<view @click="handleReset('all')">
-			reset
+		<view  class="words-answer-box">{{data.answer}}</view>
+		<!-- 清空和提示互斥 需要分成多行 大哥看这里 -->
+		<!-- 清空按钮 -->
+		<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>
+		<!-- 播放和待播放需要写个切换 大哥看这里 -->
+		<!-- 待播放 -->
+		<view class="audio-play-btn"></view>
+		<!-- 播放中 -->
+		<view class="audio-playing-btn" v-if="false"></view>
+		
 		<!-- 浮层输入区 -->
-		<view>
-			<view>
+		<view class="words-keyboard-box">
+			<view class="keyboard-row">
 				<btnTxtVue @text-select="handleSelect('a')">a</btnTxtVue>
 				<btnTxtVue @text-select="handleSelect('b')">b</btnTxtVue>
 				<btnTxtVue @text-select="handleSelect('c')">c</btnTxtVue>
@@ -30,7 +36,7 @@
 				<btnTxtVue @text-select="handleSelect('i')">i</btnTxtVue>
 	
 			</view>
-			<view>
+			<view class="keyboard-row">
 				<btnTxtVue @text-select="handleSelect('j')">j</btnTxtVue>
 				<btnTxtVue @text-select="handleSelect('k')">k</btnTxtVue>
 				<btnTxtVue @text-select="handleSelect('l')">l</btnTxtVue>
@@ -41,7 +47,7 @@
 				<btnTxtVue @text-select="handleSelect('q')">q</btnTxtVue>
 				<btnTxtVue @text-select="handleSelect('r')">r</btnTxtVue>
 			</view>
-			<view>
+			<view class="keyboard-row">
 				<btnTxtVue @text-select="handleSelect('s')">s</btnTxtVue>
 				<btnTxtVue @text-select="handleSelect('t')">t</btnTxtVue>
 				<btnTxtVue @text-select="handleSelect('u')">u</btnTxtVue>
@@ -50,11 +56,9 @@
 				<btnTxtVue @text-select="handleSelect('x')">x</btnTxtVue>
 				<btnTxtVue @text-select="handleSelect('y')">y</btnTxtVue>
 				<btnTxtVue @text-select="handleSelect('z')">z</btnTxtVue>
-				<btnTxtVue @text-select="handleReset">x</btnTxtVue>
+				<btnTxtVue @text-select="handleReset" class="del-btn"></btnTxtVue>
 			</view>
-			
-			
-			<view>确定</view>
+			<view class="bei-confirm-btn"></view>
 		</view>
 	</view>
 </template>

pages/newEnglish/components/btnTxt.vue

@@ -1,5 +1,5 @@
 <template>
-	<text class="my-button" 
+	<text class="keyboard-button" 
 		:class="{active: btnStatus}" 
 		@touchstart="handleTouchStart"
 		@touchend="handleTouchEnd">