67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { ComparisonCardProps } from './types';
|
|
|
|
import { computed } from 'vue';
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
VbenCountToAnimator,
|
|
VbenIcon,
|
|
VbenLoading,
|
|
} from '@vben-core/shadcn-ui';
|
|
|
|
/** 对比卡片 */
|
|
defineOptions({ name: 'ComparisonCard' });
|
|
|
|
const props = defineProps<ComparisonCardProps>();
|
|
|
|
const iconMap: Record<string, string> = {
|
|
menu: 'ant-design:appstore-outlined',
|
|
box: 'ant-design:box-plot-outlined',
|
|
cpu: 'ant-design:cluster-outlined',
|
|
message: 'ant-design:message-outlined',
|
|
};
|
|
|
|
const iconName = computed(() => iconMap[props.icon] || iconMap.menu);
|
|
</script>
|
|
|
|
<template>
|
|
<Card
|
|
class="relative h-40 cursor-pointer transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
|
|
>
|
|
<VbenLoading :spinning="loading" />
|
|
<CardContent class="flex h-full flex-col p-6">
|
|
<div class="mb-4 flex items-start justify-between">
|
|
<div class="flex flex-1 flex-col">
|
|
<span class="mb-2 text-sm font-medium text-gray-500">
|
|
{{ title }}
|
|
</span>
|
|
<span class="text-3xl font-bold text-gray-800">
|
|
<span v-if="value === -1">--</span>
|
|
<VbenCountToAnimator
|
|
v-else
|
|
:end-val="value"
|
|
:duration="1000"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div :class="`text-4xl ${iconColor || ''}`">
|
|
<VbenIcon :icon="iconName" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-auto border-t border-gray-100 pt-3">
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-gray-400">今日新增</span>
|
|
<span v-if="todayCount === -1" class="text-gray-400">--</span>
|
|
<span v-else class="font-medium text-green-500">
|
|
+{{ todayCount }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</template>
|
|
|