fix : 优化通话记录框样式

src/components/liveCall/LiveCallItemHome.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="live-call">
+    <div class="header">
+      <div>
+        <span style="margin-right: 20px">{{ headData.username }}</span>
+        <span>{{ headData.phone }}</span>
+      </div>
+      <div><span>工单名称：{{ headData.orderName }}</span></div>
+    </div>
+    <el-scrollbar ref="scrollbarRef" class="scrollbar">
+      <div class="chat-content" ref="innerRef">
+        <div v-for="(item,index) in recordObj.content" :key="index">
+          <div class="time-grap"><span>{{ item.conversationTimestamp || '6月5日 12:05' }}</span></div>
+          <!-- 我的 -->
+          <div v-if="item.speaker==0" class="word-my">
+            <div class="info">
+              <p class="name">{{ item.speaker==0?headData.username:'AI助手' }} </p>
+              <div class="info-content">{{ item.message }}</div>
+            </div>
+            <el-avatar text="我"/>
+          </div>
+          <!-- 对方 -->
+          <div v-else class="word">
+            <el-avatar text="对方"/>
+            <div class="info">
+              <p class="name">{{ item.speaker==0?headData.username:'AI助手'  }} </p>
+              <div class="info-content">{{ item.message }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup>
+import {defineProps} from "vue";
+const scrollbarRef=ref()
+const props = defineProps({
+  recordObj: {
+    type: Object,
+    default: {}
+  },
+  headData: {
+    type: Object,
+    default: {}
+  },
+})
+const getScrollbarRef=()=>{
+  return  scrollbarRef.value
+}
+defineExpose({
+  getScrollbarRef
+})
+</script>
+
+<style lang="scss" scoped>
+.live-call {
+  width: 48%;
+  height: 47vh;
+  margin-bottom: 20px;
+  overflow: hidden;
+  border: 1px solid #d5d4d4;
+  border-radius: 10px;
+
+  .header {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 40px;
+    border-bottom: 1px solid #d5d4d4;
+  }
+
+  .scrollbar {
+    padding: 10px 10px 0 10px;
+    height: 42vh;
+
+    .el-scrollbar__wrap {
+      height: 100%;
+      overflow: scroll;
+      overflow-x: auto;
+    }
+
+    // 聊天内容样式
+    .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;
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+
+        .info {
+          margin-left: 10px;
+
+          .name {
+            font-size: 12px;
+            color: rgba(51, 51, 51, 0.8);
+            margin: 0;
+            height: 20px;
+            line-height: 20px;
+            margin-top: -5px;
+          }
+
+          .info-content {
+            padding: 10px;
+            font-size: 14px;
+            background: #f5f5f5;
+            position: relative;
+            margin-top: 8px;
+            border: 1px solid #f5f5f5;
+          }
+
+          //小三角形
+          .info-content::before {
+            position: absolute;
+            left: -8px;
+            top: 8px;
+            content: '';
+            border-right: 10px solid #f5f5f5;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+          }
+        }
+      }
+
+      .word-my {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+
+        .info {
+          width: 90%;
+          margin-left: 10px;
+          text-align: right;
+
+          .name {
+            font-size: 12px;
+            color: rgba(51, 51, 51, 0.8);
+            height: 20px;
+            line-height: 20px;
+            margin-top: -5px;
+            margin-right: 10px;
+          }
+
+          .info-content {
+            max-width: 70%;
+            padding: 10px;
+            font-size: 14px;
+            float: right;
+            margin-right: 10px;
+            position: relative;
+            margin-top: 8px;
+            background: #A3C3F6;
+            text-align: left;
+          }
+
+          //小三角形
+          .info-content::after {
+            position: absolute;
+            right: -8px;
+            top: 8px;
+            content: '';
+            border-left: 10px solid #A3C3F6;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+          }
+        }
+      }
+    }
+
+  }
+
+}
+</style>