语音组件优化，下载过程使用RC接口，播放优化

pages/im/components/showImage.vue

@@ -1,10 +1,10 @@
-<template>
-    <view class="">
-        <text class="name" v-if="!guest && name">{{ name }}</text>
-        <view class="msg--image" :class="guest ? 'right': 'left'">
-            <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
-        </view>
-    </view>
+<template>
+    <view class="">
+        <text class="name" v-if="!guest && name">{{ name }}</text>
+        <view class="msg--image" :class="guest ? 'right': 'left'">
+            <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
+        </view>
+    </view>
 </template>
 
 <script>
@@ -26,10 +26,10 @@
             guest: {
                 type: Boolean,
                 default: true
-            },
-            name: {
-                type: String,
-                default: ''
+            },
+            name: {
+                type: String,
+                default: ''
             }
         },
         methods: {
@@ -45,30 +45,28 @@
     }
 </script>
 
-<style scoped lang="scss">
-    .name {
-        font-size: 24rpx;
-        line-height: 34rpx;
+<style scoped lang="scss">
+    .name {
+        font-size: 24rpx;
         color: $text-gray-m;
-        padding-bottom: 10rpx;
-    }
-    
+    }
+
     .msg--image {
-        // padding: 20rpx;
+        .img {
+            width: 180rpx;
+        }
 
         &.left {
-            border-radius: 0 20rpx 20rpx 20rpx;
-            // background: white;
+            .img {
+                border-radius: 0 10rpx 10rpx 10rpx;
+            }
         }
 
         &.right {
-            border-radius: 20rpx 0 20rpx 20rpx;
-            // background: #34CE98;
+            .img {
+                border-radius: 10rpx 0 10rpx 10rpx;
+            }
         }
 
-        .img {
-            width: 150rpx;
-            border-radius: 10rpx;
-        }
     }
 </style>