style(business-crud-page): 优化运单详情起终点区域样式

- 将起终点区域改为垂直时间轴风格,左侧显示两个圆点,右侧显示详细地址及省市区信息
- 删除旧的起终点样式类,确认无其他引用,保证代码清晰
- 实现响应式设计,窄屏时垂直时间轴自动变为整行展示

style(master-order-editor): 调整多联总单编辑页收发货信息布局

- 修复竖向时间轴节点图标被压扁问题,增加最小宽高和防止缩小样式
- 优化收发货信息输入区网格布局,地址项独占前两列,宽度加大,支持长地址显示
- 响应式下地址项独占整行,保证小屏幕下不被截断
- 修改搜索栏白底样式,让选择常用地址弹窗搜索栏也使用白底,保持视觉一致性
This commit is contained in:
2026-08-20 16:06:54 +08:00
parent 37a4eef515
commit 8870925c60
3 changed files with 131 additions and 71 deletions
+21
View File
@@ -108,3 +108,24 @@
- 间距:沿用全局 `.section-card``margin-bottom: 12px`
- 验证:已通过 SFC 解析与模板编译检查。
- 原因:用户要求 `/settlement/settlement-adjustment` 页面与预结算单/正式结算单弹窗统一使用白底卡片分隔。
## 运单详情起终点区域改垂直时间轴(方案B)
- 调整文件:`src/views/business/components/business-crud-page.vue`
- 修改内容:在 `isWaybillDetailLayout` 区块,将 `__waybill-route` 的横向“起/终方块+横杠”改为垂直时间轴:左列两个圆点(蓝 `#409eff` / 橙 `#e6a23c`,带白圈光晕),之间用绝对定位的虚线(`repeating-linear-gradient`)连接;右列为“发货地/收货地”标签 + 地名(`-webkit-line-clamp: 2` 允许长名换行)+ 省市区地址(`el-tooltip` 悬浮显示完整地址)。
- 删除旧类:`__waybill-route-head``__waybill-route-text` 及其样式(已确认全仓无其它引用)。
- 响应式:1200px 断点下的 `grid-row:auto; grid-column: 1/-1` 规则仍生效,垂直轴在窄屏自动转为整行。
- 原因:用户认为原右上角起终点方块像按钮、地址被挤压截断、层级不清晰,选择方案B(垂直时间轴)。
## 多联总单编辑页收发货信息布局整改
- 调整文件:`src/views/business/components/master-order-editor.vue`(仅样式,逻辑未动)
- 修改内容:
1. `.route-step-icon``min-width: 32px; min-height: 32px; flex-shrink: 0;`,并给外层 `:deep(.el-step__icon)``flex-shrink: 0;` —— 修复竖向时间轴「起/经/终」节点(尤其「经」字)被压扁变形。
2. `.route-node-form` grid 由 `minmax(360px,1.8fr) minmax(200px,1fr) minmax(260px,1.2fr) minmax(260px,1.2fr)` 改为 `repeat(2, minmax(420px,1fr)) repeat(2, minmax(260px,1fr))`;新增 `:deep(.el-form-item.route-address-form-item) { grid-column: span 2; }` —— 地址项独占前两列(更宽)。
3. `.route-address-name`(行政区划 cascader)由 `flex: 0 0 140px` 加宽到 `220px` —— 完整显示「大坡服务区(梧州段)」等较长名称。
4. 响应式 `@media (max-width:1440px)``.route-node-form``repeat(2, minmax(320px,1fr))` 并同步 `.route-address-form-item { grid-column: span 2 }` —— 小屏地址项独占整行。
- 原因:客户反馈该页收发货信息中行政区划/详细地址输入框过窄导致长地址被截断,且左侧时间轴节点变形。改完用户刷新 localhost:2889 查看效果。
## master-order 弹窗搜索栏白底补齐
- `src/views/business/components/master-order-editor.vue` line 1815-1818:把 `.common-cargo-dialog__search` 单条白底规则改写为 `.common-address-dialog__search, .common-cargo-dialog__search { background: #fff }`,让"选择常用地址"弹窗的搜索栏也跟随既有白卡样式(其他 `.route-dialog__search` 默认无该 class,仍保留灰底)。