修复首页问题

wangrong

2026-08-30 8954db4cf4969166961c72569dfa24645276b947

 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>