+
{{ item.avatar }}
@@ -93,12 +94,12 @@
-
+
-
预算执行率（本月）
+ 预算执行率（本月）
-
+
@@ -163,18 +164,23 @@ const formatCompact = (value) => {
const formatCurrency = (value) => formatCompact(value)
-const kpiMetrics = computed(() => metricBlueprints.map((metric) => {
+const formatMetricValue = (metric, value) => {
+ if (metric.key === 'pendingAmount') return formatCurrency(Math.round(value))
+ if (metric.key === 'avgSla') return `${value.toFixed(1)} ${metric.unit}`
+ if (metric.unit === '%') return `${Math.round(value)} ${metric.unit}`
+ if (metric.unit) return `${Math.round(value)} ${metric.unit}`
+ return `${Math.round(value)}`
+}
+
+const kpiMetrics = computed(() => metricBlueprints.map((metric, index) => {
const rawValue = demoTotals[metric.key]
- const displayValue = metric.key === 'pendingAmount'
- ? formatCurrency(rawValue)
- : metric.unit && !String(rawValue).endsWith(metric.unit)
- ? `${rawValue} ${metric.unit}`
- : `${rawValue}`
+ const displayValue = formatMetricValue(metric, rawValue)
return {
...metric,
displayValue,
- changeText: metric.change
+ changeText: metric.change,
+ delay: index * 55
}
}))
@@ -222,86 +228,104 @@ const rankedDepartments = computed(() => {
}
.kpi-card {
- padding: 20px;
+ position: relative;
+ padding: 20px 20px 16px;
display: flex;
flex-direction: column;
- gap: 0;
+ border-left: 3px solid var(--accent);
+ animation: dashboardItemIn 520ms var(--ease) both;
+ animation-delay: var(--delay, 0ms);
+ transition: box-shadow 200ms ease, transform 200ms ease;
}
-.kpi-top {
- flex: 1;
+.kpi-card:hover {
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+ transform: translateY(-1px);
+}
+
+.kpi-head {
display: flex;
- align-items: flex-start;
- justify-content: space-between;
+ align-items: center;
gap: 10px;
+ margin-bottom: 16px;
}
-.kpi-top > div {
- min-width: 0;
- overflow: hidden;
+.kpi-icon {
+ width: 36px;
+ height: 36px;
+ display: grid;
+ place-items: center;
+ border-radius: 8px;
+ background: color-mix(in srgb, var(--accent) 10%, white);
+ color: var(--accent);
+ font-size: 18px;
+ flex: 0 0 auto;
+ animation: iconPop 560ms var(--ease) both;
+ animation-delay: calc(var(--delay, 0ms) + 100ms);
}
-.kpi-top p {
- margin: 0 0 6px;
+.kpi-label {
color: #64748b;
font-size: 13px;
+ font-weight: 500;
+ line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-.kpi-top strong {
+.kpi-value {
display: block;
- color: #1e293b;
- font-size: clamp(18px, 1.6vw, 22px);
- line-height: 1.2;
- font-weight: 700;
+ height: 32px;
+ line-height: 32px;
+ color: #0f172a;
+ font-size: clamp(20px, 1.6vw, 26px);
+ line-height: 1;
+ font-weight: 800;
font-variant-numeric: tabular-nums;
white-space: nowrap;
+ margin-bottom: 16px;
+ letter-spacing: 0;
}
-.kpi-icon {
- width: 44px;
- height: 44px;
- display: grid;
- place-items: center;
- border-radius: 10px;
- background: color-mix(in srgb, var(--accent) 10%, white);
- color: var(--accent);
- font-size: 20px;
- flex: 0 0 auto;
-}
-
-.kpi-bottom {
+.kpi-trend {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
- margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
}
-.kpi-bottom span {
+.kpi-badge {
display: inline-flex;
align-items: center;
- gap: 4px;
- font-size: 13px;
- font-weight: 600;
+ gap: 3px;
+ padding: 2px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 1.6;
}
-.kpi-bottom.up span {
+.kpi-badge.up {
+ background: rgba(239, 68, 68, 0.08);
color: #dc2626;
}
-.kpi-bottom.down span {
+.kpi-badge.down {
+ background: rgba(22, 163, 74, 0.08);
color: #16a34a;
}
-.kpi-bottom small {
+.kpi-badge .mdi {
+ font-size: 13px;
+}
+
+.kpi-delta {
color: #94a3b8;
font-size: 12px;
- text-align: right;
+ white-space: nowrap;
}
.content-grid {
@@ -313,8 +337,16 @@ const rankedDepartments = computed(() => {
.dashboard-card {
padding: 20px;
transition: box-shadow 200ms ease, transform 200ms ease;
+ animation: dashboardItemIn 560ms var(--ease) both;
}
+.top-grid .dashboard-card:nth-child(1) { animation-delay: 80ms; }
+.top-grid .dashboard-card:nth-child(2) { animation-delay: 150ms; }
+.top-grid .dashboard-card:nth-child(3) { animation-delay: 220ms; }
+.bottom-grid .dashboard-card:nth-child(1) { animation-delay: 290ms; }
+.bottom-grid .dashboard-card:nth-child(2) { animation-delay: 360ms; }
+.bottom-grid .dashboard-card:nth-child(3) { animation-delay: 430ms; }
+
.dashboard-card:hover {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
@@ -346,7 +378,7 @@ const rankedDepartments = computed(() => {
line-height: 1.35;
}
-.card-head .pi {
+.card-head .mdi {
color: #94a3b8;
font-size: 12px;
vertical-align: 1px;
@@ -393,6 +425,8 @@ const rankedDepartments = computed(() => {
align-items: center;
justify-content: space-between;
gap: 12px;
+ animation: listRowIn 460ms var(--ease) both;
+ animation-delay: var(--delay, 0ms);
}
.reviewer {
@@ -472,6 +506,51 @@ const rankedDepartments = computed(() => {
font-size: 14px;
}
+@keyframes dashboardItemIn {
+ from {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes listRowIn {
+ from {
+ opacity: 0;
+ transform: translateX(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes iconPop {
+ 0% {
+ opacity: 0;
+ transform: scale(.82);
+ }
+ 70% {
+ opacity: 1;
+ transform: scale(1.04);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .kpi-card,
+ .dashboard-card,
+ .bottleneck-row {
+ animation: none;
+ }
+}
+
@media (max-width: 1320px) {
.kpi-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
diff --git a/src/views/PoliciesView.vue b/src/views/PoliciesView.vue
index 78f10e6..4429856 100644
--- a/src/views/PoliciesView.vue
+++ b/src/views/PoliciesView.vue
@@ -6,7 +6,7 @@
-
{{ item.label }}
+
{{ item.label }}
{{ item.value }}
{{ item.meta }}
-
+
拖拽文档到此处，或点击上传
支持 PDF / Word / Excel / PPT 文档，单个文件不超过 100MB
@@ -53,7 +53,7 @@
| 文件名称 |
标签 |
- 上传时间 |
+ 上传时间 |
版本 |
状态 |
上传人 |
@@ -75,7 +75,7 @@
{{ doc.version }} |
{{ doc.state }} |
{{ doc.owner }} |
- |
+ |
@@ -83,12 +83,12 @@
@@ -100,7 +100,7 @@