样式修改

pages/newEnglish/components/beiPage.vue

@@ -1,60 +1,64 @@
 <!-- 单词区 && 音标区：最多15位，超过隐藏-->
 <!-- 单音节最长：swimming 多音节最长：transportation -->
 <template>
-	<view class="words-bei-box">
-		<!-- 显示区 -->
-		<selectTypesVue activeSelect="5"></selectTypesVue>
-		<!-- 输入区 -->
-		<input class="words-answer-box" placeholder="请输入答案" v-model.trim="data.answer" readonly :class="{'words-answer-right-box': data.result&&data.result!=null, 'words-answer-error-box': !data.result&&data.result!=null}" />
-		<!-- 清空按钮 -->
-		<view class="clean-btn" @click="handleReset('all')" v-if="data.answer.length"></view>
-		<view class="bei-body-box">
-			<!-- 解释区 -->
-			<view class="pin-words-explain-box">
-				<view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
+<view class="ezy-tab-border">
+	<!-- 显示区 -->
+	<selectTypesVue activeSelect="5"></selectTypesVue>
+	<view class="ezy-border-body">
+		<view class="words-bei-box">
+			<!-- 输入区 -->
+			<input class="words-answer-box" placeholder="请输入答案" v-model.trim="data.answer" readonly :class="{'words-answer-right-box': data.result&&data.result!=null, 'words-answer-error-box': !data.result&&data.result!=null}" />
+			<!-- 清空按钮 -->
+			<view class="clean-btn" @click="handleReset('all')" v-if="data.answer.length"></view>
+			<view class="bei-body-box">
+				<!-- 解释区 -->
+				<view class="pin-words-explain-box">
+					<view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
+				</view>
+				<!-- 播放和待播 -->
+				<audioOneVue :active-word="activeWord" @play-audio="handlePlay"></audioOneVue>
 			</view>
-			<!-- 播放和待播 -->
-			<audioOneVue :active-word="activeWord" @play-audio="handlePlay"></audioOneVue>
-		</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>
-				<btnTxtVue @text-select="handleSelect('d')">d</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('e')">e</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('f')">f</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('g')">g</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('h')">h</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('i')">i</btnTxtVue>
+			<!-- 浮层输入区 -->
+			<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>
+					<btnTxtVue @text-select="handleSelect('d')">d</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('e')">e</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('f')">f</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('g')">g</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('h')">h</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('i')">i</btnTxtVue>
 
+				</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>
+					<btnTxtVue @text-select="handleSelect('m')">m</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('n')">n</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('o')">o</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('p')">p</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('q')">q</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('r')">r</btnTxtVue>
+				</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>
+					<btnTxtVue @text-select="handleSelect('v')">v</btnTxtVue>
+					<btnTxtVue @text-select="handleSelect('w')">w</btnTxtVue>
+					<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" class="del-btn"></btnTxtVue>
+				</view>
+				<view class="bei-confirm-btn" @click="checkIsRight"></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>
-				<btnTxtVue @text-select="handleSelect('m')">m</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('n')">n</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('o')">o</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('p')">p</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('q')">q</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('r')">r</btnTxtVue>
-			</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>
-				<btnTxtVue @text-select="handleSelect('v')">v</btnTxtVue>
-				<btnTxtVue @text-select="handleSelect('w')">w</btnTxtVue>
-				<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" class="del-btn"></btnTxtVue>
-			</view>
-			<view class="bei-confirm-btn" @click="checkIsRight"></view>
 		</view>
 	</view>
+</view>	
 </template>
 
 <script setup>

pages/newEnglish/components/pinPage.vue

@@ -1,32 +1,37 @@
 <!-- 单词区 && 音标区：最多14位，超过换行-->
 <!-- 单音节最长：swimming 多音节最长：transportation -->
 <template>
-	<view class="words-pin-box">
-		<!-- 显示区 -->
-		<selectTypesVue activeSelect="2"></selectTypesVue>
-		<!-- 拼读区 -->
-		<!-- 单词字母多余6个需要追加 class：pin-small-words-box  -->
-		<view class="pin-words-box"
-			:class="{'pin-small-words-box': wordLength > 6, 'isAll': data.isAll, 'pin-right-words-box':  data.isAll && data.result, 'pin-error-words-box':  data.isAll && !data.result}">
-			<view class="words-item" v-for="item in data.selectList">{{item}}</view>
-		</view>
-		<view class="pin-body-box">
-			<!-- 清空按钮 -->
-			<view class="clean-btn" v-if="isAlreadyAnswer" @click="handleReset"></view>
-			<!-- 提示 -->
-			<view class="pin-tip" v-else>提示：请点击页面下方字母，选择正确答案。</view>
-			<!-- 解释区-->
-			<view class="pin-words-explain-box">
-				<view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
+<view class="ezy-tab-border">
+	<!-- 显示区 -->
+	<selectTypesVue activeSelect="2"></selectTypesVue>
+	<view class="ezy-border-body">
+		<view class="words-pin-box">
+			
+			<!-- 拼读区 -->
+			<!-- 单词字母多余6个需要追加 class：pin-small-words-box  -->
+			<view class="pin-words-box"
+				:class="{'pin-small-words-box': wordLength > 6, 'isAll': data.isAll, 'pin-right-words-box':  data.isAll && data.result, 'pin-error-words-box':  data.isAll && !data.result}">
+				<view class="words-item" v-for="item in data.selectList">{{item}}</view>
+			</view>
+			<view class="pin-body-box">
+				<!-- 清空按钮 -->
+				<view class="clean-btn" v-if="isAlreadyAnswer" @click="handleReset"></view>
+				<!-- 提示 -->
+				<view class="pin-tip" v-else>提示：请点击页面下方字母，选择正确答案。</view>
+				<!-- 解释区-->
+				<view class="pin-words-explain-box">
+					<view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
+				</view>
+				<audioOneVue @play-audio="handlePlay" :activeWord="activeWord"></audioOneVue>
+			</view>
+			<!-- 选择区 -->
+			<view class="pin-words-box pin-words-change-box" :class="{'pin-small-words-box': wordLength>6}">
+				<view class="words-item words-change-item" v-for="(item,index) in data.randomList" :key="index"
+					:class="{disabled:  isSelect(item,index)}" @click="handleSelect(item,index)">{{item}}</view>
 			</view>
-			<audioOneVue @play-audio="handlePlay" :activeWord="activeWord"></audioOneVue>
-		</view>
-		<!-- 选择区 -->
-		<view class="pin-words-box pin-words-change-box" :class="{'pin-small-words-box': wordLength>6}">
-			<view class="words-item words-change-item" v-for="(item,index) in data.randomList" :key="index"
-				:class="{disabled:  isSelect(item,index)}" @click="handleSelect(item,index)">{{item}}</view>
 		</view>
 	</view>
+</view>
 </template>
 
 <script setup>

pages/newEnglish/components/readContent.vue

@@ -1,9 +1,12 @@
 <!-- 单词区 && 音标区：最多16位，超过换行 -->
 <!-- 单音节最长：swimming 多音节最长：transportation -->
 <template>
-	<view class="words-du-box">
+	<view class="ezy-tab-border">
 		<selectTypesVue activeSelect="3"></selectTypesVue>
-		<view class="du-body-box">
+		<view class="ezy-border-body">
+			<view class="words-du-box">
+		
+			<view class="du-body-box">
 			<!-- 单词区 -->
 			<view class="word-circle-box">{{data.name}}</view>
 			<!-- 音标区 -->
@@ -41,8 +44,9 @@
 				<view v-if="isRecording" class="disabled-mask">录音中不可播放</view>
 			</button> -->
 		</view>
-
+	  </view>
 	</view>
+</view>
 </template>
 
 <script setup>

pages/newEnglish/components/selectPage.vue

@@ -1,36 +1,41 @@
 <!-- 单词区 && 音标区：最多16位，超过换行   选项最多两行超出省略-->
 <!-- 单音节最长：swimming 多音节最长：transportation -->
 <template>
-	<view class="words-xuan-box">
-		<!-- 显示区 -->
-		<selectTypesVue activeSelect="4"></selectTypesVue>
-		<view class="xuan-body-box">
-			<!-- 单词区 -->
-			<view class="show-words-box"> {{data.name}} </view>
-			<!--  音标区  -->
-			<view class="yb-play-box">
-				<!-- <text>{{activeWord.yinbiao}}</text> -->
-				<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
-				<!-- active -->
-				<audioTwoVue @play-audio="handlePlay" :active-word="activeWord"></audioTwoVue>
+<view class="ezy-tab-border">
+	<!-- 显示区 -->
+	<selectTypesVue activeSelect="4"></selectTypesVue>
+	<view class="ezy-border-body">
+		<view class="words-xuan-box">
+			
+			<view class="xuan-body-box">
+				<!-- 单词区 -->
+				<view class="show-words-box"> {{data.name}} </view>
+				<!--  音标区  -->
+				<view class="yb-play-box">
+					<!-- <text>{{activeWord.yinbiao}}</text> -->
+					<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
+					<!-- active -->
+					<audioTwoVue @play-audio="handlePlay" :active-word="activeWord"></audioTwoVue>
+				</view>
+			</view>
+			<!-- 选择区 -->
+			<view class="select-change-box">
+				<view class="select-item"
+					:class="{active: data.answer == 'A', 'select-error': data.answer =='A' && !data.result, 'select-right':data.answer =='A' && data.result}"
+					@click="handleSelect('A')"><text>{{data.opa}}</text></view>
+				<view class="select-item"
+					:class="{active: data.answer == 'B', 'select-error':  data.answer =='B' && !data.result, 'select-right':data.answer =='B' && data.result}"
+					@click="handleSelect('B')"><text>{{data.opb}}</text></view>
+				<view class="select-item"
+					:class="{active: data.answer == 'C', 'select-error':  data.answer =='C' && !data.result, 'select-right':data.answer =='C' && data.result}"
+					@click="handleSelect('C')"><text>{{data.opc}}</text></view>
+				<view class="select-item"
+					:class="{active: data.answer == 'D', 'select-error':  data.answer =='D' && !data.result, 'select-right':data.answer =='D' && data.result}"
+					@click="handleSelect('D')"><text>{{data.opd}}</text></view>
 			</view>
-		</view>
-		<!-- 选择区 -->
-		<view class="select-change-box">
-			<view class="select-item"
-				:class="{active: data.answer == 'A', 'select-error': data.answer =='A' && !data.result, 'select-right':data.answer =='A' && data.result}"
-				@click="handleSelect('A')"><text>{{data.opa}}</text></view>
-			<view class="select-item"
-				:class="{active: data.answer == 'B', 'select-error':  data.answer =='B' && !data.result, 'select-right':data.answer =='B' && data.result}"
-				@click="handleSelect('B')"><text>{{data.opb}}</text></view>
-			<view class="select-item"
-				:class="{active: data.answer == 'C', 'select-error':  data.answer =='C' && !data.result, 'select-right':data.answer =='C' && data.result}"
-				@click="handleSelect('C')"><text>{{data.opc}}</text></view>
-			<view class="select-item"
-				:class="{active: data.answer == 'D', 'select-error':  data.answer =='D' && !data.result, 'select-right':data.answer =='D' && data.result}"
-				@click="handleSelect('D')"><text>{{data.opd}}</text></view>
 		</view>
 	</view>
+</view>	
 </template>
 
 <script setup>

pages/newEnglish/components/xuePage.vue

@@ -1,8 +1,10 @@
 <!-- 单词区 && 音标区：最多14位，超过换行  词根助记区：宽度不限，可以滚动-->
 <!-- 单音节最长：swimming 多音节最长：transportation -->
 <template>
+<view class="ezy-tab-border">
+  <view class="ezy-border-body">
+	<selectTypesVue activeSelect="1"></selectTypesVue>
 	<view class="words-xue-box">
-		<selectTypesVue activeSelect="1"></selectTypesVue>
 		<view class="words-xue-body">
 			<!-- 单词区 -->
 			<view class="word-circle-box">
@@ -70,6 +72,8 @@
 
 		</view>
 	</view>
+  </view>
+</view>
 </template>
 
 <script setup>

pages/wordList/wordList.vue

@@ -1,4 +1,5 @@
 <template>
+	
 	<view class="word-list-page">
 		<view class="icon-title-navBar-box">
 			<view @click="goBack" class="nav-bar-icon"></view>