24 lines
783 B
Vue
24 lines
783 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
label: string
|
|
value: string | number
|
|
sub?: string
|
|
color?: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="stat-card">
|
|
<p class="stat-label">{{ label }}</p>
|
|
<p class="stat-value" :style="color ? { color } : {}">{{ value }}</p>
|
|
<p v-if="sub" class="stat-sub">{{ sub }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.stat-card { background: white; border-radius: 11px; padding: 16px; border: 1px solid #e2e8f0; }
|
|
.stat-label { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 8px; }
|
|
.stat-value { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -1px; line-height: 1; }
|
|
.stat-sub { font-size: 10.5px; color: #64748b; margin-top: 5px; }
|
|
</style>
|