File size: 1,589 Bytes
69b897d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<template>
<div class="stat-card">
<div class="flex items-start justify-between">
<div class="flex-1">
<p class="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400 sm:text-sm">
{{ title }}
</p>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-100 sm:text-3xl">
{{ value }}
</p>
<p
v-if="subtitle"
class="mt-1.5 text-xs text-gray-500 dark:text-gray-400 sm:mt-2 sm:text-sm"
>
{{ subtitle }}
</p>
</div>
<div :class="['stat-icon flex-shrink-0', iconBgClass]">
<i :class="[icon, 'text-sm sm:text-base']" />
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
title: {
type: String,
required: true
},
value: {
type: [String, Number],
required: true
},
subtitle: {
type: String,
default: ''
},
icon: {
type: String,
required: true
},
iconColor: {
type: String,
default: 'primary'
}
})
const iconBgClass = computed(() => {
const colorMap = {
primary: 'bg-gradient-to-br from-blue-500 to-purple-500',
success: 'bg-gradient-to-br from-green-500 to-emerald-500',
warning: 'bg-gradient-to-br from-yellow-500 to-orange-500',
danger: 'bg-gradient-to-br from-red-500 to-pink-500',
info: 'bg-gradient-to-br from-cyan-500 to-blue-500'
}
return colorMap[props.iconColor] || colorMap.primary
})
</script>
<style scoped>
/* 使用全局样式中定义的 .stat-card 和 .stat-icon 类 */
</style>
|