样式修改

pages/newEnglish/components/pinPage.vue

@@ -1,32 +1,38 @@
 <template>
-	<div>
+	<view class="words-pin-box">
 		<!-- 单词区 -->
-		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
+		<!-- <selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue> -->
 		<!-- 显示区 -->
 		<selectTypesVue activeSelect="2"></selectTypesVue>
-		<!-- 拼读区 -->
-		<view>
-			<view v-for="item in data.selectList" :class="{isAll: data.isAll, right:  data.isAll && data.result, wrong:  data.isAll && !data.result}">
-				<view>内容：{{item}}</view>
-			</view>
+		<!-- 拼读区 单词字母多余6个需要追加 class：pin-small-words-box 大哥看这里-->
+		<view class="pin-words-box" :class="{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>
-			{{activeWord.jianyi.join(';')}}
+		<view class="pin-body-box">
+			<!-- 清空按钮和提示需要写个切换 大哥看这里 -->
+			<!-- 清空按钮 -->
+			<view class="clean-btn"></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>
 		<!-- 图片区 -->
-		<view @click="handleReset">
+		<!-- <view @click="handleReset">
 			{{data.result ? '正确': '错误'}}
+		</view> -->
+		<!-- 选择区 单词字母多余6个需要追加 class：pin-small-words-box 大哥看这里-->
+		<view class="pin-words-box pin-words-change-box">
+			<view class="words-item words-change-item" v-for="item in data.randomList" :class="{disabled:  isSelect(item)}" @click="handleSelect(item)">{{item}}</view>
 		</view>
-		<!-- 选择区 -->
-		<view>
-			<view v-for="item in data.randomList" :class="{active:  isSelect(item)}" @click="handleSelect(item)">
-				<view>内容：{{item}}</view>
-			</view>
-		</view>
-	</div>
+	</view>
 </template>
 
 <script setup>

pages/newEnglish/components/selectTypes.vue

@@ -1,14 +1,14 @@
 <template>
-	<view class="select-types">
-		<view :class="{active: activeSelect == 1}">学</view>
-		<view :class="{active: activeSelect == 2}">></view>
-		<view :class="{active: activeSelect == 2}">拼</view>
-		<view :class="{active: activeSelect == 3}">></view>
-		<view :class="{active: activeSelect == 3}">读</view>
-		<view :class="{active: activeSelect == 4}">></view>
-		<view :class="{active: activeSelect == 4}">选</view>
-		<view :class="{active: activeSelect == 5}">></view>
-		<view :class="{active: activeSelect == 5}">背</view>
+	<view class="select-types-box">
+		<view class="types-item" :class="{active: activeSelect == 1}">学</view>
+		<icon class="jt-item" :class="{active: activeSelect == 1}"></icon>
+		<view class="types-item" :class="{active: activeSelect == 2}">拼</view>
+		<icon class="jt-item" :class="{active: activeSelect == 2}"></icon>
+		<view class="types-item" :class="{active: activeSelect == 3}">读</view>
+		<icon class="jt-item" :class="{active: activeSelect == 3}"></icon>
+		<view class="types-item" :class="{active: activeSelect == 4}">选</view>
+		<icon class="jt-item" :class="{active: activeSelect == 4}"></icon>
+		<view class="types-item" :class="{active: activeSelect == 5}">背</view>
 	</view>
 </template>
 

pages/newEnglish/components/selectWords.vue

@@ -1,6 +1,6 @@
 <template>
-	<view class="select-words">
-		<span v-for="item in activeWords" :class="{active: activeWord.id == item.id}">{{item.name}}</span>
+	<view class="select-words-box">
+		<view class="words-item" v-for="item in activeWords" :class="{active: activeWord.id == item.id}">{{item.name}}</view>
 	</view>
 </template>
 
@@ -14,13 +14,3 @@
 		},
 	})
 </script>
-
-<style lang="scss" scoped>
-	.select-words {
-		display: flex;
-		justify-content: space-between;
-	}
-	.active {
-		color: red;
-	}
-</style>