【功能完善】商城客服: 消息样式调整

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 {
+  .active,
-    //border-left: 5px #96afea solid;
-    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
-    border-radius: 8px;
-  }
-
   .pinned {
     background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+    border-radius: 8px;
   }
 
   .right-menu-ul {

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;
+        background-color: rgb(245, 245, 245);
-        position: relative;
+        margin-left: 10px;
-
+        margin-top: 18px;
-        &::before {
+        border-top-right-radius: 10px;
-          content: '';
+        border-bottom-right-radius: 10px;
-          width: 10px;
+        border-bottom-left-radius: 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);
-        }
       }
     }
 
@@ -430,37 +421,25 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       justify-content: flex-end;
 
       .kefu-message {
-        margin-right: 20px;
+        background-color: rgb(206, 223, 255);
-        position: relative;
+        margin-right: 10px;
-
+        margin-top: 18px;
-        &::after {
+        border-top-left-radius: 10px;
-          content: '';
+        border-bottom-right-radius: 10px;
-          width: 10px;
+        border-bottom-left-radius: 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;
-        }
       }
     }
 
     // 消息气泡
     .kefu-message {
-      color: #a9a9a9;
+      color: #414141;
-      border-radius: 5px;
+      font-weight: 500;
-      box-shadow: 3px 3px 5px rgba(220, 220, 220, 0.1);
       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 {

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; /* 确保点击事件不会被伪元素拦截 */
       }
     }