165 lines
3.4 KiB
Vue
165 lines
3.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
minWidth: {
|
|
type: Number,
|
|
default: 180,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="metric-grid" :style="{ '--metric-min': `${minWidth}px` }">
|
|
<div
|
|
v-for="item in items"
|
|
:key="item?.key || item?.label"
|
|
class="metric-card"
|
|
:class="`metric-tone--${item?.tone || 'blue'}`"
|
|
>
|
|
<div class="metric-top">
|
|
<div v-if="item?.icon" class="metric-icon">
|
|
<el-icon><component :is="item.icon" /></el-icon>
|
|
</div>
|
|
<div class="metric-label">{{ item?.label || '-' }}</div>
|
|
</div>
|
|
|
|
<div class="metric-value">
|
|
<el-skeleton v-if="loading" :rows="1" animated />
|
|
<template v-else>{{ item?.value ?? 0 }}</template>
|
|
</div>
|
|
|
|
<div v-if="item?.hint || item?.sub" class="metric-hint app-muted">{{ item?.hint || item?.sub }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--metric-min), 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.metric-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 14px;
|
|
border: 1px solid var(--app-border);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.9));
|
|
box-shadow: var(--app-shadow-soft);
|
|
padding: 13px 14px;
|
|
min-height: 104px;
|
|
}
|
|
|
|
.metric-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: var(--metric-top, #3b82f6);
|
|
}
|
|
|
|
.metric-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.metric-icon {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--metric-icon-bg, rgba(59, 130, 246, 0.12));
|
|
color: var(--metric-icon-color, #1d4ed8);
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 12px;
|
|
color: #475569;
|
|
font-weight: 700;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.metric-value {
|
|
margin-top: 10px;
|
|
font-size: 26px;
|
|
line-height: 1.05;
|
|
font-weight: 900;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.metric-hint {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.metric-tone--blue {
|
|
--metric-top: linear-gradient(90deg, #3b82f6, #06b6d4);
|
|
--metric-icon-bg: rgba(59, 130, 246, 0.14);
|
|
--metric-icon-color: #1d4ed8;
|
|
}
|
|
|
|
.metric-tone--green {
|
|
--metric-top: linear-gradient(90deg, #10b981, #22c55e);
|
|
--metric-icon-bg: rgba(16, 185, 129, 0.14);
|
|
--metric-icon-color: #047857;
|
|
}
|
|
|
|
.metric-tone--purple {
|
|
--metric-top: linear-gradient(90deg, #8b5cf6, #ec4899);
|
|
--metric-icon-bg: rgba(139, 92, 246, 0.14);
|
|
--metric-icon-color: #6d28d9;
|
|
}
|
|
|
|
.metric-tone--orange {
|
|
--metric-top: linear-gradient(90deg, #f59e0b, #f97316);
|
|
--metric-icon-bg: rgba(245, 158, 11, 0.14);
|
|
--metric-icon-color: #b45309;
|
|
}
|
|
|
|
.metric-tone--red {
|
|
--metric-top: linear-gradient(90deg, #ef4444, #f43f5e);
|
|
--metric-icon-bg: rgba(239, 68, 68, 0.14);
|
|
--metric-icon-color: #b91c1c;
|
|
}
|
|
|
|
.metric-tone--cyan {
|
|
--metric-top: linear-gradient(90deg, #06b6d4, #3b82f6);
|
|
--metric-icon-bg: rgba(6, 182, 212, 0.14);
|
|
--metric-icon-color: #0e7490;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.metric-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.metric-card {
|
|
min-height: 96px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.metric-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|