<template>
|
<el-card class="stat-card" shadow="never" :loading="loading">
|
<div class="flex flex-col">
|
<div class="flex justify-between items-center mb-1">
|
<span class="text-gray-500 text-base font-medium">{{ title }}</span>
|
<Icon :icon="icon" :class="`text-[32px] ${iconColor}`" />
|
</div>
|
<span class="text-3xl font-bold text-gray-700">
|
<span v-if="value === -1">--</span>
|
<span v-else>{{ value }}</span>
|
</span>
|
<el-divider class="my-2" />
|
<div class="flex justify-between items-center text-gray-400 text-sm">
|
<span>今日新增</span>
|
<span class="text-green-500" v-if="todayCount !== -1">+{{ todayCount }}</span>
|
<span v-else>--</span>
|
</div>
|
</div>
|
</el-card>
|
</template>
|
|
<script lang="ts" setup>
|
import { propTypes } from '@/utils/propTypes'
|
|
/** 【总数 + 新增数】统计卡片组件 */
|
defineOptions({ name: 'IoTComparisonCard' })
|
|
const props = defineProps({
|
title: propTypes.string.def('').isRequired,
|
value: propTypes.number.def(0).isRequired,
|
todayCount: propTypes.number.def(0).isRequired,
|
icon: propTypes.string.def('').isRequired,
|
iconColor: propTypes.string.def(''),
|
loading: {
|
type: Boolean,
|
default: false
|
}
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.stat-card {
|
transition: all 0.3s;
|
|
&:hover {
|
transform: translateY(-5px);
|
box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
|
}
|
}
|
</style>
|
