nvue聊天窗口

components/im/imAUDIO.vue

@@ -1,20 +1,65 @@
 <template>
-    <view>
-        语音消息
+    <view class="im--audio" :class="guest ? 'right': 'left'">
+        <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+        <text class="audio-text">"60"</text>
+        <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
     </view>
 </template>
 
 <script>
     export default {
         name:"im",
-        data() {
-            return {
-                
-            };
+        props:{
+            msg : {
+                type   : String,
+                default: 'https://images.pexels.com/photos/10266655/pexels-photo-10266655.jpeg'
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        },
+        methods:{
+            openImg(){
+                uni.previewImage({
+                    urls    : [this.msg],
+                    current : 1
+                })
+            }
         }
     }
 </script>
 
-<style lang="scss">
-
+<style scoped>
+    .im--audio{
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        height: 79rpx;
+        width: 170rpx;
+        padding: 0 20rpx;
+        box-sizing: border-box;
+    },
+    .im--audio.left{
+        border-radius: 0 20rpx 20rpx 20rpx;
+        background: white;
+    }
+    
+    .im--audio.right{
+        border-radius: 20rpx 0 20rpx 20rpx;
+        background: #34CE98;
+    }
+    .audio-mp3{
+        width: 38rpx;
+        height: 38rpx;
+    }
+    .audio-text{
+        font-size: 30rpx;
+    }
+    .im--audio.left .audio-text{
+        color: #333;
+    }
+    .im--audio.right .audio-text{
+        color: white;
+    }
 </style>