From 1c829f9177eab675b22be4d20ef2761ed1bbb423 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期二, 15 九月 2026 16:15:48 +0800
Subject: [PATCH] refactor(layout): 调整布局样式并优化轮播卡片组件
---
src/views/reportAnalysis/productionAnalysis/components/center-top.vue | 54 +++++++++++++++++++++++++++++++++---------------------
1 files changed, 33 insertions(+), 21 deletions(-)
diff --git a/src/views/reportAnalysis/productionAnalysis/components/center-top.vue b/src/views/reportAnalysis/productionAnalysis/components/center-top.vue
index 7201828..40603ef 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/center-top.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/center-top.vue
@@ -5,12 +5,11 @@
<div
v-for="item in statItems"
:key="item.name"
- class="stat-card"
+ class="stat-card bi-panel"
>
- <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
<div class="card-content">
<span class="card-label">{{ item.name }}</span>
- <span class="card-value">{{ item.value }}</span>
+ <span class="card-value bi-num">{{ item.value }}</span>
<div class="card-compare" :class="compareClass(Number(item.rate))">
<span>鍚屾瘮</span>
<span class="compare-value">{{ formatPercent(item.rate) }}</span>
@@ -18,6 +17,7 @@
</div>
</div>
</div>
+ <div v-if="!statItems.length" class="stats-empty bi-panel">鏆傛棤鏁版嵁</div>
</div>
</div>
@@ -67,38 +67,41 @@
flex: 1;
display: flex;
align-items: center;
- background-image: url('@/assets/BI/border@2x.png');
- background-size: 100% 100%;
- background-position: center;
- background-repeat: no-repeat;
+ position: relative;
height: 142px;
}
-.card-icon {
- width: 100px;
- height: 100px;
- margin: 20px 20px 0 10px;
+/* 宸︿晶鍝佺墝钃濈珫鏉★紝鍛煎簲棣栭〉闈㈡澘鏍囬 */
+.stat-card::before {
+ content: '';
+ position: absolute;
+ left: 16px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 3px;
+ height: 64px;
+ border-radius: 2px;
+ background: var(--bi-accent);
}
.card-content {
display: flex;
flex-direction: column;
gap: 10px;
+ padding-left: 36px;
}
.card-value {
- font-weight: 500;
+ font-weight: 600;
font-size: 40px;
- background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+ line-height: 1.1;
+ color: var(--bi-text);
}
.card-label {
font-weight: 400;
font-size: 16px;
- color: rgba(208, 231, 255, 0.7);
+ color: var(--bi-text-secondary);
}
.card-compare {
@@ -106,7 +109,7 @@
align-items: center;
gap: 6px;
font-size: 15px;
- color: #d0e7ff;
+ color: var(--bi-text-secondary);
}
.card-compare > span:first-child {
@@ -121,17 +124,26 @@
.compare-icon {
font-size: 14px;
position: relative;
- top: -1px; /* 杞诲井涓婄Щ锛岃绠ご涓庢枃瀛楀瀭鐩村眳涓榻� */
+ top: -1px;
}
.compare-up .compare-value,
.compare-up .compare-icon {
- color: #00c853;
+ color: var(--bi-success);
}
.compare-down .compare-value,
.compare-down .compare-icon {
- color: #ff5252;
+ color: var(--bi-danger);
}
+.stats-empty {
+ flex: 1;
+ height: 142px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--bi-text-tertiary);
+ font-size: 14px;
+}
</style>
--
Gitblit v1.9.3