From ff531537823371d7630de507b767ce85d066c610 Mon Sep 17 00:00:00 2001
From: lrl <252048765@qq.com>
Date: Wed, 16 Jul 2025 11:49:27 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E4=BC=9A=E5=91=98?=
 =?UTF-8?q?=E6=BC=8F=E6=96=97=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整了会员漏斗卡片组件的样式，简化了宽度设置
- 更新了 trapezoid 类的样式，移除了多余的 margin 和 font-size 设置
- 改善了组件的可读性和视觉效果
---
 .../home/components/member-funnel-card.vue    | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue b/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue
index d9f9b4d42..92b8ce2ca 100644
--- a/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue
+++ b/apps/web-ele/src/views/mall/home/components/member-funnel-card.vue
@@ -39,10 +39,7 @@ const handleTimeRangeChange = async (
     <template #default>
       <div class="min-w-225 py-1.75" v-loading="loading">
         <div class="relative flex h-24">
-          <div
-            class="w-75% <lg:w-35% <xl:w-55% h-full bg-blue-50"
-            style="width: 75%"
-          >
+          <div class="<lg:w-35% <xl:w-55% h-full w-3/4 bg-blue-50">
             <div class="ml-15 flex h-full flex-col justify-center">
               <div class="font-bold">
                 注册用户数量：{{
@@ -60,7 +57,7 @@ const handleTimeRangeChange = async (
             </div>
           </div>
           <div
-            class="trapezoid1 ml--38.5 w-77 text-3.5 mt-1.5 flex h-full flex-col items-center justify-center bg-blue-500 text-white"
+            class="trapezoid1 text-3.5 flex h-full flex-col items-center justify-center bg-blue-500 text-white"
           >
             <span class="text-6 font-bold">{{
               analyseData?.visitUserCount || 0
@@ -69,10 +66,7 @@ const handleTimeRangeChange = async (
           </div>
         </div>
         <div class="relative flex h-24">
-          <div
-            class="w-75% <lg:w-35% <xl:w-55% flex h-full bg-cyan-50"
-            style="width: 75%"
-          >
+          <div class="<lg:w-35% <xl:w-55% flex h-full w-3/4 bg-cyan-50">
             <div class="ml-15 flex h-full flex-col justify-center">
               <div class="font-bold">
                 活跃用户数量：{{
@@ -90,7 +84,7 @@ const handleTimeRangeChange = async (
             </div>
           </div>
           <div
-            class="trapezoid2 mt-1.7 h-25 text-3.5 ml--28 flex w-56 flex-col items-center justify-center bg-cyan-500 text-white"
+            class="trapezoid2 flex flex-col items-center justify-center bg-cyan-500 text-white"
           >
             <span class="text-6 font-bold">{{
               analyseData?.orderUserCount || 0
@@ -99,10 +93,7 @@ const handleTimeRangeChange = async (
           </div>
         </div>
         <div class="relative flex h-24">
-          <div
-            class="w-75% <lg:w-35% <xl:w-55% flex bg-slate-50"
-            style="width: 75%"
-          >
+          <div class="<lg:w-35% <xl:w-55% flex w-3/4 bg-slate-50">
             <div class="ml-15 flex h-full flex-row gap-x-16">
               <div class="flex flex-col justify-center">
                 <div class="font-bold">
@@ -127,7 +118,7 @@ const handleTimeRangeChange = async (
             </div>
           </div>
           <div
-            class="trapezoid3 ml--18 mt-3.25 h-23 text-3.5 flex w-36 flex-col items-center justify-center bg-slate-500 text-white"
+            class="trapezoid3 flex flex-col items-center justify-center bg-slate-500 text-white"
           >
             <span class="text-6 font-bold">{{
               analyseData?.payUserCount || 0
@@ -141,27 +132,31 @@ const handleTimeRangeChange = async (
 </template>
 <style lang="scss" scoped>
 .trapezoid1 {
-  transform: perspective(5em) rotateX(-11deg);
-  font-size: 0.875rem;
   width: 19.25rem;
   margin-left: -9.625rem;
+  margin-top: 0.381rem;
+  font-size: 0.875rem;
+  transform: perspective(5em) rotateX(-11deg);
+  z-index: 1;
 }
 
 .trapezoid2 {
-  transform: perspective(7em) rotateX(-20deg);
-  font-size: 0.875rem;
   width: 14rem;
-  margin-left: -7rem;
   height: 6.25rem;
   margin-top: 0.425rem;
+  margin-left: -7rem;
+  font-size: 0.875rem;
+  transform: perspective(7em) rotateX(-20deg);
+  z-index: 1;
 }
 
 .trapezoid3 {
-  transform: perspective(3em) rotateX(-13deg);
-  font-size: 0.875rem;
   width: 9rem;
   height: 5.75rem;
   margin-top: 0.8125rem;
   margin-left: -4.5rem;
+  font-size: 0.875rem;
+  transform: perspective(3em) rotateX(-13deg);
+  z-index: 1;
 }
 </style>