From ce3380fa3fe39e69ee97e06a0dec678dfdb9044d Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 4 Nov 2024 16:44:10 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E3=80=91=E5=95=86=E5=9F=8E=E5=AE=A2=E6=9C=8D:=20=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  | 15 ++----
 .../kefu/components/KeFuMessageList.vue       | 49 ++++++-------------
 .../kefu/components/member/MemberInfo.vue     |  4 +-
 3 files changed, 21 insertions(+), 47 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 11ae0ae3..5e57266f 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-aside class="kefu-conversation-aside p-10px h-100%" width="260px">
+  <el-aside class="kefu p-5px h-100%" width="260px">
     <div class="color-[#999] font-bold my-10px">会话记录({{ conversationList.length }})</div>
     <div
       v-for="item in conversationList"
@@ -180,14 +180,13 @@ watch(showRightMenu, (val) => {
 </script>
 
 <style lang="scss" scoped>
-.kefu-conversation-aside {
+.kefu {
   background-color: #fff;
 
   &-conversation {
     height: 60px;
-    padding: 10px;
     //background-color: #fff;
-    transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
+    //transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
 
     .username {
       min-width: 0;
@@ -208,14 +207,10 @@ watch(showRightMenu, (val) => {
     }
   }
 
-  .active {
-    //border-left: 5px #96afea solid;
-    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
-    border-radius: 8px;
-  }
-
+  .active,
   .pinned {
     background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+    border-radius: 8px;
   }
 
   .right-menu-ul {
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 1ab840bd..15179495 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -408,21 +408,12 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       justify-content: flex-start;
 
       .kefu-message {
-        margin-left: 20px;
-        position: relative;
-
-        &::before {
-          content: '';
-          width: 10px;
-          height: 10px;
-          left: -19px;
-          top: calc(50% - 10px);
-          position: absolute;
-          border-left: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          border-right: 5px solid var(--app-content-bg-color);
-        }
+        background-color: rgb(245, 245, 245);
+        margin-left: 10px;
+        margin-top: 18px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
       }
     }
 
@@ -430,37 +421,25 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       justify-content: flex-end;
 
       .kefu-message {
-        margin-right: 20px;
-        position: relative;
-
-        &::after {
-          content: '';
-          width: 10px;
-          height: 10px;
-          right: -19px;
-          top: calc(50% - 10px);
-          position: absolute;
-          border-left: 5px solid var(--app-content-bg-color);
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          border-right: 5px solid transparent;
-        }
+        background-color: rgb(206, 223, 255);
+        margin-right: 10px;
+        margin-top: 18px;
+        border-top-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
       }
     }
 
     // 消息气泡
     .kefu-message {
-      color: #a9a9a9;
-      border-radius: 5px;
-      box-shadow: 3px 3px 5px rgba(220, 220, 220, 0.1);
+      color: #414141;
+      font-weight: 500;
       padding: 5px 10px;
       width: auto;
       max-width: 50%;
       text-align: left;
       display: inline-block !important;
-      position: relative;
       word-break: break-all;
-      background-color: var(--app-content-bg-color);
       transition: all 0.2s;
 
       &:hover {
diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 1faac4a6..855e3d60 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -142,7 +142,7 @@ const handleScroll = debounce(() => {
         left: 0;
         right: 0;
         bottom: 0; /* 覆盖整个元素 */
-        border-bottom: 2px solid black; /* 边框样式 */
+        border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
         pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
       }
 
@@ -153,7 +153,7 @@ const handleScroll = debounce(() => {
         left: 0;
         right: 0;
         bottom: 0; /* 覆盖整个元素 */
-        border-bottom: 2px solid black; /* 边框样式 */
+        border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
         pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
       }
     }