清理代码

pages/im/components/showVoice.nvue

@@ -1,9 +1,9 @@
 <template>
     <view>
-        <view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg">
-            <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-            <text class="audio-text">"{{msg.duration}}"</text>
-            <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+        <view class="im--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
+            <image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+            <text class="duration">{{msg.duration}}"</text>
+            <image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
         </view>
     </view>
 </template>
@@ -57,8 +57,8 @@
     }
 </script>
 
-<style scoped>
-    .im--audio {
+<style scoped lang="scss">
+    .im--voice {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
@@ -66,33 +66,30 @@
         width: 170rpx;
         padding: 0 20rpx;
         box-sizing: border-box;
-    }
 
-    ,
-    .im--audio.left {
-        border-radius: 0 20rpx 20rpx 20rpx;
-        background: white;
-    }
+        .icon {
+            width: 38rpx;
+            height: 38rpx;
+        }
 
-    .im--audio.right {
-        border-radius: 20rpx 0 20rpx 20rpx;
-        background: #34CE98;
-    }
+        &.left {
+            border-radius: 0 20rpx 20rpx 20rpx;
+            background: white;
 
-    .audio-mp3 {
-        width: 38rpx;
-        height: 38rpx;
-    }
+            .duration {
+                color: #333;
+                font-size: 30rpx;
+            }
+        }
 
-    .audio-text {
-        font-size: 30rpx;
-    }
+        &.right {
+            border-radius: 20rpx 0 20rpx 20rpx;
+            background: $main-color;
 
-    .im--audio.left .audio-text {
-        color: #333;
-    }
-
-    .im--audio.right .audio-text {
-        color: white;
+            .duration {
+                color: white;
+                font-size: 30rpx;
+            }
+        }
     }
 </style>