采集协议单 · 横向时间线 Tab 样式 Demo

将「协议单管理 → 缴费信息 → 储存证管理 → 满月待办管理」四个视图切换,做成带先后顺序感的时间线 Tab。 点击各步骤可切换下方占位内容。色值对齐 Fresh Mint(主色 #10b981)。

方案 A · 经典步骤条 圆点 + 连线,轻量、常见于表单分步

协议单管理

协议审核与状态维护 — 此处为 Tab 内容占位区(列表 / 筛选 / 表格)。

方案 B · 序号 + 图标节点 流程感更强,适合强调四段业务链路

协议单管理

协议审核与状态维护 — 此处为 Tab 内容占位区。

方案 C · 轨道 Pill Tab(推荐) 与现有 B 端面板最协调,可保留副标题

协议单管理

协议审核与状态维护 — 此处为 Tab 内容占位区。

方案 D · 箭头分段条 视觉冲击力大,窄屏需横向滚动

协议单管理

协议审核与状态维护 — 此处为 Tab 内容占位区。