vue CSS：左中右各三块开发教程

横向：左 / 中 / 右 三等分
纵向：每一列 3 块等高
任意分辨率 → 比例不变
每块都可放 ECharts / 表格 / 指标卡

一、HTML 结构（最清晰）

复制代码

<template>
  <div class="screen">
    <!-- 左侧 3 块 -->
    <div class="column">
      <div class="panel" v-for="i in 3" :key="'l'+i">左 {{ i }}</div>
    </div>

    <!-- 中间 3 块 -->
    <div class="column">
      <div class="panel" v-for="i in 3" :key="'c'+i">中 {{ i }}</div>
    </div>

    <!-- 右侧 3 块 -->
    <div class="column">
      <div class="panel" v-for="i in 3" :key="'r'+i">右 {{ i }}</div>
    </div>
  </div>
</template>

二、CSS：左中右各三块（大屏黄金写法 ✅）

复制代码

<style scoped>
html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* 全屏容器 */
.screen {
  width: 100vw;
  height: 100vh;
  display: flex;
}

/* 每一列 */
.column {
  flex: 1;                 /* ✅ 横向三等分 */
  display: flex;
  flex-direction: column;  /* ✅ 纵向排列 */
  min-width: 0;
}

/* 每一个面板 */
.panel {
  flex: 1;                 /* ✅ 纵向三等分 */
  min-height: 0;           /* ✅ 关键：防止内容撑爆 */
  margin: 1vh;             /* ✅ 间距随屏缩放 */
  box-sizing: border-box;

  background: rgba(255,255,255,0.05);
  border: 0.1vh solid rgba(255,255,255,0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6vh;
}
</style>

三、为什么这样写「一定均匀」

层级	写法	效果
横向	`.column { flex:1 }`	左 / 中 / 右各 1/3
纵向	`.panel { flex:1 }`	每列 3 块，每块 1/3
防塌陷	`min-height: 0`	内容再多也不炸
间距	`margin: 1vh`	等比缩放
字体	`vh`	4K 不显小

✅ 数学上就是 3 × 3 的完美九宫格

四、每个 panel 里放 ECharts（标准用法）

复制代码

<div class="panel" ref="chart1"></div>

const chart = echarts.init(chart1)
chart.setOption({
  series: [{
    type: 'pie',
    radius: ['45%', '70%'],
    center: ['50%', '50%']
  }]
})

✅ 不要再 series 里写 left/top

✅ 让 .panel决定位置和大小

五、常见变体（你 90% 会用到）

✅ 1. 中间一列更宽（经典驾驶舱）

复制代码

.column:nth-child(2) {
  flex: 1.2;
}

✅ 2. 中间放地图 / 大数字

复制代码

<div class="column">
  <div class="panel">左上</div>
  <div class="panel map">中间大地图</div>
  <div class="panel">左下</div>
</div>

.map {
  flex: 1.5; /* 中间块更大 */
}

✅ 3. 响应式：小屏变纵向

复制代码

@media (max-width: 1200px) {
  .screen {
    flex-direction: column;
  }
  .column {
    flex-direction: row;
  }
  .panel {
    flex: 1;
  }
}

六、Grid 版本（代码更少，但灵活性略低）

复制代码

.screen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1vh;
  width: 100vw;
  height: 100vh;
  padding: 1vh;
  box-sizing: border-box;
}

<div class="screen">
  <div class="panel" v-for="i in 9" :key="i">{{ i }}</div>
</div>