From 55f84a14841c024c19f1df33ef614988000f97ce Mon Sep 17 00:00:00 2001
From: jiangx <jiangx@1000mu.com>
Date: Thu, 16 Oct 2025 13:03:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20ui=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/List/List.vue         | 10 ++--
 src/components/ListItem/ListItem.vue | 84 ++++++++++++++++++++--------
 src/types/customer.d.ts              |  3 +-
 3 files changed, 69 insertions(+), 28 deletions(-)

diff --git a/src/components/List/List.vue b/src/components/List/List.vue
index 20fa64e..e03bde4 100644
--- a/src/components/List/List.vue
+++ b/src/components/List/List.vue
@@ -10,9 +10,9 @@
         center-slides
         :slides-per-view="2.998"
         watch-overflow
+        :autoplay="{ delay: 30000, disableOnInteraction: false }"
         observe-parents
         :space-between="16"
-        :autoplay="{ delay: 30000, disableOnInteraction: false }"
         observe-slide-children
         :modules="modules"
         class="h-[1776px] py-5"
@@ -25,10 +25,10 @@
     </div>
   </div>
   <div
-    class="random leftt-0 fixed top-0 z-200 flex h-[252px] w-[184px] flex-col items-center justify-start gap-4 rounded-xl border border-solid border-black/5 bg-white bg-gradient-to-b from-[#ededed] to-[#fcfcfc] px-3 pt-3 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]"
+    class="random leftt-0 fixed top-0 z-200 flex w-[232px] flex-col items-center justify-start gap-3 rounded-xl border border-solid border-black/5 bg-gradient-to-b from-[#ca339e] to-[#e964c2] p-3 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]"
   >
-    <img :src="qr" class="size-40" alt="" />
-    <div class="text-center text-18 leading-relaxed text-[#333]">欢迎微信扫码留言<br />期待您的宝贵意见</div>
+    <img :src="qr" class="size-[208px]" alt="" />
+    <div class="text-center text-20 leading-7 text-white">欢迎微信扫码留言<br />期待您的宝贵意见</div>
   </div>
 </template>
 
@@ -55,7 +55,7 @@ function swiperInit(_swiper: any) {
 }
 let timer: number
 const noSwiping = ref(false)
-const TIMEOUT = 3000
+const TIMEOUT = 10000
 function disable() {
   noSwiping.value = true
   swiper.value?.autoplay?.stop()
diff --git a/src/components/ListItem/ListItem.vue b/src/components/ListItem/ListItem.vue
index 16aeb83..827d63f 100644
--- a/src/components/ListItem/ListItem.vue
+++ b/src/components/ListItem/ListItem.vue
@@ -1,30 +1,70 @@
 <template>
-  <div
-    class="custom relative grid grid-cols-2 flex-wrap space-x-6 rounded-xl bg-white pl-6 pr-[6px] pt-6 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]"
-  >
-    <div class="flex-1 justify-between">
-      <div class="mb-2 flex items-center gap-x-2.5 text-justify !text-16 font-normal leading-4.5 text-black/40">
-        <img src="../../assets/images/q.svg" class="size-7" alt="" />
-        {{ formatTime(customer.createTime) }}
-      </div>
-      <ScrollView class="scroll relative h-[506px]" scrollbar :list="customer.content">
-        <div class="whitespace-normal pr-3.5 text-justify font-normal leading-normal text-black/50" v-html="customer.content"></div>
-      </ScrollView>
+  <div class="relative min-h-[568px] rounded-xl bg-white p-6 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]">
+    <div class="mb-3 flex items-center gap-x-2.5 text-justify !text-16 font-normal leading-4.5 text-black/40">
+      <img src="../../assets/images/q.svg" class="size-7" alt="" />
+      {{ formatTime(customer.createTime) }}
+    </div>
+    <ScrollView class="scroll relative mb-5 h-15" scrollbar :list="customer.content">
+      <div class="whitespace-normal pr-3.5 text-justify text-20 font-normal leading-normal text-black/50" v-html="customer.content"></div>
+    </ScrollView>
+    <div class="mb-2 flex items-center gap-x-2.5 text-justify !text-16 font-normal leading-4.5 text-black/40">
+      <img src="../../assets/images/a.svg" class="size-7" alt="" />
+      {{ formatTime(customer.replyTime) }}
     </div>
-    <div class="flex-1">
-      <div class="mb-2 flex items-center gap-x-2.5 text-justify !text-16 font-normal leading-4.5 text-black/40">
-        <img src="../../assets/images/a.svg" class="size-7" alt="" />
-        {{ formatTime(customer.replyTime) }}
+    <div class="flex gap-x-12">
+      <div class="flex-1">
+        <div class="mb-4 inline-flex items-center gap-x-1 rounded-xl border border-solid border-[#FCCDC5] bg-[#FFEBE8] px-2.5 py-0.5">
+          <span class="text-justify text-14 leading-tight text-black/70">改善前</span>
+          <div class="size-4">
+            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M14.3828 5.20234C14.0297 4.36797 13.5234 3.61641 12.8797 2.97266C12.2359 2.32734 11.4875 1.82109 10.65 1.46953C9.78437 1.10391 8.86719 0.917969 7.91875 0.917969C6.97188 0.917969 6.05312 1.10391 5.1875 1.46953C4.35313 1.82109 3.60312 2.32734 2.95781 2.97266C2.31406 3.61641 1.80781 4.36641 1.45469 5.20234C1.09219 6.06797 0.90625 6.98672 0.90625 7.93359C0.90625 8.88047 1.09219 9.79922 1.45781 10.6648C1.81094 11.4992 2.31562 12.2508 2.96094 12.8945C3.60469 13.5383 4.35469 14.0445 5.19063 14.3977C6.05625 14.7633 6.97344 14.9492 7.92188 14.9492C8.86875 14.9492 9.7875 14.7633 10.6531 14.3977C11.4875 14.0445 12.2391 13.5383 12.8828 12.8945C13.5266 12.2508 14.0328 11.5008 14.3859 10.6648C14.7516 9.79922 14.9375 8.88203 14.9375 7.93359C14.9391 6.98516 14.75 6.06797 14.3828 5.20234ZM7.92188 13.9352C4.6125 13.9352 1.92031 11.243 1.92031 7.93359C1.92031 4.62422 4.6125 1.93203 7.92188 1.93203C11.2312 1.93203 13.9234 4.62422 13.9234 7.93359C13.9234 11.243 11.2312 13.9352 7.92188 13.9352Z"
+                fill="black"
+                fill-opacity="0.6"
+              />
+              <path
+                d="M5.47187 6.84609C5.95625 6.84609 6.35 6.45391 6.35 5.96797C6.35 5.48359 5.95781 5.08984 5.47187 5.08984C4.9875 5.08984 4.59375 5.48203 4.59375 5.96797C4.59531 6.45391 4.9875 6.84609 5.47187 6.84609ZM10.3672 6.84609C10.8516 6.84609 11.2453 6.45391 11.2453 5.96797C11.2453 5.48359 10.8531 5.08984 10.3672 5.08984C9.88281 5.08984 9.48906 5.48203 9.48906 5.96797C9.48906 6.45391 9.88281 6.84609 10.3672 6.84609ZM5.14844 10.7352C5.31563 10.7352 5.47031 10.6523 5.56562 10.5148C6.08281 9.77266 6.94375 9.28516 7.91719 9.28516C8.89062 9.28516 9.75156 9.77266 10.2703 10.5148C10.3656 10.6508 10.5203 10.7336 10.6875 10.7336H10.6906C11.0984 10.7336 11.3406 10.2742 11.1063 9.93984C10.975 9.75234 10.8266 9.57578 10.6625 9.41016C9.92969 8.67734 8.95625 8.27422 7.92031 8.27422C6.88438 8.27422 5.90938 8.67734 5.17812 9.41016C5.0125 9.57578 4.86406 9.75234 4.73438 9.93984C4.5 10.2758 4.74063 10.7352 5.14844 10.7352Z"
+                fill="black"
+                fill-opacity="0.6"
+              />
+            </svg>
+          </div>
+        </div>
+        <ScrollView class="scroll h-90 relative" scrollbar observe-image :list="customer.disposeDes">
+          <div class="custom whitespace-normal pr-3.5 text-justify font-normal leading-normal text-[#333333]">
+            <div v-html="customer.disposeDes"></div>
+          </div>
+        </ScrollView>
       </div>
-      <ScrollView class="scroll relative h-[506px]" scrollbar observe-image :list="customer.disposeDes">
-        <div class="whitespace-normal pb-49 pr-3.5 text-justify font-normal leading-normal text-[#333333]">
-          <div v-html="customer.disposeDes"></div>
-          <div class="flex items-center pt-4 !text-16">
-            总经理:{{ customer.managerSignature }}
-            <img class="!size-6" :src="customer.sealUrl" alt="" />
+
+      <div class="flex-1">
+        <div class="mb-4 inline-flex items-center gap-x-1 rounded-xl border border-solid border-[#AFF0B5] bg-[#E8FFE9] px-2.5 py-0.5">
+          <span class="text-justify text-14 leading-tight text-black/70">改善后</span>
+          <div class="size-4">
+            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M14.3516 5.19063C13.9984 4.35625 13.4922 3.60469 12.8484 2.96094C12.2047 2.31719 11.4547 1.81094 10.6188 1.45781C9.75313 1.09219 8.83438 0.90625 7.8875 0.90625C6.94063 0.90625 6.02187 1.09219 5.15625 1.45781C4.32188 1.81094 3.57031 2.31562 2.92656 2.96094C2.28281 3.60469 1.77656 4.35469 1.42344 5.19063C1.06094 6.05625 0.875 6.975 0.875 7.92188C0.875 8.86875 1.06094 9.7875 1.42656 10.6531C1.77969 11.4875 2.28437 12.2391 2.92969 12.8828C3.57344 13.5266 4.32344 14.0328 5.15938 14.3859C6.025 14.7516 6.94219 14.9375 7.89062 14.9375C8.8375 14.9375 9.75625 14.7516 10.6219 14.3859C11.4563 14.0328 12.2078 13.5266 12.8516 12.8828C13.4953 12.2391 14.0016 11.4891 14.3547 10.6531C14.7203 9.7875 14.9062 8.87031 14.9062 7.92188C14.9062 6.97344 14.7172 6.05625 14.3516 5.19063ZM7.88906 13.9234C4.57969 13.9234 1.8875 11.2312 1.8875 7.92188C1.8875 4.6125 4.57969 1.92031 7.88906 1.92031C11.1984 1.92031 13.8906 4.6125 13.8906 7.92188C13.8906 11.2312 11.1984 13.9234 7.88906 13.9234Z"
+                fill="black"
+                fill-opacity="0.6"
+              />
+              <path
+                d="M11.2372 8.24844C10.9872 8.24844 10.7731 8.43125 10.7372 8.67969C10.531 10.0578 9.34033 11.1172 7.90439 11.1172C6.46845 11.1172 5.27626 10.0578 5.06845 8.67969C5.03095 8.43281 4.81845 8.25 4.56845 8.25C4.25751 8.25 4.02158 8.52656 4.06845 8.83438C4.19033 9.64844 4.56845 10.4 5.16064 10.9922C5.89345 11.725 6.86689 12.1281 7.90283 12.1281C8.93876 12.1281 9.91376 11.725 10.645 10.9922C11.2388 10.4 11.6153 9.64844 11.7372 8.83438C11.7841 8.525 11.5481 8.24844 11.2372 8.24844ZM5.45595 6.85C5.94033 6.85 6.33408 6.45781 6.33408 5.97188C6.33408 5.4875 5.94189 5.09375 5.45595 5.09375C4.97158 5.09375 4.57783 5.48594 4.57783 5.97188C4.57783 6.45781 4.97001 6.85 5.45595 6.85ZM10.3497 6.85C10.8341 6.85 11.2278 6.45781 11.2278 5.97188C11.2278 5.4875 10.8356 5.09375 10.3497 5.09375C9.86533 5.09375 9.47158 5.48594 9.47158 5.97188C9.47158 6.45781 9.86533 6.85 10.3497 6.85Z"
+                fill="black"
+                fill-opacity="0.6"
+              />
+            </svg>
           </div>
         </div>
-      </ScrollView>
+        <ScrollView class="scroll h-90 relative" scrollbar observe-image :list="customer.disposeRep">
+          <div class="custom whitespace-normal pb-49 pr-3.5 text-justify font-normal leading-normal text-[#333333]">
+            <div v-html="customer.disposeRep"></div>
+            <div class="flex items-center pt-4 !text-16">
+              总经理:{{ customer.managerSignature }}
+              <img class="!size-6" :src="customer.sealUrl" alt="" />
+            </div>
+          </div>
+        </ScrollView>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/types/customer.d.ts b/src/types/customer.d.ts
index 0ea2f36..71741eb 100644
--- a/src/types/customer.d.ts
+++ b/src/types/customer.d.ts
@@ -23,7 +23,8 @@ declare interface ProposalList {
    * 顾客电话
    */
   customerPhone: string
-  disposeDes: string
+  disposeDes: string //处理前
+  disposeRep: string //处理后
   pictureListAfter: PictureListAfter[]
   pictureListBefore: PictureListBefore[]
   proposalCode: string