缴退费财务确认 · 布局方案 Demo

当前页面存在两层 Tab(缴费/退费 大卡片切换 + 待确认/已确认 胶囊 Tab),顶部视觉层级过多。 以下 5 种方案均尝试合并或消除第二层 Tab,并将列表改为卡片或混合展示。 色值与胶囊样式对齐 Fresh Mint 规范(--primary #10b981)。

方案 A · 胶囊切换 + 上下分区卡片 缴费/退费改为居中胶囊;取消「待确认/已确认」Tab,改为同屏上下两个区域。待确认优先展示、视觉强调;已确认区域可折叠。适合财务「先处理队列、再查历史」的工作流。
推荐

缴退费财务确认

2026-05-30 至 2026-06-29
默认展示应缴费时间前后 15 天内的明细

待确认 3

已确认 12

方案 B · 双栏看板(左待确认 / 右已确认) 一屏对比两个队列,适合宽屏。左侧琥珀色调强调待办,右侧绿色调表示已完成。每列独立滚动,底部「加载更多」。
2026-05-30 至 2026-06-29

待确认 3 条

加载更多待确认…

已确认 12 条

加载更多已确认…
方案 C · 统计摘要 + 状态 Chip 筛选 + 卡片流 顶部 4 个统计卡提供概览;第二层 Tab 改为轻量 Chip(全部/待确认/已确认),减少视觉重量。单区域卡片网格,切换 Chip 时过滤。

缴退费财务确认

待确认
3
今日已确认
5
待确认金额
¥28,600
本月已确认
¥186,400
2026-05-30 至 2026-06-29
方案 D · 折叠手风琴分区 待确认默认展开(财务主任务),已确认默认折叠节省纵向空间。比方案 A 更紧凑,适合待确认量不大、已确认历史很多的场景。
2026-05-30 至 2026-06-29
方案 E · 混合布局(待确认卡片 + 已确认紧凑表格) 待办用卡片突出操作;已确认历史量大、字段多,保留表格 + 分页更高效。折中方案,改动风险最低。

缴退费财务确认

2026-05-30 至 2026-06-29

待确认 3

已确认 12

客户姓名 期数 应缴金额 实缴金额 转账时间 确认时间 状态 操作