smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-10-19 19:05:41 +08:00
parent 01aef369d7
commit f6053bd6ca
2 changed files with 45 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
apps/web-antd/src/components/summary-card/summary-card.vue
View File

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

8
apps/web-antd/src/views/mall/statistics/member/index.vue
View File

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