career-fair-display：Glassmorphism × Cyberpunk 招聘会数据大屏

背景#

招聘会现场需要一个数据大屏——滚动展示参会企业、实时签到人数、行业/城市分布、学生签到轮播。要求：

单屏布局，一页展示所有数据（不能滚动）
有科技感，但不花哨
静态部署，不需要数据库
能在两小时内做出来

于是有了这个 Glassmorphism（毛玻璃）+ Cyberpunk 风格的大屏。

视觉设计#

Glassmorphism 核心#

Glassmorphism 是近年最热门的 UI 趋势之一。核心 CSS：

1
.glass-panel {
2
  background: rgba(255, 255, 255, 0.05);
3
  backdrop-filter: blur(16px) saturate(180%);
4
  border: 1px solid rgba(255, 255, 255, 0.1);
5
  border-radius: 12px;
6
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
7
}

关键要素：

半透明背景: rgba(255,255,255,0.05) — 极低的不透明度让背景色透出
backdrop-filter: blur(16px) 模糊背后内容 + saturate(180%) 增强色彩
微边框: 1px 半透明白色，不是真的为可见，而是为面板提供”存在感”
深阴影: 增加 Z 轴层次感

Cyberpunk 装饰#

毛玻璃是”干净”的，Cyberpunk 需要”粗粝感”。两种风格的融合点在于装饰层：

1
/* 点阵背景 — 致敬赛博朋克的像素感 */
2
body::before {
3
  content: '';
4
  position: fixed;
5
  inset: 0;
6
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
7
  background-size: 24px 24px;
8
  pointer-events: none;
9
}
10

11
/* 面板角标 — 发光边框装饰 */
12
.panel-corner::before {
13
  content: '';
14
  position: absolute;
15
  top: 0; left: 0;
16
  width: 20px; height: 20px;
17
  border-top: 2px solid #22d3ee;
18
  border-left: 2px solid #22d3ee;
19
  /* 左上角青色发光 */
20
}
21

22
.panel-corner::after {
23
  content: '';
24
  position: absolute;
25
  bottom: 0; right: 0;
26
  width: 20px; height: 20px;
27
  border-bottom: 2px solid #a855f7;
28
  border-right: 2px solid #a855f7;
29
  /* 右下角紫色发光 */
30
}

8 种预设主题#

用 CSS 自定义属性实现一键切换：

1
:root {
2
  --bg-primary: #1e3060;
3
  --accent: #2563eb;
4
  --glass-bg: rgba(255,255,255,0.05);
5
}
6

7
[data-theme="emerald"] {
8
  --bg-primary: #064e3b;
9
  --accent: #10b981;
10
}
11

12
[data-theme="midnight"] {
13
  --bg-primary: #1e1b4b;
14
  --accent: #6366f1;
15
}

切换主题只需要 document.documentElement.dataset.theme = 'emerald'，无需重新渲染。所有颜色通过 var(--bg-primary) 引用。

布局策略#

1
┌──────────────────────────────────────────────────┐
2
│  统计卡片(岗位/人数/企业)     │ 标题  │  实时时钟  │
3
├───────────────┬──────────────┼───────────────────┤
4
│ 行业分布(饼图) │ 企业滚动列表  │ 签到人数(环形图)  │
5
│               │              ├───────────────────┤
6
│               │              │ 签到分布(柱状图)  │
7
├───────────────┼──────────────┼───────────────────┤
8
│ 地点分布(饼图) │ 性质分布(饼图) │ 学生签到(轮播)    │
9
└───────────────┴──────────────┴───────────────────┘

CSS Grid 实现 3×3 自适应：

1
.dashboard {
2
  display: grid;
3
  grid-template-columns: 1fr 1fr 1fr;
4
  grid-template-rows: auto 1fr 1fr;
5
  gap: 16px;
6
  height: 100vh;
7
  padding: 16px;
8
}

没有媒体查询。三列均分天然适配 1920×1080 到 3840×2160。响应式在这里不是”堆叠”，而是”等比缩放”。

Mock API 设计#

项目使用原生 Node.js HTTP 服务器模拟数据接口：

1
const http = require('http');
2
const data = require('./data.json');
3

4
const server = http.createServer((req, res) => {
5
  res.setHeader('Access-Control-Allow-Origin', '*');
6
  res.setHeader('Content-Type', 'application/json');
7

8
  if (req.url.startsWith('/api/panel')) {
9
    // 返回招聘会完整数据
10
    res.end(JSON.stringify(data));
11
  } else if (req.url.startsWith('/api/panel/checkins/recent')) {
12
    // 模拟实时签到 — 从数据中随机选取并打乱时间戳
13
    const recent = data.checkins
14
      .sort(() => Math.random() - 0.5)
15
      .slice(0, 20)
16
      .map(c => ({ ...c, timestamp: Date.now() - Math.random() * 60000 }));
17
    res.end(JSON.stringify(recent));
18
  }
19
});
20

21
server.listen(3456);

这个 Mock 服务让前端可以不依赖后端独立开发和演示。实际部署时，只需把 data.json 换成真实 API。

ECharts 集成#

大屏用了 5 个 ECharts 实例：

图表	类型	用途
行业分布	饼图	点击扇区筛选右边企业列表
地点分布	饼图	城市统计
性质分布	饼图	民企/国企/外企/合资/上市
签到率	环形图	签到/未签到占比
签到分布	柱状图	学校/专业人数排名

图表交互：

1
// 点击行业饼图 → 过滤企业列表
2
chart.on('click', ({ name }) => {
3
  const filtered = companies.filter(c => c.industry === name);
4
  renderCompanyList(filtered);
5
});

在线演示: career-fair-display.pages.dev · 源码: github.com/CHN-DST/career-fair-display