增加首页大屏显示

wangrong

2026-08-28 17b92e9b60dda6dcc20c748046a5ff3c3958d52e

 src/modules/report/components/kpi-card.vue

@@ -1,6 +1,9 @@
<template>
   <div class="kpi-card" :class="{ 'is-alert': alert }">
      <div class="kpi-card__label">{{ label }}</div>
   <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__value">
         <cl-number :value="numeric" :fixed="fixed" type="amount" :suffix="suffix" />
      </div>
@@ -18,6 +21,7 @@
   fixed?: number;
   hint?: string;
   alert?: boolean;
   demo?: boolean;
}>();

const numeric = computed(() => Number(props.value) || 0);
@@ -33,8 +37,15 @@
   min-height: 96px;

   &__label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--el-text-color-secondary);
   }

   &__badge {
      transform: scale(0.92);
   }

   &__value {
@@ -66,5 +77,9 @@
         color: var(--el-color-danger);
      }
   }

   &.is-demo:not(.is-alert) {
      border-style: dashed;
   }
}
</style>