Details List 详情列表
v1.4.0 · 画板 414px · 左右结构标题宽度按最长字数×16px动态对齐(4字=64px,6字=96px,2字=32px) · 上下结构(78px/92px) · 标题G50/正文G60左对齐 · 16px字号
左右结构 — 最长标题4字 宽度64px
申请日期 2024年3月15日
审批状态 已通过
部门 产品设计部
负责人 张三丰
工号 EMP-2024-0315
左右结构 — 最长标题6字 宽度96px
合同签订日期 2024年3月15日
合同编号 HT-2024-SZ-0315
签订方 深圳市创新科技有限公司
合同类型 固定期限劳动合同
有效期 2024年3月15日至2027年3月14日
左右结构 — 最长标题2字 宽度32px
姓名 张三丰
部门 产品设计部
职位 高级产品经理
工号 EMP-2024-0315
左右结构 — 带图片附件（行高 142px）
现场照片
附件1
附件2
拍摄地点 深圳市南山区科技园
左右结构 — 带文件附件（行高 142px）
合同附件
📄
劳动合同.pdf
📊
薪资明细.xlsx
签订日期 2024年3月15日
上下结构 — 单行正文（行高 78px）
项目描述
这是一个企业级移动端设计系统，覆盖全部核心组件，确保视觉一致性与开发效率。
项目地址
https://zartui.design/mobile/components/details-list
备注说明
本组件适用于详情页面的信息展示，不支持编辑。
上下结构 — 两行正文（行高 92px）
项目背景
随着移动端业务场景日益复杂，原有设计系统已无法满足快速迭代的需求。团队决定重构整个移动端组件库，统一设计语言，提升开发效率与用户体验，同时为后续的跨平台适配打下坚实基础。
技术方案
采用 Token 驱动的设计体系，通过 CSS 变量统一管理颜色、字体、间距等设计参数。组件按功能模块划分，支持按需引用。预览文件使用原生 HTML/CSS 实现，生产环境可通过框架组件库直接调用。
验收标准
所有组件需通过视觉走查与交互测试，确保在不同设备上表现一致。Token 值需与规范文件完全匹配，不允许自定义颜色或尺寸偏差。
上下结构 — 单行与两行混合
任务名称
移动端详情列表组件开发
任务描述
完成 Details List 组件的设计规范与代码实现，包含左右结构和上下结构两种布局模式，支持附件展示功能。需同步输出 HTML 预览、SPEC.md 文字描述和 JSON 结构化规范三份文件。
负责人
张三丰
禁用态
审批状态 待审批
审批人 李经理
审批意见
该申请尚在审核中，请耐心等待。
标题列宽度速查表
最长标题字数标题列宽度计算公式
2字32px2 × 16px
3字48px3 × 16px
4字64px4 × 16px
5字80px5 × 16px
6字96px6 × 16px
7字112px7 × 16px
8字128px8 × 16px
CSS 变量
变量名值说明
--dl-page-width414px画板宽度
--dl-row-h-lr44px左右结构行高
--dl-row-h-lr-attach142px左右结构带附件行高
--dl-row-h-tb-1line78px上下结构单行行高
--dl-row-h-tb-2line92px上下结构两行行高
--dl-label-width最长字数×16px标题列宽度（按最长标题动态调整）
--dl-title-colorG50 #6B7A99标题文字颜色
--dl-title-size16px标题字号
--dl-content-colorG60 #223355正文文字颜色
--dl-content-size16px正文字号
--dl-pad-left16px左侧边距
--dl-pad-right16px右侧边距
--dl-gap-title-content8px标题与正文间距
--dl-attach-size122px附件展示尺寸
--dl-radius8px附件圆角
类名说明
类名说明所属
.dl-card列表卡片容器，白底Details List
.dl-card[data-cols]通过data-cols指定最长标题字数，动态设置标题列宽度Details List
.dl-row-lr左右结构行，44pxDetails List
.dl-row-lr-attach左右结构带附件行，142pxDetails List
.dl-label标题文字，宽度按最长字数×16px，16px/G50Details List
.dl-value正文文字，左对齐，16px/G60Details List
.dl-row-tb上下结构行容器Details List
.dl-row-tb-1line上下结构单行，78pxDetails List
.dl-row-tb-2line上下结构两行，92pxDetails List
.dl-tb-label上下结构标题，16px/G50Details List
.dl-tb-value上下结构正文，16px/G60Details List
.dl-attach-item图片附件，122×122pxDetails List
.dl-attach-file文件附件，122×122pxDetails List
.dl-divider行间分隔线（左缩进16px）Details List
.dl-divider-full行间分隔线（通栏）Details List
.dl-disabled禁用态，文字统一G30Details List

ZartUI Mobile Details List 详情列表规范 v1.4.0

左右结构：标题列宽度 = 最长标题字数 × 16px（4字=64px, 6字=96px, 2字=32px），所有标题左对齐

上下结构：单行78px，两行92px | 标题 G50 · 正文 G60 左对齐 · 字号 16px · 画板 414px

返回组件首页