comclib
c02029a5f3
- Spring Boot 后端服务 (hss-home-service) - delivery-miniapp 配送小程序 - website 官网 (Nuxt) - docs 架构设计文档 - Docker 容器化部署配置 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
20 lines
767 B
Vue
20 lines
767 B
Vue
<script setup lang="ts">
|
|
defineProps<{ label: string; value: string | number; suffix?: string; trend?: string; loading?: boolean }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
|
|
<div v-if="loading" class="animate-pulse space-y-3">
|
|
<div class="h-4 bg-gray-200 rounded w-16" />
|
|
<div class="h-8 bg-gray-200 rounded w-24" />
|
|
</div>
|
|
<template v-else>
|
|
<p class="text-sm text-text-secondary mb-2">{{ label }}</p>
|
|
<p class="text-3xl font-bold font-mono text-primary">
|
|
{{ value }}<span v-if="suffix" class="text-lg text-text-secondary ml-1">{{ suffix }}</span>
|
|
</p>
|
|
<p v-if="trend" class="text-xs text-accent mt-1">{{ trend }}</p>
|
|
</template>
|
|
</div>
|
|
</template>
|