选-样式开发

common/styles/global/pages.scss

@@ -1997,6 +1997,51 @@
 	}
 }
 
+// 单词详情-选
+.words-xuan-box{
+	display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
+	height: calc(100vh - 290rpx - var(--status-bar-height));
+	.xuan-body-box{flex: 1;overflow-y: auto;text-align: center;}
+	.show-words-box{
+		width: 100%;overflow: hidden;
+		color: #015fb0;font-weight: bold;font-size: 76rpx;text-align: center;margin: 64rpx auto 0;
+		text-shadow:-1rpx -1rpx 0 #fff,1rpx -1rpx 0 #fff,-1rpx 1rpx 0 #fff,1rpx 1rpx 0 #fff;
+	}
+	.yb-play-box{
+		background-color: rgba(255, 255, 255, 0.6);display: inline-block;margin: 32rpx auto 0;
+		padding: 4rpx 24rpx 10rpx;border-radius: 30rpx;
+		text{font-size: 28rpx;display: inline-block;vertical-align: middle;margin-right: 24rpx;}
+		icon{width: 30rpx;height:30rpx;@include ezy-no-repeat-cover;display: inline-block;vertical-align: middle;}
+		.yb-play-btn{background-image: url("@/static/images/study/cjdc/wordView/yb-play-btn.png");}
+		.yb-playing-btn{background-image: url("@/static/images/study/cjdc/wordView/yb-playing-btn.gif");}
+		
+	}
+	.select-change-box{
+		flex-shrink: 0;
+		.select-item{
+			width: 600rpx;height: 96rpx;text-align: center;border-radius: 12rpx;font-size: 28rpx;
+			background-color: #fff;border-bottom: 6rpx solid #ddf3fb;line-height: 1.4;color: #333;
+			display: flex;align-items: center;justify-content: center;margin: 12rpx auto;
+			box-sizing: border-box;padding: 0 10rpx;text-align: left;position: relative;
+			text{@include multi-line-ellipsis(2);}
+		}
+		.select-item.active{
+			background-color: #6bcdff;border-bottom: 6rpx solid #a7e9fd;color: #fff;
+		}
+		.select-error::after,.select-right::after{
+			content: '';width: 36rpx;height: 36rpx;display: block;@include ezy-no-repeat-cover;
+			position: absolute;top: -10rpx;right: -12rpx;
+		}
+		.select-error::after{background-image: url("@/static/images/study/cjdc/wordView/word-error-icon.png");}
+		.select-right::after{background-image: url("@/static/images/study/cjdc/wordView/word-right-icon.png");}
+	}
+	@media (max-height: 600px) {
+		.show-words-box{margin: 12rpx auto 0;}
+		.yb-play-box{margin: 12rpx auto 0;}
+	}
+	
+}
+
 // 单词详情-背 
 .words-bei-box{
 	display: flex;flex-direction: column;text-align: center;

pages/newEnglish/components/selectPage.vue

@@ -1,27 +1,33 @@
 <template>
-	<view>
+	<!-- 单词最多16个字母 选项最多两行 tx---不要删除 -->
+	<view class="words-xuan-box">
 		<!-- 单词区 -->
-		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
+		<!-- <selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue> -->
 		<!-- 显示区 -->
 		<selectTypesVue activeSelect="4"></selectTypesVue>
-		<!-- 拼读区 -->
-		<view>
-			{{data.name}}
-		</view>
-		<!--  音标区  -->
-		<view>
-			{{activeWord.yinbiao}}
+		<view class="xuan-body-box">
+			<!-- 单词区 -->
+			<view class="show-words-box"> {{data.name}} </view>
+			<!--  音标区  -->
+			<view class="yb-play-box">
+				<text>{{activeWord.yinbiao}}</text>
+				<!-- active -->
+				<!-- 播放未播放互斥控制 大哥看这里-->
+				<icon class="yb-play-btn"></icon>
+				<icon class="yb-playing-btn" v-if="false"></icon>
+			</view>
 		</view>
 		<!-- 图片区 -->
-		<view>
+		<!-- <view>
 			{{ data.result ?'正确':'错误' }}
-		</view>
+		</view> -->
 		<!-- 选择区 -->
-		<view>
-			<view :class="{active: data.answer == 'A'}" @click="handleSelect('A')">{{data.opa}}</view>
-			<view :class="{active: data.answer == 'B'}" @click="handleSelect('B')">{{data.opb}}</view>
-			<view :class="{active: data.answer == 'C'}" @click="handleSelect('C')">{{data.opc}}</view>
-			<view :class="{active: data.answer == 'D'}" @click="handleSelect('D')">{{data.opd}}</view>
+		<!-- 选中选项正确class select-right 选中选项错误 class select-error  大哥看这里-->
+		<view class="select-change-box">
+			<view class="select-item" :class="{active: data.answer == 'A'}" @click="handleSelect('A')"><text>{{data.opa}}</text></view>
+			<view class="select-item" :class="{active: data.answer == 'B'}" @click="handleSelect('B')"><text>{{data.opb}}</text></view>
+			<view class="select-item" :class="{active: data.answer == 'C'}" @click="handleSelect('C')"><text>{{data.opc}}</text></view>
+			<view class="select-item" :class="{active: data.answer == 'D'}" @click="handleSelect('D')"><text>{{data.opd}}</text></view>
 		</view>
 	</view>
 </template>
@@ -99,9 +105,3 @@
 		})
 	}
 </script>
-
-<style lang="scss" scoped>
-	.active {
-		color: red;
-	}
-</style>