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

云

10 天以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/productionAnalysis/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="scale-container">
    <div class="data-dashboard" :style="{ transform: `scale(${scaleRatio})` }">
    <div class="data-dashboard dashboard-dark" :style="{ transform: `scale(${scaleRatio})` }">
    <!-- 全屏按钮 - 移动到左上角 -->
    <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏显示'">
      <svg v-if="!isFullscreen" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -164,11 +164,11 @@
position: relative;
width: 100%;
/* 页面在常规布局下（有顶栏）默认减去 84px，避免内容被裁切 */
height: calc(100vh - 84px);
height: calc(100vh - 100px);
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
background-color: #0a1120;
overflow: hidden;
}

@@ -177,10 +177,9 @@
position: relative;
width: 1920px;
height: 1080px;
background-image: url("@/assets/BI/backImage@2x.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background:
  radial-gradient(1200px 520px at 50% -10%, rgba(44, 81, 217, 0.16), transparent 60%),
  linear-gradient(180deg, var(--bi-bg-to) 0%, var(--bi-bg-from) 100%);
transform-origin: center center;
}

@@ -219,20 +218,35 @@
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;
padding: 0 80px;
}

/* 标题两侧对称渐隐细线，替代图片标题栏 */
.dashboard-header::before,
.dashboard-header::after {
content: '';
flex: 1;
height: 1px;
}

.dashboard-header::before {
background: linear-gradient(90deg, transparent, rgba(91, 140, 255, 0.4));
}

.dashboard-header::after {
background: linear-gradient(90deg, rgba(91, 140, 255, 0.4), transparent);
}

.factory-name {
font-weight: 600;
font-size: 52px;
color: #FFFFFF;
top: 16px;
position: absolute;
font-size: 36px;
letter-spacing: 6px;
color: var(--bi-text);
white-space: nowrap;
}

.fullscreen-btn {
@@ -241,21 +255,21 @@
left: 20px;
width: 40px;
height: 40px;
background: rgba(0, 20, 60, 0.8);
border: 1px solid rgba(0, 212, 255, 0.3);
border-radius: 6px;
color: #00d4ff;
background: var(--bi-surface);
border: 1px solid var(--bi-border);
border-radius: var(--app-radius-sm);
color: var(--bi-accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
transition: background-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);
background: var(--bi-surface-2);
border-color: var(--bi-accent);
}

.dashboard-content {