common/styles/global/pages.scss

@@ -1938,6 +1938,21 @@
 			display: inline-block;vertical-align: middle;border-radius: 10rpx;
 		}
 	}
+	
+	// 单词详情块
+	/* .details-title{background-color: #3a7fe9;padding: 8rpx 12rpx;border-radius: 10rpx;
+	font-size: 24rpx;color: #fff;display: inline-block;}
+	.details-content-box{
+		background-color: #fffefe;border-radius: 10rpx;margin: 0 20rpx;line-height: 1.4;margin-bottom: 16rpx;
+		box-sizing: border-box;padding: 12rpx 10rpx;font-size: 26rpx;
+	}
+	.syky-content{margin: 16rpx 0 36rpx;border-bottom: 1rpx dashed #8dcff1;}
+	.syky-content:last-child{margin: 16rpx 0;border-bottom:0;}
+	.details-en-content{
+		color: #000;margin:16rpx 12rpx;
+	}
+	.word-color{color: #3a7fe9;}
+	.details-cn-content{color: #666;margin: 16rpx 12rpx 24rpx;} */
 }
 .word-view-page::before,.word-view-page::after{content: '';width: 29rpx;height: 42rpx;
 	background-image: url("@/static/images/study/jt-left-icon.png");@include ezy-no-repeat-cover;display: block;
@@ -1945,8 +1960,65 @@
 .word-view-page::before{left: 60rpx;}
 .word-view-page::after{right: 60rpx;transform: rotate(180deg);}
 	
-// 单词详情- 拼
-.words-xue-box{}
+// 单词详情- 学
+.words-xue-box{
+	text-align: center;
+	.words-xue-body{height: calc(100vh - 410rpx - var(--status-bar-height));overflow-y: auto;}
+	.details-btn{
+		background-color: rgba(255, 255, 255, 0.6);display: inline-block;margin: 32rpx auto 0;
+		padding: 4rpx 24rpx 10rpx;border-radius: 30rpx;color: #068aea;
+	}
+	.word-block-box{
+		text{min-width: 50rpx;height: 50rpx;line-height: 48rpx;font-size: 24rpx;
+		padding: 0 10rpx;box-sizing: border-box;border-radius: 8rpx;
+			background-color: #9cd4ef;color: #06399c;display: inline-block;}
+		text + text{margin-left: 10rpx;}
+	}
+	.yb-block-box text{border: 1rpx solid #fff;font-size: 26rpx;}
+	.yj-block-box{
+		min-width: 50rpx;font-size: 26rpx;
+		.yj-block-item{
+			    display: inline-block;border: 1rpx solid #fff;color: #06399c;border-radius: 8rpx;overflow: hidden;
+		}
+		.yj-block-item +.yj-block-item{margin-left: 10rpx;}
+		.item-top,.item-bottom{height: 52rpx;line-height: 50rpx;padding: 0 10rpx;box-sizing: border-box;}
+		.item-top{background-color: #e7f2f9;}
+		.item-bottom{background-color: #9cd4ef;}
+	}
+	
+	/* .cg-item-list{
+		padding: 24rpx 0;
+		.uni-scroll-view-content{display: flex;align-items: center;box-sizing: border-box;padding:0 24rpx; }
+		.cg-item-box{
+			display: flex;flex-direction: row;align-items: center;flex-shrink: 0;color: #000;
+			font-size: 32rpx;
+		}
+		.cg-item{border:1rpx solid #9cbff4;background-color: #fff;border-radius: 8rpx;padding: 16rpx;}
+		.cg-symbol{margin: 0 10rpx;}
+	}
+	
+	
+	.xue-change-btn-box{
+		display: flex;justify-content: center;border-bottom: 1rpx dashed #8dcff1;margin: 0 20rpx;padding: 20rpx 0;
+		.change-btn{
+			width: 254rpx;height:77rpx;position: relative;
+			text{color: #fff;position: relative;font-size: 32rpx;z-index: 2;display: inline-block;margin-top:15rpx;}
+		}
+		.change-btn::after{
+			content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;@include ezy-no-repeat-cover;
+			background-image: url("@/static/images/study/cjdc/wordView/change-btn.png");z-index: 1;
+		}
+		.change-btn.active text{color: #0f67be;}
+		.change-btn.active::after{background-image: url("@/static/images/study/cjdc/wordView/change-btn-a.png");transform: rotate(180deg);}
+		.change-btn:last-child::after{transform: rotate(180deg);}
+		.change-btn.active:last-child::after{transform: unset;}
+	}
+	
+	.xue-details-content-box,.xue-details-content-box{
+		text-align: left;margin-top: 20rpx;
+	} */
+}
+
 // 单词详情-拼
 .words-pin-box{
 	display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
@@ -2116,20 +2188,7 @@
 	background-image: url("@/static/images/course/course-cjdc-bj.png");
 	.words-details-body{overflow-y: auto;}
 	.details-word{color: #000;font-size: 62rpx;font-weight: bold;margin: 24rpx;}
-	.details-title{background-color: #3a7fe9;padding: 8rpx 12rpx;border-radius: 10rpx;
-	font-size: 24rpx;color: #fff;display: inline-block;}
-	.details-content-box{
-		background-color: #fff;border-radius: 10rpx;margin: 0 20rpx;line-height: 1.4;margin-bottom: 16rpx;
-		box-sizing: border-box;padding: 12rpx 10rpx;font-size: 26rpx;
-	}
 	.tysy-content{color: #333;margin: 16rpx 12rpx 0;}
-	.syky-content{margin: 16rpx 0 36rpx;border-bottom: 1rpx dashed #8dcff1;}
-	.syky-content:last-child{margin: 16rpx 0;border-bottom:0;}
-	.details-en-content{
-		color: #000;margin:16rpx 12rpx;
-	}
-	.word-color{color: #3a7fe9;}
-	.details-cn-content{color: #666;margin: 16rpx 12rpx 24rpx;}
 }
 
 // 选择版本

pages/newEnglish/components/audioFour.vue

@@ -1,7 +1,7 @@
 <template>
-	<view @click="handlePlay">
-		<view>{{YItem.cigen}}</view>
-		<view>{{YItem.yinbiao}}</view>
+	<view @click="handlePlay" class="yj-block-item">
+		<view class="item-top">{{YItem.cigen}}</view>
+		<view class="item-bottom">{{YItem.yinbiao}}</view>
 	</view>
 </template>
 

pages/newEnglish/components/audioThree.vue

@@ -1,7 +1,7 @@
 <template>
-	<view @click="handlePlay">
+	<text @click="handlePlay">
 		{{YItem.cigen}}
-	</view>
+	</text>
 </template>
 
 <script setup>

pages/newEnglish/components/xuePage.vue

@@ -1,59 +1,67 @@
 <template>
-	<view>
+	<view class="words-xue-box">
 		<selectTypesVue activeSelect="1"></selectTypesVue>
-		<!-- 单词区 -->
-		<view>
-			<view v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</view>
-		</view>
-		<!-- 纯显示 -->
-		<view>
-			<view v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</view>
-		</view>
-		<!-- 音标区 -->
-		<view>
-			<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
-			<!-- 音频播放 -->
-			<audioTwoVue :active-word="activeWord" @play-audio="handlePlay"></audioTwoVue>
-		</view>
-		<!-- 注释区 -->
-		<view>
-			<view v-for="item in activeWord.xiangyi" :key="item">{{item}}</view>
-		</view>
-		<!-- 详解触发 -->
-		<view @click="goXiangjie">
-			详解>
-		</view>
-		<!-- 音标拆分区 -->
-		<view v-if="data.isPindu">
-			<!-- pindu -->
-			<audioThreeVue v-for="(item,index) in activeWord.pindu" :key="index" :YItem="item" @play-audio="handlePlay"></audioThreeVue>
-		</view>
-		<view v-else>
-			<!-- yinjie -->
-			<audioFourVue v-for="(item,index) in activeWord.yinjie" :key="index" :YItem="item" @play-audio="handlePlay"></audioFourVue>
-		</view>
+		<view class="words-xue-body">
+			<!-- 单词区 -->
+			<view class="word-circle-box">
+				<text v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</text>
+			</view>
+			<view class="word-block-box">
+				<text v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</text>
+			</view>
+			<!-- 音标区 -->
+			<view class="yb-play-box">
+				<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
+				<!-- 音频播放 -->
+				<audioTwoVue :active-word="activeWord" @play-audio="handlePlay"></audioTwoVue>
+			</view>
+			<!-- 注释区 -->
+			<view class="pin-words-explain-box">
+				<view class="words-explain-item" v-for="item in activeWord.xiangyi" :key="item">{{item}}</view>
+			</view>
+			<!-- 详解触发 -->
+			<view @click="goXiangjie" class="details-btn">详解 ></view>
+			<!-- 音标拆分区 -->
+			<view v-if="data.isPindu" class="word-block-box yb-block-box">
+				<!-- pindu -->
+				<audioThreeVue v-for="(item,index) in activeWord.pindu" :key="index" :YItem="item" @play-audio="handlePlay"></audioThreeVue>
+			</view>
+			<view v-else class="yj-block-box">
+				<!-- yinjie -->
+				<audioFourVue v-for="(item,index) in activeWord.yinjie" :key="index" :YItem="item" @play-audio="handlePlay"></audioFourVue>
+			</view>
 
-		<!-- 音标按钮 -->
-		<view>
-			<view :class="{active: data.isPindu}" @click="handlePindu">自然拼读</view>
-			<view :class="{active: !data.isPindu}" @click="handleYinjie">音节拆分</view>
-		</view>
-		<!-- 词根+实用口语 -->
-		<view v-if="activeWord.cigenzhuji.length">
-			<view v-for="(item,index) in activeWord.cigenzhuji" :key="index"> 
-				<view>
-					<view>{{item.en}}</view>
-					<view>{{item.zn}}</view>
-				</view>
-				<view v-if="index<activeWord.cigenzhuji.length-2">+</view>
-				<view v-if="index == activeWord.cigenzhuji.length - 2">=</view>
+			<!-- 音标按钮 -->
+			<view class="xue-change-btn-box">
+				<view class="change-btn" :class="{active: data.isPindu}" @click="handlePindu"><text>自然拼读</text></view>
+				<view class="change-btn" :class="{active: !data.isPindu}" @click="handleYinjie"><text>音节拆分</text></view>
 			</view>
-		</view>
-		<!-- 实用语句 -->
-		<view>
-			<view v-for="(item,index) in activeWord.kouyu" :key="index">
-				<view>{{item.en}}</view>
-				<view>{{item.zn}}</view>
+			<!-- 词根+实用口语 -->
+			<view v-if="activeWord.cigenzhuji.length" class="details-content-box xue-details-content-box">
+				<text class="details-title">词根助记</text>
+				<scroll-view class="cg-item-list" scroll-x @touchmove.stop >
+					<view class="cg-item-box" v-for="(item,index) in activeWord.cigenzhuji" :key="index" >
+						<view class="cg-item">
+							<view>{{item.en}}</view>
+							<view>{{item.zn}}</view>
+						</view>
+						<view class="cg-symbol" v-if="index<activeWord.cigenzhuji.length-2">+</view>
+						<view class="cg-symbol" v-if="index == activeWord.cigenzhuji.length - 2">=</view>
+					</view>
+				</scroll-view>
+			</view>
+			<!-- 实用语句 -->
+			<view class="details-content-box xue-details-content-box">
+				<text class="details-title">实用口语</text>
+				<view v-for="(item,index) in activeWord.kouyu" :key="index" class="syky-content">
+					<view class="details-en-content">
+						<view>{{item.en}}</view>
+						<!-- 变色  word-color-->
+						<!-- <text class="word-color">{{item.en}}</text>
+						<text>{{item.en}}</text> -->
+					</view>
+					<view class="details-cn-content">{{item.zn}}</view>
+				</view>
 			</view>
 		</view>
 	</view>