b2894lxlx/tms-erp-web

Files

赵忠林 6364b593ce style(business): 优化派遣摘要及路线项布局样式

- 调整派遣摘要网格列宽，改善整体布局比例
- 增加派遣路线容器间距，提升视觉分隔效果
- 修改派遣路线项最大宽度和内边距，提升内容展示空间
- 添加派遣路线项最小高度及虚线边框，增强区块感和可视性
- 调整派遣路线项边角圆角，优化界面圆润度

2026-08-07 01:41:43 +08:00

3.0 KiB

Raw Blame History

2026-08-07 工作日志

运输计划调度弹窗恢复左右分栏布局

需求：客户提供「计划详情」参考截图，要求调度弹窗改回「左侧基本信息卡 + 右侧收发货路线卡」的左右分栏布局。
改动：src/views/business/components/business-crud-page.vue
- 模板：把基本信息与收发货路线重新包进 business-crud-page__dispatch-summary 双列容器；左侧 section-card 内恢复 3 列网格（客户/项目/合同编号），货物信息占 2 列、计划执行时间占 1 列、附件独占一行；右侧 section-card 内恢复左右排列的起点/终点（徽章+名称+地址+联系人），中间用方向虚线连接。
- 样式：
  - 外容器恢复 grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr)，gap 16px，卡片等高拉伸。
  - 基本信息网格恢复 3 列，列间距 16px、行间距 12px。
  - 路线区恢复 grid-template-columns: 1fr 56px 1fr，徽章 32px，标题 16px，地址/联系人 13px，连接线 56px。
  - 保留紧凑化后的字号/间距（标签 12px、值 14px），避免回到原先过松的状态。
验证：npm run build 成功。

运输计划调度弹窗基本信息改为 2 列

需求：客户截图反馈左侧「基本信息」还嫌松，要求改为 2 列更紧凑。
改动：src/views/business/components/business-crud-page.vue
- 模板：调整基本信息字段顺序为客户/项目、合同编号/计划执行时间、货物信息（占满 2 列）、附件（占满 2 列）。
- 样式：business-crud-page__dispatch-summary-grid 从 repeat(3, minmax(0, 1fr)) 改为 repeat(2, minmax(0, 1fr))，保持 gap 12px 16px。
验证：npm run build 成功。

运输计划调度弹窗路线连接改为车辆图标

需求：客户希望把收发货路线中间的方向虚线换成车辆图标。
改动：src/views/business/components/business-crud-page.vue
- 模板：把 <div class="business-crud-page__dispatch-route-line" /> 替换为 <div class="business-crud-page__dispatch-route-vehicle"><el-icon><Van /></el-icon></div>。
- 样式：删除原 &__dispatch-route-line 虚线箭头样式，新增 &__dispatch-route-vehicle，使用主色圆形背景、白色 Van 图标，尺寸 36×36px，居中与路线节点对齐。
验证：npm run build 成功。

运输计划调度弹窗收发货路线视觉美化

需求：客户反馈右上角「收发货路线」卡片仍不够美观，要求继续优化。
改动：src/views/business/components/business-crud-page.vue
- 样式：
  - 路线容器去掉 padding-top，改为 align-items: center 垂直居中。
  - 起点/终点 item 改为 align-items: center，徽章从方角改为圆形，并加轻微阴影。
  - 车辆图标改为白底 + 主色边框 + 主色 Van 图标，尺寸加大到 44×44px，两侧各延伸 20px 虚线，形成「路线」流动感。
  - 城市名称限制单行并溢出省略，地址/联系人间距收紧、颜色变淡。
验证：npm run build 成功。