From 5cdc15387c241a501f523030fb28e654051b8c47 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 24 Nov 2024 12:37:27 +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:=20=E5=AE=A2=E6=9C=8D=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E6=B6=88=E6=81=AF=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=EF=BC=8C=E5=86=85=E5=AE=B9=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  |  2 +-
 .../kefu/components/KeFuMessageList.vue       | 37 ++++++++++++-------
 .../kefu/components/member/MemberInfo.vue     | 17 +++++++--
 .../promotion/kefu/components/tools/emoji.ts  |  2 +-
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 01479de4..075edc33 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -200,7 +200,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .kefu {
-  background-color: #fff;
+  background-color: #e5e4e4;
 
   &-conversation {
     height: 60px;
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index b3840a87..f7b96cee 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -46,14 +46,13 @@
                 :class="{
                   'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType
                 }"
-                class="p-10px"
               >
                 <!-- 文本消息 -->
                 <MessageItem :message="item">
                   <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                     <div
                       v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
-                      class="flex items-center"
+                      class="flex items-center h-1/1"
                     ></div>
                   </template>
                 </MessageItem>
@@ -64,7 +63,7 @@
                     :initial-index="0"
                     :preview-src-list="[getMessageContent(item).picUrl || item.content]"
                     :src="getMessageContent(item).picUrl || item.content"
-                    class="w-200px"
+                    class="w-200px mx-10px"
                     fit="contain"
                     preview-teleported
                   />
@@ -79,7 +78,7 @@
                     :spuId="getMessageContent(item).spuId"
                     :stock="getMessageContent(item).stock"
                     :title="getMessageContent(item).spuName"
-                    class="max-w-300px"
+                    class="max-w-300px mx-10px"
                   />
                 </MessageItem>
                 <!-- 订单消息 -->
@@ -87,7 +86,7 @@
                   <OrderItem
                     v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
                     :message="item"
-                    class="max-w-100%"
+                    class="max-w-100% mx-10px"
                   />
                 </MessageItem>
               </div>
@@ -373,7 +372,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
 <style lang="scss" scoped>
 .kefu {
-  background-color: #fff;
+  background-color: #f5f5f5;
   position: relative;
   width: calc(100% - 300px - 260px);
 
@@ -389,12 +388,23 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
   }
 
   .kefu-header {
-    background: #fbfbfb;
-    box-shadow: 0 0 0 0 #dcdfe6;
+    background-color: #f5f5f5;
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
 
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
     &-title {
       font-size: 18px;
       font-weight: bold;
@@ -423,7 +433,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       justify-content: flex-start;
 
       .kefu-message {
-        background-color: rgb(245, 245, 245);
+        background-color: #fff;
         margin-left: 10px;
         margin-top: 3px;
         border-top-right-radius: 10px;
@@ -452,9 +462,9 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       padding: 5px 10px;
       width: auto;
       max-width: 50%;
-      text-align: left;
-      display: inline-block !important;
-      word-break: break-all;
+      //text-align: left;
+      //display: inline-block !important;
+      //word-break: break-all;
       transition: all 0.2s;
 
       &:hover {
@@ -468,7 +478,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       background-color: rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       padding: 0 5px;
-      color: #999;
+      color: #fff;
       font-size: 10px;
     }
   }
@@ -500,6 +510,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
   ::v-deep(textarea) {
     resize: none;
+    background-color: #f5f5f5;
   }
 
   :deep(.el-input__wrapper) {
diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 11947fa2..849992b3 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -167,7 +167,7 @@ const getUserData = async () => {
 .kefu {
   position: relative;
   width: 300px !important;
-  background-color: #fff;
+  background-color: #f5f5f5;
 
   &::after {
     content: '';
@@ -181,12 +181,23 @@ const getUserData = async () => {
   }
 
   &-header {
-    background: #fbfbfb;
-    box-shadow: 0 0 0 0 #dcdfe6;
+    background-color: #f5f5f5;
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-around;
 
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
     &-title {
       font-size: 18px;
       font-weight: bold;
diff --git a/src/views/mall/promotion/kefu/components/tools/emoji.ts b/src/views/mall/promotion/kefu/components/tools/emoji.ts
index 0cbf95af..8aa59c8c 100644
--- a/src/views/mall/promotion/kefu/components/tools/emoji.ts
+++ b/src/views/mall/promotion/kefu/components/tools/emoji.ts
@@ -93,7 +93,7 @@ export const useEmoji = () => {
           const emojiFile = getEmojiFileByName(item)
           newData = newData.replace(
             item,
-            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}" alt=""/>`
+            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${emojiFile}" alt=""/>`
           )
         })
       }