技术体验实验馆
这一页按四个实验区段展开：数据怎么走、界面怎么排、 多端怎么对齐、改动怎么被确认。所有描述都关于页面机制本身，不涉及外部承诺。
实验一 · 数据管道：从更新到呈现
把一场比赛的数据想象成一条管道：源头产生变化后，页面按固定间隔取一次快照， 经过结构化整理再渲染到面板上。演示页会为这个过程加上小状态提示， 例如最近更新时间与刷新标记。
管道里的每一步都是界面行为，只说明“数字如何被摆放”， 不代表任何实时数据的获取承诺。
- 第一步 取快照
- 按固定间隔轮询一次，页面上给出最近更新的时间戳。
- 第二步 结构化
- 把快照拆成事件、线路、对阵三个字段组，对应三块面板。
- 第三步 渲染
- 面板按字段组刷新，刷新动作伴随 1 秒内的状态提示条。
实验二 · 界面原则：清楚优先
整个站点遵循五条界面原则，它们决定了卡片、面板与文字在任意宽度下的表现。 原则只约束视觉，不限制内容本身。
- 直边小圆角卡片与面板只用 6 像素圆角，靠边线与留白分层，不依赖大圆角。
- 蓝白两色系统主蓝 #2563eb 负责状态与动作，白色承载内容，浅蓝灰做区隔。
- 细线分隔区块之间使用 1 像素细分隔线，减少大色块对注意力的争夺。
- 数字对齐面板数值右对齐并使用等宽数字，逐行比对时视线不跳动。
- 层次少而稳一屏内不超过主标题、区块、条目三层结构，避免菜单层层套叠。
实验三 · 多端一致性：结构不换轨
多端版本共享同一套栏目顺序与面板结构，改变的是密度而不是路径： 桌面用双栏对照画面与数据，平板收窄间距，手机把双栏叠成单栏。
触控区域在移动端统一放大，菜单收进顶部的折叠按钮； 折叠后正文仍然完整可读，不依赖脚本展开。
- 桌面：双栏面板，导航横向排列。
- 平板：单栏为主，统计卡保持四列压缩为两列。
- 手机：数据面板折叠进详情页，按钮高度不小于 44 像素。
实验四 · 质量步骤：改动如何被确认
每一版改动上线前都按同一套顺序过一遍：先跑冒烟清单， 核对骨架、面板、常见问题与页脚是否齐全；再做兼容检查， 在窄屏与宽屏两种宽度下确认没有横向溢出。
随后逐页阅读文案与图片替代文本，最后检查页面在不加载脚本时 是否仍然可以完整阅读。这套流程只描述站点自己的维护习惯， 不构成任何服务承诺。
技术 FAQ
面板里为什么放示例数字？
数字在这里只演示排布方式与更新动作，所以统一标注为示例口径， 避免把界面演示误读为真实数据。
页面为什么要用 dl、ol 与 details？
数据块用 dl 表达字段对，流程用 ol 保留顺序，问答用 details 折叠长文， 三种语义结构让页面不依赖脚本也能被读屏完整理解。
脚本或样式未加载时页面如何表现？
正文与图片由基础 CSS 控制，移动菜单只在按钮触发时展开； 外部资源不可用时，所有栏目文字仍然顺序可见。
颜色与字号按什么规则取值？
颜色集中在 CSS 变量的几组蓝白灰里，标题字号使用随视口伸缩的钳制值， 避免不同宽度下出现跳变。