样式修改

common/styles/global/pages.scss

@@ -2720,16 +2720,25 @@
 		display: flex;justify-content: center;border-bottom: 1rpx dashed #8dcff1;padding: 32rpx 0 42rpx;
 		.change-btn{
 			width: 254rpx;height:77rpx;position: relative;line-height: 77rpx;font-size: 0;
-			text{color: #3d7efe;position: relative;font-size: 32rpx;z-index: 2;display: inline-block;}
+			text{color: #3d7efe;position: relative;font-size: 32rpx;z-index: 2;display: inline-block;vertical-align: middle;}
 		}
 		.change-btn::after{
 			content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;@include ezy-no-repeat-cover;
 			background-image: url("@/static/images/common/wordView/change-btn.png");z-index: 1;
 		}
-		.change-btn.active text{color: #fff;}
-		.change-btn.active::after{background-image: url("@/static/images/common/wordView/change-btn-a.png");transform: rotate(180deg);}
+		.change-play-icon{
+			width: 30rpx;height:30rpx;@include ezy-no-repeat-cover;margin-left: 16rpx;
+			display: inline-block;vertical-align: middle;z-index: 2;position: relative;
+			background-image: url("@/static/images/common/wordView/yb-playing-btn.gif");
+		}
+		.change-btn.active{
+			text{color: #fff;}
+			.change-play-icon{background-image: url("@/static/images/common/wordView/yb-white-playing-btn.gif");}
+			&::after{background-image: url("@/static/images/common/wordView/change-btn-a.png");transform: rotate(180deg);}
+			&:last-child::after{transform: unset;}
+		} 
 		.change-btn:last-child::after{transform: rotate(180deg);}
-		.change-btn.active:last-child::after{transform: unset;}
+		
 	}
 
 	.xue-details-content-box{text-align: left;margin-top: 16rpx;}
@@ -2766,6 +2775,7 @@
 				.change-btn{
 					width: 165rpx;height: 50rpx;line-height: 50rpx;
 					text{font-size: 22rpx;}
+					.change-play-icon{width: 20rpx;height: 20rpx;margin-left: 10rpx;}
 				}
 			}
 			.xue-details-content-box{margin-top: 10rpx;}
@@ -2804,6 +2814,7 @@
 				.change-btn{
 					width: 406rpx;height: 123rpx;line-height: 120rpx;
 					text{font-size: 54rpx;}
+					.change-play-icon{width: 48rpx;height: 48rpx;margin-left: 24rpx;}
 				}
 			}
 			.xue-details-content-box{margin-top: 26rpx;}

pages/chaojidanci/newEnglish/components/xuePage.vue

@@ -41,12 +41,12 @@
 					<!-- 音标按钮 -->
 					<view class="xue-change-btn-box">
 						<ezyActiveVue class="ezy-btn-active change-btn" :class="{active: data.isPindu}" @click="handlePindu">
-              <text v-if="data.isPindu && isAutoPlaying">播放中</text>
-              <text>自然拼读</text>
+						  <text>自然拼读</text>
+						  <icon v-if="data.isPindu && isAutoPlaying" class="change-play-icon" ></icon>
 						</ezyActiveVue>
 						<ezyActiveVue class="ezy-btn-active change-btn" :class="{active: !data.isPindu}" @click="handleYinjie">
-              <text v-if="!data.isPindu && isAutoPlaying">播放中</text>
-              <text>音节拆分</text>
+						  <text>音节拆分</text>
+						  <icon v-if="!data.isPindu && isAutoPlaying" class="change-play-icon" ></icon>
 						</ezyActiveVue>
 					</view>
 					<!-- 词根+实用口语 -->