feat : 通话记录组件加上时间

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;