横向左 / 中 / 右三等分纵向每一列3 块等高任意分辨率 → 比例不变每块都可放 ECharts / 表格 / 指标卡一、HTML 结构最清晰template div classscreen !-- 左侧 3 块 -- div classcolumn div classpanel v-fori in 3 :keyli左 {{ i }}/div /div !-- 中间 3 块 -- div classcolumn div classpanel v-fori in 3 :keyci中 {{ i }}/div /div !-- 右侧 3 块 -- div classcolumn div classpanel v-fori in 3 :keyri右 {{ 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等比缩放字体vh4K 不显小✅数学上就是 3 × 3 的完美九宫格四、每个 panel 里放 ECharts标准用法div classpanel refchart1/divconst 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 classcolumn div classpanel左上/div div classpanel map中间大地图/div div classpanel左下/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 classscreen div classpanel v-fori in 9 :keyi{{ i }}/div /div
vue CSS：左中右各三块开发教程
横向左 / 中 / 右三等分纵向每一列3 块等高任意分辨率 → 比例不变每块都可放 ECharts / 表格 / 指标卡一、HTML 结构最清晰template div classscreen !-- 左侧 3 块 -- div classcolumn div classpanel v-fori in 3 :keyli左 {{ i }}/div /div !-- 中间 3 块 -- div classcolumn div classpanel v-fori in 3 :keyci中 {{ i }}/div /div !-- 右侧 3 块 -- div classcolumn div classpanel v-fori in 3 :keyri右 {{ 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等比缩放字体vh4K 不显小✅数学上就是 3 × 3 的完美九宫格四、每个 panel 里放 ECharts标准用法div classpanel refchart1/divconst 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 classcolumn div classpanel左上/div div classpanel map中间大地图/div div classpanel左下/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 classscreen div classpanel v-fori in 9 :keyi{{ i }}/div /div
