detail-page · 实体详情页骨架
同一张图纸要装下三种数据状态,而 DOM 结构一个节点都不变:
差异只在文案、数值、以及说明块写什么。三个变体见下,结构由
05-audit/detail-page-contract.py 逐标签比对。
三条结构规则
① 装饰层与内容层是平级兄弟,装饰不吃点击(pointer-events: none);
② 皮肤挂在 section 上,不挂 body;
③ DOM 不许变,字段缺失是值缺失,不是节点缺失。
对比:错写法 vs 本库写法
❌ 常见写法:缺的字段写 0
0 是一个真实的值:读者会拿它去算"研发强度 = 0",也会拿它去比同比 —— 而这一格其实没有数据。
✅ 本库:写「未披露」+ 弱化色
缺就是缺。同一页里三个变体的 DOM 结构必须完全一致(节点数量与嵌套),所以缺数据时是换文案,不是删节点 —— 删了以后这页越改越不像。