24 lines
672 B
Vue
24 lines
672 B
Vue
<script setup>
|
|
defineProps({
|
|
label: String,
|
|
value: [String, Number],
|
|
tone: { type: String, default: 'neutral' }, // neutral | good | warn | bad
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="stat card card-pad" :class="`tone-${tone}`">
|
|
<div class="value num">{{ value }}</div>
|
|
<div class="label">{{ label }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.stat { display: flex; flex-direction: column; gap: 6px; }
|
|
.value { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
|
|
.label { font-size: 13px; color: var(--ink-faint); }
|
|
.tone-good .value { color: var(--good); }
|
|
.tone-warn .value { color: var(--warn); }
|
|
.tone-bad .value { color: var(--bad); }
|
|
</style>
|