群聊的基础页面

pages/im/components/showText.nvue

@@ -1,5 +1,6 @@
 <template>
     <view class="msg--text">
+        <text class="name" v-if="!guest && name">{{ name }}</text>
         <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
     </view>
 </template>
@@ -12,6 +13,10 @@
                 type: Object,
                 default: {}
             },
+            name: {
+                type: String,
+                default: ''
+            },
             guest: {
                 type: Boolean,
                 default: true
@@ -21,21 +26,29 @@
 </script>
 
 <style scoped lang="scss">
-    .im--text {
-        max-width: 400rpx;
-        padding: 20rpx;
-        font-size: 28rpx;
-        line-height: 40rpx;
-
-        &.left {
-            border-radius: 0 20rpx 20rpx 20rpx;
-            background: white;
+    .msg--text {
+        .name {
+            font-size: 24rpx;
+            line-height: 34rpx;
+            color: $text-gray-m;
         }
 
-        &.right {
-            border-radius: 20rpx 0 20rpx 20rpx;
-            background: $main-color;
-            color: white;
+        .im--text {
+            max-width: 500rpx;
+            padding: 20rpx;
+            line-height: 44rpx;
+            font-size: 32rpx;
+
+            &.left {
+                border-radius: 0 20rpx 20rpx 20rpx;
+                background: white;
+            }
+
+            &.right {
+                border-radius: 20rpx 0 20rpx 20rpx;
+                background: $main-color;
+                color: white;
+            }
         }
     }
 </style>