ZartUI Mobile — Collapse 折叠面板

v1.1.0 · 画板 414px · 面板宽度 382px · 标题行 44px · 正文16px/G60 · 辅助正文14px/G50或G40 · 箭头朝右(收起)/朝下(展开)

类型一 · 有圆点标题（圆点 DB60 8×8px + 标题 G60）

审批流程说明

审批流程分为提交、初审、复审三个阶段。提交后系统自动分配初审人员，初审通过后进入复审环节，复审通过即可生效。

温馨提示：初审周期为 1-3 个工作日，复审周期为 2-5 个工作日。

退款政策

自购买之日起 7 天内可无条件退款，超过 7 天需提供退款理由，经审核后将在 3 个工作日内处理。

退款金额将在 3-5 个工作日内原路返回至您的支付账户。

配送时效（展开态）

标准配送 3-5 个工作日，加急配送 1-2 个工作日。偏远地区可能延迟 1-3 天，具体以物流信息为准。

加急配送需额外支付运费差价，详情请查看配送说明。

类型二 · 无圆点标题（标题 G50）

常见问题

如遇登录问题，请先检查账号密码是否正确，或尝试重置密码。若仍无法登录，请联系客服。

客服工作时间：周一至周五 9:00-18:00。

服务条款（展开态）

使用本服务即表示您同意遵守相关法律法规及平台规则，禁止利用本服务从事任何违法违规活动。

服务条款自发布之日起生效，如有变更将提前 7 天通知。

隐私保护

我们严格保护您的个人信息，不会向第三方泄露，仅用于改善服务质量。

隐私政策更新日期：2026 年 1 月 1 日。

仅正文 · 无辅助正文（16px / G60）

版本更新日志（展开态）

v2.1.0：新增数据导出功能，优化搜索性能，修复已知问题。

使用帮助

点击各功能模块即可快速上手，如有疑问可查阅帮助文档或联系在线客服。

禁用态 · 圆点/标题/箭头均变为 G30

正常项（展开态）

此项目可以正常展开和折叠。

禁用项（不可点击）

正常项

此项目可以正常展开和折叠。

规格参数
面板宽度	382px	移动端标准宽度
标题行高度	44px	收起/展开均 44px
标题字号	16px / 400	思源黑体
标题色（有圆点）	G60 #223355	圆点强调时标题加深
标题色（无圆点）	G50 #6B7A99	普通标题较浅
圆点大小	8×8px	border-radius: 50%
圆点颜色	DB60 #3388FF	主色调强调
箭头图标	16×16px	SVG chevron
箭头颜色	G40 #A8B4C8	收起/展开均 G40
箭头朝向（收起）	朝右 →	默认状态
箭头朝向（展开）	朝下 ↓	rotate(90deg)
正文字号	16px / 400 / G60 #223355	默认正文
辅助正文字号	14px / 400 / G50 #6B7A99	辅助说明文字
辅助正文颜色2	14px / 400 / G40 #A8B4C8	更浅辅助文字
内容行高	1.6	正文和辅助正文均 1.6
分隔线	1px G10 #E9ECF2	项间分隔线
圆角	8px	面板整体圆角
禁用色	G30 #CED4E0	圆点/标题/箭头统一

规格参数

面板宽度

382px

移动端标准宽度

标题行高度

44px

收起/展开均 44px

标题字号

16px / 400

思源黑体

标题色（有圆点）

G60 #223355

圆点强调时标题加深

标题色（无圆点）

G50 #6B7A99

普通标题较浅

圆点大小

8×8px

border-radius: 50%

圆点颜色

DB60 #3388FF

主色调强调

箭头图标

16×16px

SVG chevron

箭头颜色

G40 #A8B4C8

收起/展开均 G40

箭头朝向（收起）

朝右 →

默认状态

箭头朝向（展开）

朝下 ↓

rotate(90deg)

正文字号

16px / 400 / G60 #223355

默认正文

辅助正文字号

14px / 400 / G50 #6B7A99

辅助说明文字

辅助正文颜色2

14px / 400 / G40 #A8B4C8

更浅辅助文字

内容行高

1.6

正文和辅助正文均 1.6

分隔线

1px G10 #E9ECF2

项间分隔线

圆角

8px

面板整体圆角

禁用色

G30 #CED4E0

圆点/标题/箭头统一

CSS 变量
--collapse-width	382px	面板宽度
--collapse-header-h	44px	标题行高度
--collapse-title-size	16px	标题字号
--collapse-title-weight	400	标题字重
--collapse-title-color-dot	G60 #223355	有圆点标题色
--collapse-title-color-plain	G50 #6B7A99	无圆点标题色
--collapse-dot-size	8px	圆点大小
--collapse-dot-color	DB60 #3388FF	圆点颜色
--collapse-arrow-size	16px	箭头图标尺寸
--collapse-arrow-color	G40 #A8B4C8	箭头颜色
--collapse-content-font	16px	正文默认字号
--collapse-content-color	G60 #223355	正文默认颜色
--collapse-content-line-height	1.6	内容行高
--collapse-sub-font	14px	辅助正文字号
--collapse-sub-color	G50 #6B7A99	辅助正文颜色
--collapse-sub-alt-color	G40 #A8B4C8	辅助正文颜色2
--collapse-divider	1px G10	项间分隔线
--collapse-radius	8px	整体圆角

CSS 变量

--collapse-width

382px

面板宽度

--collapse-header-h

44px

标题行高度

--collapse-title-size

16px

标题字号

--collapse-title-weight

400

标题字重

--collapse-title-color-dot

G60 #223355

有圆点标题色

--collapse-title-color-plain

G50 #6B7A99

无圆点标题色

--collapse-dot-size

8px

圆点大小

--collapse-dot-color

DB60 #3388FF

圆点颜色

--collapse-arrow-size

16px

箭头图标尺寸

--collapse-arrow-color

G40 #A8B4C8

箭头颜色

--collapse-content-font

16px

正文默认字号

--collapse-content-color

G60 #223355

正文默认颜色

--collapse-content-line-height

1.6

内容行高

--collapse-sub-font

14px

辅助正文字号

--collapse-sub-color

G50 #6B7A99

辅助正文颜色

--collapse-sub-alt-color

G40 #A8B4C8

辅助正文颜色2

--collapse-divider

1px G10

项间分隔线

--collapse-radius

8px

整体圆角

类名规范
.z-collapse	折叠面板容器	Collapse
.z-collapse-item	单个面板项	Collapse
.z-collapse-item.is-open	展开态面板项	Collapse
.z-collapse-item.is-disabled	禁用态面板项	Collapse
.z-collapse-header	标题行（44px高）	Collapse
.z-collapse-header.has-dot	有圆点标题行	Collapse
.z-collapse-header.no-dot	无圆点标题行	Collapse
.z-collapse-dot	左侧圆点（8×8px DB60）	Collapse
.z-collapse-title	标题文字（16px/400）	Collapse
.z-collapse-arrow	右侧箭头图标	Collapse
.z-collapse-body	内容区容器（过渡动画）	Collapse
.z-collapse-content	正文文字（16px/G60）	Collapse
.z-collapse-sub	辅助正文（14px/G50）	Collapse
.z-collapse-sub.alt-color	辅助正文（14px/G40）	Collapse

类名规范

.z-collapse

折叠面板容器

Collapse

.z-collapse-item

单个面板项

Collapse

.z-collapse-item.is-open

展开态面板项

Collapse

.z-collapse-item.is-disabled

禁用态面板项

Collapse

.z-collapse-header

标题行（44px高）

Collapse

.z-collapse-header.has-dot

有圆点标题行

Collapse

.z-collapse-header.no-dot

无圆点标题行

Collapse

.z-collapse-dot

左侧圆点（8×8px DB60）

Collapse

.z-collapse-title

标题文字（16px/400）

Collapse

.z-collapse-arrow

右侧箭头图标

Collapse

.z-collapse-body

内容区容器（过渡动画）

Collapse

.z-collapse-content

正文文字（16px/G60）

Collapse

.z-collapse-sub

辅助正文（14px/G50）

Collapse

.z-collapse-sub.alt-color

辅助正文（14px/G40）

Collapse