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/dataDashboard/index.vue |   81 ++++++++++++++++++++++++++++++++--------
 1 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index 67a700f..2f3b8f2 100644
--- a/src/views/reportAnalysis/dataDashboard/index.vue
+++ b/src/views/reportAnalysis/dataDashboard/index.vue
@@ -13,7 +13,9 @@
 
     <!-- 椤堕儴鏍囬鏍� -->
     <div class="dashboard-header">
+      <div class="header-line"></div>
       <div class="factory-name">鍩虹鏁版嵁</div>
+      <div class="header-line header-line-right"></div>
     </div>
 
     <!-- 涓昏鍐呭鍖哄煙 -->
@@ -163,7 +165,7 @@
 position: relative;
 width: 100%;
 /* 椤甸潰鍦ㄥ父瑙勫竷灞�涓嬶紙鏈夐《鏍忥級榛樿鍑忓幓 84px锛岄伩鍏嶅唴瀹硅瑁佸垏 */
-height: calc(100vh - 84px);
+height: calc(100vh - 100px);
 display: flex;
 align-items: center;
 justify-content: center;
@@ -176,11 +178,34 @@
 position: relative;
 width: 1920px;
 height: 1080px;
-background-image: url("@/assets/BI/backImage@2x.png");
-background-size: cover;
-background-position: center;
-background-repeat: no-repeat;
 transform-origin: center center;
+
+/* 澶у睆涓婚浠ょ墝锛屽瓙缁勪欢閫氳繃 CSS 鍙橀噺缁ф壙 */
+--bi-panel-bg: rgba(20, 32, 66, 0.55);
+--bi-panel-border: #1e3160;
+--bi-text: #8fa3c8;
+--bi-text-strong: #eaf1ff;
+--bi-accent: #2c51d9;
+--bi-accent-bright: #4a6cf0;
+--bi-up: #34c77b;
+--bi-down: #ff6b6b;
+
+background:
+  radial-gradient(1200px 600px at 50% -10%, rgba(44, 81, 217, 0.18) 0%, transparent 60%),
+  linear-gradient(180deg, #0a1229 0%, #0d1834 55%, #0a1430 100%);
+}
+
+/* 鏋佹贰缃戞牸绾圭悊锛屾浛浠ｆā鏉挎劅搴曞浘 */
+.data-dashboard::before {
+content: '';
+position: absolute;
+inset: 0;
+pointer-events: none;
+background-image:
+  linear-gradient(rgba(74, 108, 240, 0.045) 1px, transparent 1px),
+  linear-gradient(90deg, rgba(74, 108, 240, 0.045) 1px, transparent 1px);
+background-size: 48px 48px;
+mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 100%);
 }
 
 /* 鍏ㄥ睆鐘舵�佺殑鏍峰紡 - 浣滅敤浜巗cale-container */
@@ -218,20 +243,42 @@
 position: relative;
 z-index: 1;
 height: 86px;
-background-image: url("@/assets/BI/biaoti.png");
-background-size: cover;
-background-repeat: no-repeat;
 display: flex;
 align-items: center;
 justify-content: center;
+gap: 28px;
+}
+
+/* 鏍囬涓や晶娓愰殣鍒嗛殧绾� */
+.header-line {
+width: 420px;
+height: 1px;
+background: linear-gradient(90deg, transparent 0%, rgba(74, 108, 240, 0.5) 100%);
+}
+
+.header-line-right {
+background: linear-gradient(270deg, transparent 0%, rgba(74, 108, 240, 0.5) 100%);
 }
 
 .factory-name {
 font-weight: 600;
-font-size: 52px;
-color: #FFFFFF;
-top: 16px;
+font-size: 30px;
+letter-spacing: 4px;
+color: var(--bi-text-strong);
+position: relative;
+white-space: nowrap;
+}
+
+.factory-name::after {
+content: '';
 position: absolute;
+left: 50%;
+bottom: -8px;
+transform: translateX(-50%);
+width: 48px;
+height: 2px;
+background: var(--bi-accent-bright);
+border-radius: 1px;
 }
 
 .fullscreen-btn {
@@ -240,21 +287,21 @@
 left: 20px;
 width: 40px;
 height: 40px;
-background: rgba(0, 20, 60, 0.8);
-border: 1px solid rgba(0, 212, 255, 0.3);
+background: var(--bi-panel-bg);
+border: 1px solid var(--bi-panel-border);
 border-radius: 6px;
-color: #00d4ff;
+color: var(--bi-text);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
-transition: all 0.3s;
+transition: color 0.2s ease, border-color 0.2s ease;
 z-index: 10000;
 }
 
 .fullscreen-btn:hover {
-background: rgba(0, 30, 90, 0.9);
-border-color: rgba(0, 212, 255, 0.5);
+color: var(--bi-text-strong);
+border-color: var(--bi-accent-bright);
 }
 
 .dashboard-content {

--
Gitblit v1.9.3