Files
2026-01-21 09:04:15 +08:00

1.4 KiB
Raw Permalink Blame History

Change: 优化流程详情页面布局

Why

当前流程详情页面 (ruoyi-ui/src/views/loanPricing/workflow/detail.vue) 采用简单的标签页布局,所有信息平铺展示,缺乏信息层次感。用户需要在不同标签页之间切换才能查看关键信息,无法快速获取最重要的数据概览。页面视觉层次不够清晰,信息利用率不高。

What Changes

  • 页面布局重构: 采用信息密集型两栏布局
    • 左侧(约 30% 宽度):展示关键信息摘要卡片(业务方流水号、客户名称、申请金额、贷款利率等核心字段)
    • 右侧(约 70% 宽度):保留现有标签页,展示完整的流程详细信息
  • 页面头部简化: 移除 el-page-header,使用简洁的页面标题,返回按钮移至页面右上角
  • 样式优化:
    • 为左侧摘要卡片添加适当的阴影和圆角
    • 优化卡片内部间距和字体大小
    • 保持现有的简洁数据展示风格(不添加图标或额外的高亮效果)
  • 响应式支持: 在小屏幕设备上自动调整为单栏垂直布局

Impact