修改消息

src/views/chat/index.vue

@@ -106,7 +106,15 @@ const chatList = ref([
 ])
 const list = ref([
   { _id: '1', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
-  { _id: '2', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  {
+    _id: '2',
+    url: kf,
+    name: '新浪微博',
+    content:
+      '研究防颠簸及坡地机身平衡的机械结构和控制方法，能有效克服履带式行走机构在起伏地形下难以实现机身有效平衡的缺点，以确保采摘装备在采摘过程中的行走的稳定。行走速度：0-5m/s；在坡度小于25度的环境下能平稳行走',
+    type: '0',
+    time: '2024-03-30'
+  },
   { _id: '1', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
   { _id: '2', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' }
 ])

src/views/chat/parts/chat.vue

@@ -9,26 +9,26 @@
               <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
                 <el-col :span="24" class="time">{{ item.time }}</el-col>
                 <el-col :span="24" class="message">
-                  <el-col :span="1" class="left">
+                  <el-col :span="2" class="left">
                     <el-image class="image" :src="item.url" fit="fill" />
                   </el-col>
-                  <el-col :span="23" class="right">
-                    <el-col :span="24" class="name"> {{ item.name }}</el-col>
-                    <el-col :span="24" class="content">
-                      <text class="text">{{ item.content }}</text>
-                    </el-col>
+                  <el-col :span="20" class="right">
+                    <div class="name">{{ item.name }}</div>
+                    <div class="content">
+                      <text>{{ item.content }}</text>
+                    </div>
                   </el-col>
                 </el-col>
                 <el-col :span="24" class="message flexOne">
-                  <el-col :span="23" class="right">
-                    <el-col :span="24" class="name"> {{ item.name }}</el-col>
-                    <el-col :span="24" class="content">
-                      <text class="text">{{ item.content }}</text>
-                    </el-col>
-                  </el-col>
-                  <el-col :span="1" class="left">
+                  <el-col :span="2" class="left">
                     <el-image class="image" :src="item.url" fit="fill" />
                   </el-col>
+                  <el-col :span="20" class="right">
+                    <div class="name">{{ item.name }}</div>
+                    <div class="content">
+                      <text>{{ item.content }}</text>
+                    </div>
+                  </el-col>
                 </el-col>
               </el-col>
             </el-main>
@@ -90,13 +90,16 @@ const info = inject('info')
           color: #a3a7ae;
         }
         .flexOne {
-          .right {
-            text-align: right !important;
-            padding-right: 15px !important;
+          flex-direction: row-reverse;
+          .left {
+            text-align: right;
           }
-          .content {
-            color: #fff !important;
-            text {
+          .right {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            .content {
+              color: #fff !important;
               background: #409eff !important;
               padding: 12px !important;
               border-radius: 10px 0 10px 10px !important;
@@ -105,15 +108,15 @@ const info = inject('info')
         }
         .message {
           display: flex;
+          margin: 0 0 10px 0;
           .left {
             .image {
-              width: 40px;
-              height: 40px;
+              width: 50px;
+              height: 50px;
               border-radius: 50%;
             }
           }
           .right {
-            padding-left: 15px;
             .name {
               padding-bottom: 5px;
               color: #a3a7ae;
@@ -121,15 +124,12 @@ const info = inject('info')
               font-size: 12px;
             }
             .content {
-              padding: 20px 0;
-              word-break: break-word;
+              width: fit-content;
               font-size: 14px;
               color: #333;
-              text {
-                background: rgb(255, 255, 255);
-                padding: 12px;
-                border-radius: 0 10px 10px 10px;
-              }
+              background: rgb(255, 255, 255);
+              padding: 12px;
+              border-radius: 0 10px 10px 10px;
             }
           }
         }