refactor(layout): 调整布局样式并优化轮播卡片组件

云

3 天以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 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%);
}

/* 全屏状态的样式 - 作用于scale-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 {