From 689fa89c80a7c30c3c2f00c47555e315a81a165f Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Sun, 15 Sep 2024 00:29:12 +0800
Subject: [PATCH] =?UTF-8?q?feat=20:=20=E9=80=9A=E8=AF=9D=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8A=A0=E4=B8=8A=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/liveCall/LiveCallItem.vue | 51 ++++++++++++++++++------
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/components/liveCall/LiveCallItem.vue b/src/components/liveCall/LiveCallItem.vue
index 0bf39c7..2955b8f 100644
--- a/src/components/liveCall/LiveCallItem.vue
+++ b/src/components/liveCall/LiveCallItem.vue
@@ -9,11 +9,12 @@
     </div>
     <el-scrollbar ref="scrollbarRef" class="scrollbar">
       <div class="chat-content" ref="innerRef">
+        <div class="time-grap"><span>6月5日 12:05</span></div>
         <div v-for="(item,index) in recordList" :key="index">
           <!-- 我的 -->
           <div v-if="item.id==userId" class="word-my">
             <div class="info">
-              <p class="time">{{ item.nickName }} </p>
+              <p class="name">{{ item.nickName }} </p>
               <div class="info-content">{{ item.contactText }}</div>
             </div>
             <el-avatar text="我"/>
@@ -22,7 +23,7 @@
           <div v-else class="word">
             <el-avatar text="对方"/>
             <div class="info">
-              <p class="time">{{ item.nickName }} </p>
+              <p class="name">{{ item.nickName }} </p>
               <div class="info-content">{{ item.contactText }}</div>
             </div>
           </div>
@@ -38,25 +39,35 @@ import SockJS from 'sockjs-client/dist/sockjs.min.js'
 import {getToken} from '@/utils/auth'
 
 const userId = ref(1)
-const recordList = ref([ {
+const recordList = ref([{
   id: 2,
   nickName: 'AI助手',
-  contactText: '得到222'
+  contactText: '你好'
 },
   {
     id: 1,
     nickName: '我',
-    contactText: '得到1'
+    contactText: '你好!'
   },
   {
     id: 2,
     nickName: 'AI助手',
-    contactText: '得到222'
+    contactText: '你好'
   },
   {
     id: 1,
     nickName: '我',
-    contactText: '得到1'
+    contactText: '你好!'
+  },
+  {
+    id: 2,
+    nickName: 'AI助手',
+    contactText: '你好'
+  },
+  {
+    id: 1,
+    nickName: '我',
+    contactText: '你好!'
   },
 
 ])
@@ -82,15 +93,16 @@ const scrollbarRef = ref(null);
 const scrollToBottom = () => {
   if (scrollbarRef.value) {
     const container = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
-    console.info("🚀 ~method:container -----", container)
     container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
     container.scrollTop = container.scrollHeight;
   }
 };
-
-onMounted(() => {
+nextTick(() => {
   scrollToBottom();
 })
+// onMounted(() => {
+//   scrollToBottom();
+// })
 const initWebSocket = () => {
   try {
     const wsUrl = "http://frp.feashow.cn:31800/ws"
@@ -157,6 +169,21 @@ const initWebSocket = () => {
     .chat-content {
       width: 100%;
 
+      .time-grap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > span {
+          font-size: 13px;
+          padding: 5px 10px;
+          border: 1px solid #d7d9da;
+          border-radius: 25px;
+        }
+
+        margin-bottom: 10px;
+      }
+
       .word {
         display: flex;
         margin-bottom: 20px;
@@ -170,7 +197,7 @@ const initWebSocket = () => {
         .info {
           margin-left: 10px;
 
-          .time {
+          .name {
             font-size: 12px;
             color: rgba(51, 51, 51, 0.8);
             margin: 0;
@@ -217,7 +244,7 @@ const initWebSocket = () => {
           margin-left: 10px;
           text-align: right;
 
-          .time {
+          .name {
             font-size: 12px;
             color: rgba(51, 51, 51, 0.8);
             height: 20px;