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>