第十六天：从零搭建工业大屏 — Grid 布局 + 深色主题 + 设备卡片
蜗牛往上爬 · 前端工业可视化学习笔记 第 16 篇
今天是阶段0的"期末考试"——把前 5 周学的 HTML 语义化、CSS 盒模型、Flex 布局、Grid 布局、响应式、动效全部整合到一个项目中，从零搭建一个智慧工厂监控大屏。纯 HTML+CSS，不加任何 JS。
目录
一、大屏的整体设计思路
在动手写代码之前，先想清楚布局：
┌──────────────────────────────────────────────┐
│ 顶部标题栏（header） │ ← 60px 高
├──────────┬──────────────────┬────────────────┤
│ 左侧边栏 │ 中间图表区 │ 右侧边栏 │
│ (left) │ (main) │ (right) │ ← 自适应高度
│ 280px │ 1fr │ 280px │
├──────────┴──────────────────┴────────────────┤
│ 底部滚动告警条（footer） │ ← 40px 高
└──────────────────────────────────────────────┘
这是大屏最经典的 “三栏 + 头尾” 布局。用 Grid 的 grid-template-areas 来实现最直观。
二、Grid 五区域布局
.dashboard {
display: grid;
grid-template-areas:
"header header header"
"left main right"
"footer footer footer";
grid-template-columns: 280px 1fr 280px;
grid-template-rows: 60px 1fr 40px;
height: 100vh;
gap: 1px;
background: var(--border-color); /* gap 的背景色，形成"边框线"效果 */
}
关键点：
grid-template-areas用字符串直观描述布局，比行列号更容易理解grid-template-columns: 280px 1fr 280px— 两侧固定宽度，中间自适应height: 100vh— 占满整个视口高度gap: 1px+ 背景色 — 用 1px 间隙制造"发光边框线"的视觉效果
三、深色工业风配色方案
配色是工业大屏的视觉灵魂。用 CSS 变量统一管理，方便后续换肤：
:root {
--bg-primary: #0a0e17; /* 最深色：主背景 */
--bg-secondary: #111827; /* 次深色：面板背景 */
--bg-tertiary: #1a2332; /* 稍浅色：卡片背景 */
--border-color: #1e3a5f; /* 边框色：深蓝灰 */
--text-primary: #e0e6ed; /* 主文字：浅灰白 */
--text-secondary: #8899aa; /* 次文字：蓝灰 */
--accent-blue: #00d4ff; /* 强调蓝：用于标题、数据 */
--accent-green: #00ff88; /* 强调绿：正常状态 */
--accent-orange: #ff8c00; /* 警告橙 */
--accent-red: #ff3b3b; /* 危险红 */
}
设计思路：深色背景 + 荧光色强调，这是工业大屏的经典配色公式。荧光色在深色背景上格外醒目，数据一目了然。
四、顶部标题栏
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
/* 底部渐变装饰线 — 从透明到蓝色再到透明 */
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, transparent, var(--accent-blue), transparent) 1;
}
.header__title {
font-size: 20px;
letter-spacing: 4px;
/* 渐变色文字 — 蓝到绿 */
background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header__time {
font-family: 'Courier New', monospace;
font-size: 16px;
color: var(--text-secondary);
letter-spacing: 2px;
}
关键技巧：
border-image实现渐变装饰线，比纯色边框更有科技感background-clip: text实现渐变色文字，工业大屏常用等宽字体显示时间，数字对齐更整齐
五、左侧设备状态卡片
设备卡片是工业大屏最常见的组件，每种设备一张卡片，包含名称、状态、关键指标。
<div class="device-card">
<div class="device-card__header">
<span class="device-card__name">CNC-001 数控机床</span>
<span class="device-card__status device-card__status--running">运行中</span>
</div>
<div class="device-card__body">
<div class="device-card__metric">
<span class="device-card__label">转速</span>
<span class="device-card__value">1200 rpm</span>
</div>
<div class="device-card__metric">
<span class="device-card__label">温度</span>
<span class="device-card__value">65°C</span>
</div>
</div>
<!-- 左侧状态指示条 -->
<div class="device-card__indicator device-card__indicator--normal"></div>
</div>
.device-card {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
position: relative; /* 为左侧指示条提供定位上下文 */
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.device-card:hover {
border-color: var(--accent-blue);
transform: translateX(4px); /* 悬停时微微右移 */
}
/* 左侧状态指示条 */
.device-card__indicator {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
}
.device-card__indicator--normal { background: var(--accent-green); }
.device-card__indicator--warning { background: var(--accent-orange); }
.device-card__indicator--danger { background: var(--accent-red); }
设计要点：
左侧彩色竖条一眼就能看出设备状态（绿/橙/红）
hover 时边框变色 + 微微右移，交互反馈清晰
BEM 命名：
device-card__status--running，一目了然
六、右侧生产指标面板
<div class="metric-card">
<div class="metric-card__label">产能利用率</div>
<div class="metric-card__value metric-card__value--large">
87.5<span class="metric-card__unit">%</span>
</div>
<!-- 进度条 -->
<div class="metric-card__bar">
<div class="metric-card__fill" style="width: 87.5%;"></div>
</div>
</div>
.metric-card__value--large {
font-family: 'Courier New', monospace;
font-size: 28px;
font-weight: 700;
color: var(--accent-blue);
}
.metric-card__bar {
height: 4px;
background: var(--bg-primary);
border-radius: 2px;
overflow: hidden;
}
.metric-card__fill {
height: 100%;
background: var(--accent-blue);
border-radius: 2px;
}
设计要点：
大号等宽数字 + 单位小字，工业仪表盘风格
进度条用
width百分比控制，后续可以做成动画
七、中间图表占位区域
图表区域目前用占位符代替，后续用 ECharts 实现。关键是用 Grid 把 4 个图表卡片排列好：
.chart-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
height: 100%;
padding: 8px;
}
.chart-card--large {
grid-column: 1 / -1; /* 占满一整行 */
}
占位区域用虚线边框 + 图标 + 提示文字，既好看又明确告诉用户"这里是图表"。
八、底部滚动告警条
.marquee__inner {
display: flex;
gap: 48px;
white-space: nowrap;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* 移动自身一半 */
}
无缝滚动的原理：把内容复制一份，动画从 0 移动到 -50%（即移动自身一半），当第一份移出视口时，第二份刚好补上，视觉上无缝衔接。
九、动手练：完整代码
完整的 HTML 和 CSS 代码见学习笔记 week6-comprehensive-practice.md。
建议按这个顺序练习：
Day 1：搭骨架 — HTML 结构 + Grid 五区域布局
Day 2：填内容 — 标题栏、设备列表、指标面板
Day 3：图表区 — 图表占位卡片 + 底部滚动条
Day 4：加动效 — 呼吸灯、hover、数字跳动
十、常见坑点与最佳实践
坑点 1：Grid 区域不显示
/* ❌ 错误：grid-template-areas 的名称必须和 grid-area 完全一致 */
.sidebar-left { grid-area: left; }
/* ✅ 正确：HTML 中用的是 .sidebar--left，CSS 用 grid-area: left */
.sidebar--left { grid-area: left; }
坑点 2：overflow: hidden 导致内容被裁切
/* 大屏场景通常设 overflow: hidden 防止双滚动条 */
body { overflow: hidden; }
/* 但侧边栏内容多时需要内部滚动 */
.sidebar--left { overflow-y: auto; }
坑点 3：跑马灯不滚动
/* ❌ 错误：忘记设 white-space: nowrap，文字会换行 */
.marquee__inner { display: flex; }
/* ✅ 正确 */
.marquee__inner {
display: flex;
white-space: nowrap;
flex-wrap: nowrap; /* 确保不换行 */
}
坑点 4：CSS 变量没生效
/* 确保变量定义在 :root 中，且在使用之前 */
:root { --accent-blue: #00d4ff; } /* 先定义 */
.header { color: var(--accent-blue); } /* 后使用 */
十一、总结
🎉 完成这个大屏页面，你就正式从 HTML/CSS 阶段毕业了！接下来进入阶段1：JavaScript 核心基础，让大屏真正"活"起来。