From 8954db4cf4969166961c72569dfa24645276b947 Mon Sep 17 00:00:00 2001
From: wangrong <wangrong@shsening.com>
Date: 星期日, 30 八月 2026 11:48:15 +0800
Subject: [PATCH] 修复首页问题
---
src/modules/report/components/kpi-card.vue | 61 +++++++++++++++++++-----------
1 files changed, 38 insertions(+), 23 deletions(-)
diff --git a/src/modules/report/components/kpi-card.vue b/src/modules/report/components/kpi-card.vue
index ed1c0ce..151ebe0 100644
--- a/src/modules/report/components/kpi-card.vue
+++ b/src/modules/report/components/kpi-card.vue
@@ -1,13 +1,10 @@
<template>
- <div class="kpi-card" :class="{ 'is-alert': alert, 'is-demo': demo }">
- <div class="kpi-card__label">
- <span>{{ label }}</span>
- <el-tag v-if="demo" class="kpi-card__badge" type="info" effect="plain" size="small">婕旂ず</el-tag>
- </div>
+ <div class="kpi-card" :class="{ 'is-alert': alert }">
+ <div class="kpi-card__label" :title="label">{{ label }}</div>
<div class="kpi-card__value">
<cl-number :value="numeric" :fixed="fixed" type="amount" :suffix="suffix" />
</div>
- <div v-if="hint" class="kpi-card__hint">{{ hint }}</div>
+ <div class="kpi-card__hint" :title="hint || ''">{{ hint || '\u00A0' }}</div>
</div>
</template>
@@ -21,6 +18,7 @@
fixed?: number;
hint?: string;
alert?: boolean;
+ /** @deprecated 棣栭〉涓嶅啀灞曠ず婕旂ず鏍囪瘑锛屼繚鐣� prop 浠ュ厤璋冪敤鏂规姤閿� */
demo?: boolean;
}>();
@@ -29,31 +27,47 @@
<style lang="scss" scoped>
.kpi-card {
- padding: 14px 16px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 112px;
+ padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--el-border-color-extra-light);
background: var(--el-bg-color);
color: var(--el-text-color-primary);
- min-height: 96px;
+ overflow: hidden;
&__label {
- display: flex;
- align-items: center;
- gap: 6px;
+ flex-shrink: 0;
+ height: 20px;
+ line-height: 20px;
font-size: 13px;
color: var(--el-text-color-secondary);
- }
-
- &__badge {
- transform: scale(0.92);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
&__value {
- margin-top: 8px;
- font-size: 26px;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ min-height: 0;
+ margin: 4px 0;
+ font-size: 24px;
font-weight: 700;
- line-height: 1.2;
+ line-height: 1.15;
color: var(--el-text-color-primary);
+ overflow: hidden;
+
+ :deep(.cl-number) {
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
:deep(.cl-number__suffix) {
margin-left: 4px;
@@ -64,9 +78,14 @@
}
&__hint {
- margin-top: 8px;
+ flex-shrink: 0;
+ height: 18px;
+ line-height: 18px;
font-size: 12px;
color: var(--el-text-color-secondary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
&.is-alert {
@@ -76,10 +95,6 @@
.kpi-card__value {
color: var(--el-color-danger);
}
- }
-
- &.is-demo:not(.is-alert) {
- border-style: dashed;
}
}
</style>
--
Gitblit v1.9.1