|
|
@@ -437,15 +437,17 @@ onBeforeUnmount(() => {
|
|
|
>
|
|
|
<span class="summary-card__shine"></span>
|
|
|
<span class="summary-card__corner"></span>
|
|
|
- <div class="summary-card__icon">
|
|
|
- <el-icon class="summary-card__icon-glyph">
|
|
|
- <component :is="card.icon" />
|
|
|
- </el-icon>
|
|
|
+ <div class="summary-card__header">
|
|
|
+ <div class="summary-card__icon">
|
|
|
+ <el-icon class="summary-card__icon-glyph">
|
|
|
+ <component :is="card.icon" />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="summary-card__label">{{ card.title }}</div>
|
|
|
</div>
|
|
|
<div class="summary-card__content">
|
|
|
- <div class="summary-card__label">{{ card.title }}</div>
|
|
|
<div class="summary-tile__meta">
|
|
|
- <span class="summary-tile__value">月度累计{{ card.value }}</span>
|
|
|
+ <span class="summary-tile__value">月度累计 {{ card.value }}</span>
|
|
|
<span class="summary-tile__note" :style="{ color: card.accent }">{{
|
|
|
card.note
|
|
|
}}</span>
|
|
|
@@ -614,19 +616,71 @@ onBeforeUnmount(() => {
|
|
|
min-height: 130px;
|
|
|
padding: 16px 14px 12px 18px;
|
|
|
border-radius: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-card__header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-card__icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: linear-gradient(135deg, rgb(255 255 255 / 74%) 0%, rgb(233 242 255 / 92%) 100%);
|
|
|
+ box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
|
|
|
+}
|
|
|
+
|
|
|
+.summary-card__icon-glyph {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #2f74de;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-card__content {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 8px;
|
|
|
}
|
|
|
|
|
|
.summary-card__title,
|
|
|
.summary-card__label {
|
|
|
font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1.4;
|
|
|
+ color: #26425f;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-tile__meta {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 4px;
|
|
|
+ margin-top: auto;
|
|
|
}
|
|
|
|
|
|
.summary-tile__value {
|
|
|
font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.2;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ color: #0f2f54;
|
|
|
}
|
|
|
|
|
|
.summary-tile__note {
|
|
|
font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1.45;
|
|
|
+ color: #6b7b92;
|
|
|
}
|
|
|
|
|
|
.board-main--static {
|
