feat: 首页改版

uni_modules/hashmall-customer-service/components/kefu-message-item/kefu-message-item.vue

@@ -28,13 +28,15 @@
           />
           <view v-else-if="normalizedType === contentType.AUDIO" class="audio-block">
             <button class="audio-message" @click.stop="toggleAudio">
-              <u-icon :name="audioPlaying ? 'pause-circle' : 'play-circle'" size="24" color="#7934f6" />
-              <text>{{ audioPlaying ? '正在播放' : '语音消息' }}</text>
+              <view class="audio-message__left">
+                <u-icon :name="audioPlaying ? 'pause-circle' : 'play-circle'" size="26" color="#7934f6" />
+                <text class="audio-message__title">{{ audioPlaying ? '正在播放' : '语音消息' }}</text>
+              </view>
               <text class="audio-duration">{{ attachment.duration ? `${attachment.duration}″` : '' }}</text>
             </button>
             <text v-if="attachment.transcript" class="audio-transcript" selectable>{{ attachment.transcript }}</text>
             <button v-else class="transcribe-button" :disabled="transcribing" @click.stop="$emit('transcribe', message)">
-              {{ transcribing ? '识别中…' : '转文字' }}
+              <text>{{ transcribing ? '识别中…' : '转文字' }}</text>
             </button>
           </view>
           <button v-else-if="normalizedType === contentType.FILE" class="file-message" @click.stop="openFile">
@@ -513,44 +515,82 @@ export default {
   border: 0;
 }
 
-.audio-duration {
-  margin-left: auto;
-  color: #777983;
-  font-size: 22rpx;
-}
-
 .audio-block {
   display: flex;
-  min-width: 240rpx;
   flex-direction: column;
+  min-width: 260rpx;
+  padding: 20rpx 26rpx;
+  box-sizing: border-box;
+}
+
+.audio-message {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: #1f1f23;
+  text-align: left;
+  line-height: 1;
+
+  &::after {
+    border: 0;
+  }
+}
+
+.audio-message__left {
+  display: flex;
+  align-items: center;
   gap: 10rpx;
 }
 
-.audio-transcript {
-  padding-top: 10rpx;
-  border-top: 1rpx solid rgba(121, 52, 246, 0.14);
-  color: #35343b;
+.audio-message__title {
+  font-size: 27rpx;
+  font-weight: 500;
+  color: #1f1f23;
+}
+
+.audio-duration {
+  margin-left: auto;
+  color: #7934f6;
   font-size: 25rpx;
+  font-weight: 600;
+}
+
+.audio-transcript {
+  margin-top: 14rpx;
+  padding-top: 12rpx;
+  border-top: 1rpx solid rgba(121, 52, 246, 0.15);
+  color: #27272c;
+  font-size: 26rpx;
   line-height: 1.55;
   white-space: normal;
 }
 
 .transcribe-button {
+  display: inline-flex;
+  align-items: center;
   align-self: flex-start;
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  color: #6730d7;
-  font-size: 23rpx;
-  line-height: 34rpx;
-}
+  margin-top: 12rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 12rpx;
+  background: rgba(121, 52, 246, 0.08);
+  color: #7934f6;
+  font-size: 22rpx;
+  font-weight: 500;
+  line-height: 1.4;
 
-.transcribe-button::after {
-  border: 0;
-}
+  &::after {
+    border: 0;
+  }
 
-.transcribe-button[disabled] {
-  color: #8e8f96;
+  &[disabled] {
+    color: #8e8f96;
+    background: rgba(0, 0, 0, 0.04);
+  }
 }
 
 .file-message {