改前(当前)
层级不清
缴费明细 关闭
应缴批次
第 1 期
已缴清
应缴金额¥3,000.00
应缴日2026-10-10
已缴金额¥3,000.00
欠缴金额¥0.00
转账笔 1
付款完成
转账方式微信转账
转账金额¥2,000.00
转账时间2026-10-11 09:20
转账凭证凭证.jpg
备注首期部分
财务备注已核对
转账笔 2
已付款
转账方式银行卡转账
转账金额¥1,000.00
转账时间2026-10-12 14:08
转账凭证—
备注—
财务备注—
问题:期次与转账同为浅绿底嵌套卡片,「转账笔 N」信息弱,字段全是左右两列堆叠,扫读吃力。
方案 A · 白底转账卡(金额突出)
推荐
缴费明细 关闭
应缴批次
第 1 期
已缴清
应缴金额¥3,000.00
应缴日2026-10-10
已缴金额¥3,000.00
欠缴金额¥0.00
转账记录(2)
1
¥2,000.00
微信转账 · 2026-10-11 09:20
付款完成
2
¥1,000.00
银行卡转账 · 2026-10-12 14:08
已付款
第 2 期
待缴清
应缴金额¥2,000.00
应缴日2027-04-10
已缴金额¥0.00
欠缴金额¥2,000.00
方案 B · 时间线 + 默认折叠明细
备选
缴费明细 关闭
应缴批次
第 1 期
已缴清
应缴金额¥3,000.00
应缴日2026-10-10
已缴金额¥3,000.00
欠缴金额¥0.00
转账记录(2)· 点击可展开备注/凭证
微信转账 · 2026-10-11 09:20
银行卡转账 · 2026-10-12 14:08
怎么选:
方案 A 信息一次看全、金额最醒目,改动也最贴近现有详情组件结构;
方案 B 默认更短,适合转账笔数多时扫读,但多一步展开。
请回复选 A 或 B(也可说要微调),确认后再改 `mobile-oa-h5` 代码。
docs/demos/2026-10-14-payment-detail-transfer-display-demo.html