Fix styling

This commit is contained in:
2025-12-12 22:41:21 +00:00
parent a5b522c996
commit a5d69ccb86
29 changed files with 610 additions and 542 deletions
+5 -4
View File
@@ -1,4 +1,5 @@
<script setup>
import Card from './Card.vue'
import { formatNumber } from '../composables/formatters'
defineProps({
@@ -6,23 +7,23 @@ defineProps({
label: { type: String, required: true },
icon: { type: String, default: '' },
iconColor: { type: String, default: 'text-gray-500' },
valueClass: { type: String, default: 'gradient-text' },
valueClass: { type: String, default: 'bg-gradient-to-r from-primary-600 to-accent-600 dark:from-primary-400 dark:to-accent-400 bg-clip-text text-transparent' },
delay: { type: String, default: '0s' }
})
</script>
<template>
<div class="card animate-fade-in-up" :style="{ animationDelay: delay }">
<Card class="animate-[fadeInUp_0.6s_ease-out]" :style="{ animationDelay: delay }">
<div class="flex items-center justify-between">
<div class="min-w-0 flex-1">
<div class="text-xl sm:text-2xl md:text-3xl font-bold truncate" :class="valueClass">
{{ typeof value === 'number' ? formatNumber(value) : value }}
</div>
<div class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-1 truncate">{{ label }}</div>
<div class="text-xs sm:text-sm text-gray-700 dark:text-gray-400 mt-1 truncate">{{ label }}</div>
</div>
<div v-if="icon" class="text-2xl sm:text-3xl opacity-50 ml-2 flex-shrink-0" :class="iconColor">
<i :class="icon"></i>
</div>
</div>
</div>
</Card>
</template>