赵忠林
6364b593ce
- 调整派遣摘要网格列宽，改善整体布局比例 - 增加派遣路线容器间距，提升视觉分隔效果 - 修改派遣路线项最大宽度和内边距，提升内容展示空间 - 添加派遣路线项最小高度及虚线边框，增强区块感和可视性 - 调整派遣路线项边角圆角，优化界面圆润度
37 lines
3.0 KiB
Markdown
37 lines
3.0 KiB
Markdown
# 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` 成功。
|