feat：【mall 商城】会员统计【antd】30% summary-card.vue 优化界面

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
+  <Card :bordered="false" class="h-full shadow-sm">
-    class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
+    <div class="flex flex-row items-center gap-3">
-  >
+      <div
-    <div
+        class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
-      class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
+        :class="`${iconColor} ${iconBgColor}`"
-      :class="`${iconColor} ${iconBgColor}`"
+      >
-    >
+        <IconifyIcon v-if="icon" :icon="icon" class="!text-6" />
-      <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>
       </div>
-      <div class="flex flex-row items-baseline gap-2">
+      <div class="flex flex-col gap-1">
-        <div class="text-lg">
+        <div class="flex items-center gap-1">
-          <CountTo
+          <span class="text-sm text-gray-500">{{ title }}</span>
-            :prefix="prefix"
+          <Tooltip :content="tooltip" placement="topLeft" v-if="tooltip">
-            :end-val="value ?? 0"
+            <IconifyIcon
-            :decimals="decimals ?? 0"
+              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>

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">