|
|
@@ -51,11 +51,21 @@
|
|
|
<ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
|
|
|
<div class="stats-cards">
|
|
|
<div class="stats-card stats-card--expired">
|
|
|
- <div class="stats-card__label">已过期</div>
|
|
|
+ <div class="stats-card__header">
|
|
|
+ <el-icon class="stats-card__icon" :size="28">
|
|
|
+ <Icon icon="ep:info-filled" />
|
|
|
+ </el-icon>
|
|
|
+ <div class="stats-card__label">已过期</div>
|
|
|
+ </div>
|
|
|
<div class="stats-card__value text-[40px]! pt-10">{{ expired }}</div>
|
|
|
</div>
|
|
|
<div class="stats-card stats-card--warn">
|
|
|
- <div class="stats-card__label">90天预警</div>
|
|
|
+ <div class="stats-card__header">
|
|
|
+ <el-icon class="stats-card__icon" :size="28">
|
|
|
+ <Icon icon="ep:bell-filled" />
|
|
|
+ </el-icon>
|
|
|
+ <div class="stats-card__label">90天预警</div>
|
|
|
+ </div>
|
|
|
<div class="stats-card__value text-[40px]! pt-10">{{ warn }}</div>
|
|
|
</div>
|
|
|
<div class="stats-chart-card">
|
|
|
@@ -66,7 +76,7 @@
|
|
|
<zm-table
|
|
|
:loading="loading"
|
|
|
:data="list"
|
|
|
- height="calc(72.5vh - 150px)"
|
|
|
+ height="calc(49vh - 150px)"
|
|
|
:show-overflow-tooltip="true"
|
|
|
:row-style="tableRowStyle"
|
|
|
:row-class-name="tableRowClassName">
|
|
|
@@ -1000,6 +1010,73 @@ onUnmounted(() => {
|
|
|
margin-top: 6px;
|
|
|
}
|
|
|
|
|
|
+.stats-card {
|
|
|
+ padding: 14px 16px;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
|
|
|
+ border: 1px solid #e4ecf7;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 4px 12px rgb(31 91 184 / 8%);
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card__header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card__icon {
|
|
|
+ color: inherit;
|
|
|
+ opacity: 0.85;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card__label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #6b7280;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card__value {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
+ color: #1f5bb8;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card__desc {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #9ca3af;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card--expired {
|
|
|
+ background: linear-gradient(180deg, #fff4f4 0%, #ffe8e8 100%);
|
|
|
+ border-color: #ffcfcf;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card--expired .stats-card__value {
|
|
|
+ color: #de3b3b;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card--expired .stats-card__icon {
|
|
|
+ color: #de3b3b;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card--warn {
|
|
|
+ background: linear-gradient(180deg, #fff8ef 0%, #ffeed9 100%);
|
|
|
+ border-color: #ffd7a1;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card--warn .stats-card__value {
|
|
|
+ color: #d97706;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card--warn .stats-card__icon {
|
|
|
+ color: #d97706;
|
|
|
+}
|
|
|
+
|
|
|
/* 过期行的红色背景 - 基础状态 */
|
|
|
:deep(.el-table__body tr.expired-row > td.el-table__cell) {
|
|
|
background-color: #ffe6e6 !important;
|
