refactor: 首页统计

This commit is contained in:
caiyuchao
2025-08-15 16:54:31 +08:00
parent 74e9b23f71
commit 71970cd5ad
2 changed files with 7 additions and 7 deletions

View File

@@ -17,6 +17,7 @@ interface Props {
startVal?: number; startVal?: number;
suffix?: string; suffix?: string;
transition?: keyof typeof TransitionPresets; transition?: keyof typeof TransitionPresets;
unit?: string;
useEasing?: boolean; useEasing?: boolean;
} }
@@ -29,6 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
decimals: 0, decimals: 0,
duration: 1500, duration: 1500,
endVal: 2021, endVal: 2021,
unit: '',
prefix: '', prefix: '',
separator: ',', separator: ',',
startVal: 0, startVal: 0,
@@ -122,7 +124,5 @@ function formatNumber(num: number | string) {
defineExpose({ reset }); defineExpose({ reset });
</script> </script>
<template> <template>
<span :style="{ color }"> <span :style="{ color }"> {{ value }}{{ unit }} </span>
{{ value }}
</span>
</template> </template>

View File

@@ -4,7 +4,6 @@ import type { AnalysisOverviewItem } from '../typing';
import { import {
Card, Card,
CardContent, CardContent,
CardFooter,
CardHeader, CardHeader,
CardTitle, CardTitle,
VbenCountToAnimator, VbenCountToAnimator,
@@ -24,7 +23,7 @@ withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-5"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-6">
<template v-for="item in items" :key="item.title"> <template v-for="item in items" :key="item.title">
<Card :title="item.title" class="w-full"> <Card :title="item.title" class="w-full">
<CardHeader> <CardHeader>
@@ -35,20 +34,21 @@ withDefaults(defineProps<Props>(), {
<VbenCountToAnimator <VbenCountToAnimator
:end-val="item.value" :end-val="item.value"
:start-val="1" :start-val="1"
:unit="item.title === '签单率' ? '%' : ''"
class="text-xl" class="text-xl"
prefix="" prefix=""
/> />
<!-- <VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" /> --> <!-- <VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" /> -->
<span :class="item.icon"></span> <span :class="item.icon"></span>
</CardContent> </CardContent>
<CardFooter class="justify-between"> <!-- <CardFooter class="justify-between">
<span>{{ item.totalTitle }}</span> <span>{{ item.totalTitle }}</span>
<VbenCountToAnimator <VbenCountToAnimator
:end-val="item.totalValue" :end-val="item.totalValue"
:start-val="1" :start-val="1"
prefix="" prefix=""
/> />
</CardFooter> </CardFooter> -->
</Card> </Card>
</template> </template>
</div> </div>