refactor: 首页统计
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user