common/styles/global/pages.scss

@@ -1992,13 +1992,15 @@
 	}
 	
 	.cg-item-list{
-		padding: 24rpx 0;
 		.uni-scroll-view-content{display: flex;box-sizing: border-box;padding:0 24rpx; }
-		.cg-item-box{display: flex;flex-direction: row;flex-shrink: 0;color: #000;font-size: 32rpx;}
+		.cg-item-box{display: flex;flex-direction: row;flex-shrink: 0;color: #000;font-size: 32rpx;padding: 24rpx 0;}
+		// max-width: 360rpx;
 		.cg-item{
-			min-height: 124rpx;max-width: 300rpx;
+			min-height: 124rpx;
 			display: flex;align-items: flex-start;flex-direction: column;justify-content: center;
-			border:1rpx solid #9cbff4;background-color: #fff;border-radius: 8rpx;padding: 16rpx;}
+			border:1rpx solid #9cbff4;background-color: #fff;border-radius: 8rpx;padding: 16rpx;
+			view + view{margin-top: 2rpx;}
+		}
 		.cg-symbol{margin: 0 10rpx;display: flex;align-items: center;}
 	}
 	
@@ -2078,6 +2080,34 @@
 	}
 }
 
+// 单词详情-读
+/* .words-du-box{
+	display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
+	height: calc(100vh - 290rpx - var(--status-bar-height));
+	.du-body-box{flex: 1;text-align: center;}
+	.du-yb-play-box{margin-top: 24rpx;}
+	.du-words-explain-box{margin-top: 24rpx;}
+	
+	.mike-play-box{
+		.mike-play-tip{font-size: 28rpx;color: #666;text-align: center;}
+		.du-btn-box{width: 100%;position: relative;}
+		.mike-btn::after,.mike-az-btn::after,.play-btn::after,.playing-btn::after{display: none;}
+		.mike-btn,.mike-az-btn{
+			width: 130rpx;height:130rpx;@include ezy-no-repeat-cover;margin-left: 24rpx;
+			background-color: transparent;border: 0;margin: 16rpx auto 32rpx;display: block;
+		}
+		.mike-btn{background-image: url("@/static/images/study/cjdc/wordView/miki-btn.png");}
+		.mike-az-btn{background-image: url("@/static/images/study/cjdc/wordView/miki-btn-a.gif");}
+		.play-btn,.playing-btn{
+			width: 96rpx;height:96rpx;@include ezy-no-repeat-cover;
+			background-color: transparent;border: 0;
+			position: absolute;left: 80rpx;bottom: 15rpx;
+		}
+		.play-btn{background-image: url("@/static/images/study/cjdc/wordView/play-btn.png");}
+		.playing-btn{background-image: url("@/static/images/study/cjdc/wordView/playing-btn.gif");}
+	}
+} */
+
 // 单词详情-选
 .words-xuan-box{
 	display: flex;flex-direction: column;padding: 10rpx;box-sizing: border-box;
@@ -2228,7 +2258,7 @@
 }
 	.select-version-line{width: 90%;height: 4rpx;border-top: 4rpx dashed #7cbeee;margin: 16rpx auto;}
 	.select-version-confirm-btn{
-		width: 644rpx;height: 108rpx;background-color: transparent;flex-shrink: 0;
+		width: 644rpx;height: 108rpx;background-color: transparent;flex-shrink: 0;margin-bottom: 16rpx;
 		background-image: url("@/static/images/grade/confirm-btn.png");@include ezy-no-repeat-cover;
 	}
 	.select-version-confirm-btn:after{display: none;}

pages/newEnglish/components/readContent.vue

@@ -1,41 +1,44 @@
 <template>
-	<view>
+	<view class="words-du-box">
 		<selectTypesVue activeSelect="3"></selectTypesVue>
-		<view class="words-xuan-box">
+		<view class="du-body-box">
 			<!-- 单词区 -->
-			<view class="show-words-box"> {{data.name}} </view>
-
-			<view style="text-align: center;">
-				<text v-if="data.jianyi&&data.jianyi.length>0" v-for="(item,index) in data.jianyi" :key="index">
-					{{item}}
-				</text>
-			</view>
-
-			<view class="yb-play-box xue-yb-play-box">
+			<view class="word-circle-box">{{data.name}}</view>
+			<!-- 音标区 -->
+			<view class="yb-play-box du-yb-play-box">
 				<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
 				<!-- 音频播放 -->
 				<audioTwoVue :active-word="activeWord" @play-audio="handlePlay"></audioTwoVue>
 			</view>
-			<view class="container">
-				<!-- 	<view class="status">{{ recordingStatus }}</view> -->
-				<!-- 	<view class="duration" v-if="isRecording">录音时长: {{ Math.floor(duration) }}秒</view> -->
-				<button class="record-btn" :class="{ recording: isRecording, disabled: isPlaying }"
+			<view class="pin-words-explain-box du-words-explain-box">
+				<view class="words-explain-item" v-if="data.jianyi&&data.jianyi.length>0" v-for="(item,index) in data.jianyi" :key="index">
+					{{item}}
+				</view>
+			</view>
+		</view>	
+		
+		<view class="mike-play-box">
+			<view class="mike-play-tip">长按  读一读</view>
+			<!-- 	<view class="status">{{ recordingStatus }}</view> -->
+			<!-- 	<view class="duration" v-if="isRecording">录音时长: {{ Math.floor(duration) }}秒</view> -->
+			<!-- v-if="voicePath" -->
+			<view class="du-btn-box">
+				<button class="play-btn" :class="{ 'playing-btn': isPlaying}" @click="playVoice" ></button>
+				<button class="mike-btn" :class="{ 'mike-az-btn': isRecording}"
 					@touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchcancel="handleTouchEnd"
 					:disabled="isPlaying">
-					{{ isRecording ? '松开结束' : '按住录音' }}
-					<!-- 	<view v-if="isPlaying" class="disabled-mask">播放中不可录音</view> -->
-				</button>
-
-				<button class="play-btn" @click="playVoice" v-if="voicePath">
-					播放小喇叭
+					<!--{{ isRecording ? '松开结束' : '按住录音' }}
+						<view v-if="isPlaying" class="disabled-mask">播放中不可录音</view> -->
 				</button>
-				<!-- 		<button class="play-btn" :class="{ disabled: isRecording || !voicePath }" @click="playVoice"
-					:disabled="isRecording || !voicePath">
-					{{ isPlaying ? '播放中...' : '播放录音' }}
-					<view v-if="isRecording" class="disabled-mask">录音中不可播放</view>
-				</button> -->
 			</view>
+			
+			<!-- 		<button class="play-btn" :class="{ disabled: isRecording || !voicePath }" @click="playVoice"
+				:disabled="isRecording || !voicePath">
+				{{ isPlaying ? '播放中...' : '播放录音' }}
+				<view v-if="isRecording" class="disabled-mask">录音中不可播放</view>
+			</button> -->
 		</view>
+		
 	</view>
 </template>