From f6053bd6ca1b6245e9b9a9423b9c82be6fe53af4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 19 Oct 2025 19:05:41 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=20=E5=95=86=E5=9F=8E?=
 =?UTF-8?q?=E3=80=91=E4=BC=9A=E5=91=98=E7=BB=9F=E8=AE=A1=E3=80=90antd?=
 =?UTF-8?q?=E3=80=9130%=20summary-card.vue=20=E4=BC=98=E5=8C=96=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/summary-card/summary-card.vue  | 81 ++++++++++---------
 .../views/mall/statistics/member/index.vue    |  8 +-
 2 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/apps/web-antd/src/components/summary-card/summary-card.vue b/apps/web-antd/src/components/summary-card/summary-card.vue
index b2fdd3510..c88d33199 100644
--- a/apps/web-antd/src/components/summary-card/summary-card.vue
+++ b/apps/web-antd/src/components/summary-card/summary-card.vue
@@ -4,7 +4,7 @@ import type { SummaryCardProps } from './typing';
 import { CountTo } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-import { Tooltip } from 'ant-design-vue';
+import { Card, Tooltip } from 'ant-design-vue';
 
 /** 统计卡片 */
 defineOptions({ name: 'SummaryCard' });
@@ -12,46 +12,49 @@ defineOptions({ name: 'SummaryCard' });
 defineProps<SummaryCardProps>();
 </script>
 <template>
-  <div
-    class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
-  >
-    <div
-      class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
-      :class="`${iconColor} ${iconBgColor}`"
-    >
-      <IconifyIcon v-if="icon" :icon="icon" class="!text-6" />
-    </div>
-    <div class="flex flex-col gap-1">
-      <div class="flex items-center gap-1">
-        <span class="text-base">{{ title }}</span>
-        <Tooltip :content="tooltip" placement="topLeft" v-if="tooltip">
-          <IconifyIcon
-            icon="lucide:circle-alert"
-            class="item-center !text-3 flex"
-          />
-        </Tooltip>
+  <Card :bordered="false" class="h-full shadow-sm">
+    <div class="flex flex-row items-center gap-3">
+      <div
+        class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
+        :class="`${iconColor} ${iconBgColor}`"
+      >
+        <IconifyIcon v-if="icon" :icon="icon" class="!text-6" />
       </div>
-      <div class="flex flex-row items-baseline gap-2">
-        <div class="text-lg">
-          <CountTo
-            :prefix="prefix"
-            :end-val="value ?? 0"
-            :decimals="decimals ?? 0"
-          />
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-1">
+          <span class="text-sm text-gray-500">{{ title }}</span>
+          <Tooltip :content="tooltip" placement="topLeft" v-if="tooltip">
+            <IconifyIcon
+              icon="lucide:circle-alert"
+              class="item-center !text-3 flex"
+            />
+          </Tooltip>
+        </div>
+        <div class="flex flex-row items-baseline gap-2">
+          <div class="text-2xl">
+            <CountTo
+              :prefix="prefix"
+              :end-val="value ?? 0"
+              :decimals="decimals ?? 0"
+            />
+          </div>
+          <span
+            v-if="percent !== undefined"
+            :class="Number(percent) > 0 ? 'text-red-500' : 'text-green-500'"
+            class="flex items-center"
+          >
+            <span class="text-sm">{{ Math.abs(Number(percent)) }}%</span>
+            <IconifyIcon
+              :icon="
+                Number(percent) > 0
+                  ? 'lucide:chevron-up'
+                  : 'lucide:chevron-down'
+              "
+              class="ml-0.5 !text-sm"
+            />
+          </span>
         </div>
-        <span
-          v-if="percent !== undefined"
-          :class="Number(percent) > 0 ? 'text-red-500' : 'text-green-500'"
-        >
-          <span class="text-sm">{{ Math.abs(Number(percent)) }}%</span>
-          <IconifyIcon
-            :icon="
-              Number(percent) > 0 ? 'lucide:chevron-up' : 'lucide:chevron-down'
-            "
-            class="ml-0.5 !text-sm"
-          />
-        </span>
       </div>
     </div>
-  </div>
+  </Card>
 </template>
diff --git a/apps/web-antd/src/views/mall/statistics/member/index.vue b/apps/web-antd/src/views/mall/statistics/member/index.vue
index f25ff3a7f..5d0aef9b2 100644
--- a/apps/web-antd/src/views/mall/statistics/member/index.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/index.vue
@@ -8,13 +8,13 @@ import { fenToYuan } from '@vben/utils';
 
 import { Col, Row } from 'ant-design-vue';
 
-import { SummaryCard } from '#/components/summary-card';
 import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { SummaryCard } from '#/components/summary-card';
 
-import MemberFunnelCard from './modules/funnel-card.vue';
-import MemberTerminalCard from './modules/terminal-card.vue';
 import MemberAreaCard from './modules/area-card.vue';
+import MemberFunnelCard from './modules/funnel-card.vue';
 import MemberSexCard from './modules/sex-card.vue';
+import MemberTerminalCard from './modules/terminal-card.vue';
 
 /** 会员统计 */
 defineOptions({ name: 'MemberStatistics' });
@@ -91,7 +91,6 @@ onMounted(async () => {
           />
         </Col>
       </Row>
-
       <!-- 会员概览和会员终端 -->
       <Row :gutter="16">
         <Col :md="18" :sm="24" :xs="24">
@@ -101,7 +100,6 @@ onMounted(async () => {
           <MemberTerminalCard />
         </Col>
       </Row>
-
       <!-- 会员地域分布和性别比例 -->
       <Row :gutter="16">
         <Col :md="18" :sm="24" :xs="24">