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-bottom.vue | 35 +++++++++++++++++++----------------
1 files changed, 19 insertions(+), 16 deletions(-)
diff --git a/src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue b/src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue
index 46a870a..216af11 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue
@@ -2,7 +2,7 @@
<div>
<PanelHeader title="鐢熶骇璁㈠崟瀹屾垚杩涘害" />
<div class="main-panel">
- <div class="panel-item-customers">
+ <div class="panel-item-customers bi-panel">
<CarouselCards :items="cardItems" :visible-count="4" />
<div
class="progress-table-container"
@@ -55,6 +55,7 @@
import { getProgressStatistics } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
+import { BI_COLORS } from '../theme.js'
const progressTableRef = ref(null)
const progressTableScrollTimer = ref(null)
@@ -92,10 +93,10 @@
// 鏍规嵁杩涘害鐧惧垎姣旇繑鍥為鑹�
const progressColor = (percentage) => {
const p = percentage || 0
- if (p < 30) return '#f56c6c'
- if (p < 50) return '#e6a23c'
- if (p < 80) return '#409eff'
- return '#67c23a'
+ if (p < 30) return BI_COLORS.red
+ if (p < 50) return BI_COLORS.amber
+ if (p < 80) return BI_COLORS.primary
+ return BI_COLORS.green
}
const setRowRef = (el, index) => {
@@ -248,17 +249,19 @@
}
.panel-item-customers {
- border: 1px solid #1a58b0;
padding: 18px;
width: 100%;
height: 428px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
}
.progress-table-container {
- height: 320px;
+ flex: 1;
+ min-height: 0;
overflow-y: auto;
overflow-x: hidden;
- margin-top: 10px;
scrollbar-width: none;
-ms-overflow-style: none;
}
@@ -270,7 +273,7 @@
.progress-table {
width: 100%;
border-collapse: collapse;
- color: #b8c8e0;
+ color: var(--bi-text-secondary);
font-size: 12px;
table-layout: fixed;
}
@@ -278,7 +281,7 @@
.progress-table thead {
position: sticky;
top: 0;
- background-color: rgba(26, 88, 176, 0.9);
+ background-color: var(--bi-surface-2);
z-index: 10;
}
@@ -286,8 +289,8 @@
padding: 8px 6px;
text-align: left;
font-weight: 500;
- border-bottom: 1px solid rgba(184, 200, 224, 0.3);
- color: #b8c8e0;
+ border-bottom: 1px solid var(--bi-divider);
+ color: var(--bi-text);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
@@ -320,7 +323,7 @@
.progress-table td {
padding: 8px 6px;
- border-bottom: 1px solid rgba(184, 200, 224, 0.1);
+ border-bottom: 1px solid var(--bi-divider);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -329,7 +332,7 @@
}
.progress-table tbody tr:hover {
- background-color: rgba(184, 200, 224, 0.1);
+ background-color: rgba(159, 176, 207, 0.06);
}
.progress-table tbody tr.row-under-header {
@@ -341,11 +344,11 @@
}
.progress-table :deep(.el-progress-bar__outer) {
- background-color: rgba(184, 200, 224, 0.2);
+ background-color: rgba(159, 176, 207, 0.15);
}
.progress-table :deep(.el-progress__text) {
- color: #b8c8e0;
+ color: var(--bi-text-secondary);
font-size: 11px;
}
</style>
--
Gitblit v1.9.3