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

云

5 天以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/qualityAnalysis/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>

    <!-- 主要内容区域 -->
@@ -42,7 +44,6 @@

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import autofit from 'autofit.js'
import CenterCenter from './components/center-center.vue'
import RightTop from './components/right-top.vue'
import RightBottom from './components/right-bottom.vue'
@@ -68,23 +69,21 @@
  const container = document.querySelector('.scale-container')
  if (!container) return

  // 获取容器的实际尺寸
  const rect = container.getBoundingClientRect?.()
  const containerWidth = container.clientWidth || rect?.width || window.innerWidth
  const containerHeight = container.clientHeight || rect?.height || window.innerHeight
  const containerWidth = container.clientWidth || window.innerWidth
  const containerHeight = container.clientHeight || window.innerHeight

  // 计算宽高缩放比例，取较小值以保证内容完整显示（等比缩放）
  const scaleX = containerWidth / designWidth
  const scaleY = containerHeight / designHeight
  scaleRatio.value = Math.min(scaleX, scaleY)
  // 等比缩放，取较小值保证 1920×1080 内容完整显示
  scaleRatio.value = Math.min(containerWidth / designWidth, containerHeight / designHeight)
}

// 窗口大小变化处理
// 窗口大小变化处理（rAF 节流，避免高频重排）
let resizeRafId = null
const handleResize = () => {
  // 延迟执行，确保DOM更新完成
  setTimeout(() => {
  if (resizeRafId) cancelAnimationFrame(resizeRafId)
  resizeRafId = requestAnimationFrame(() => {
    resizeRafId = null
    calculateScale()
  }, 100)
  })
}

// 全屏功能实现 - 针对scale-container元素
@@ -144,13 +143,7 @@
  window.removeEventListener('fullscreenchange', handleFullscreenChange)
  window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
  window.removeEventListener('MSFullscreenChange', handleFullscreenChange)
  // 移除我们添加的autofit动态调整监听器
  if (window._autofitUpdateHandler) {
    window.removeEventListener('resize', window._autofitUpdateHandler)
    delete window._autofitUpdateHandler
  }
  // 关闭autofit
  autofit.off()
  if (resizeRafId) cancelAnimationFrame(resizeRafId)
})
</script>

@@ -159,8 +152,8 @@
.scale-container {
position: relative;
width: 100%;
/* 页面在常规布局下（有顶栏）默认减去 84px，避免内容被裁切 */
height: calc(100vh - 84px);
/* 常规布局下减去顶栏 60 + 页签 40 = 100px，避免内容被裁切 */
height: calc(100vh - 100px);
display: flex;
align-items: center;
justify-content: center;
@@ -173,11 +166,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 */
@@ -215,20 +231,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 {
@@ -237,21 +275,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 {