56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
items: { label: string; value: string | number }[]
|
||
|
|
columns?: number
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="summary-row" :style="{ '--cols': columns || 4 }">
|
||
|
|
<div v-for="item in items" :key="item.label" class="summary-item">
|
||
|
|
<span class="summary-value">{{ item.value }}</span>
|
||
|
|
<span class="summary-label">{{ item.label }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.summary-row {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(var(--cols), 1fr);
|
||
|
|
gap: 16px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 12px 16px;
|
||
|
|
background: var(--bg-card);
|
||
|
|
border: 1px solid var(--border-dim);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
transition: all var(--transition-fast);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-item:hover {
|
||
|
|
border-color: var(--border-mid);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-value {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--accent-cyan);
|
||
|
|
text-shadow: 0 0 8px var(--accent-cyan-glow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-label {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: 9px;
|
||
|
|
color: var(--text-dim);
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
</style>
|