From 8870925c60cc25a10c7596c83dfc3dc0eb4c32c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Thu, 20 Aug 2026 16:06:54 +0800 Subject: [PATCH] =?UTF-8?q?style(business-crud-page):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=BF=90=E5=8D=95=E8=AF=A6=E6=83=85=E8=B5=B7=E7=BB=88=E7=82=B9?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将起终点区域改为垂直时间轴风格，左侧显示两个圆点，右侧显示详细地址及省市区信息 - 删除旧的起终点样式类，确认无其他引用，保证代码清晰 - 实现响应式设计，窄屏时垂直时间轴自动变为整行展示 style(master-order-editor): 调整多联总单编辑页收发货信息布局 - 修复竖向时间轴节点图标被压扁问题，增加最小宽高和防止缩小样式 - 优化收发货信息输入区网格布局，地址项独占前两列，宽度加大，支持长地址显示 - 响应式下地址项独占整行，保证小屏幕下不被截断 - 修改搜索栏白底样式，让选择常用地址弹窗搜索栏也使用白底，保持视觉一致性 --- .workbuddy/memory/2026-08-20.md | 21 +++ .../components/business-crud-page.vue | 161 +++++++++++------- .../components/master-order-editor.vue | 20 ++- 3 files changed, 131 insertions(+), 71 deletions(-) diff --git a/.workbuddy/memory/2026-08-20.md b/.workbuddy/memory/2026-08-20.md index 5f78272..cbc4ebc 100644 --- a/.workbuddy/memory/2026-08-20.md +++ b/.workbuddy/memory/2026-08-20.md @@ -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，仍保留灰底）。 diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue index 4e90d4c..2dd287c 100644 --- a/src/views/business/components/business-crud-page.vue +++ b/src/views/business/components/business-crud-page.vue @@ -2669,26 +2669,33 @@
-
- 起{{ - detailRow.departureName || detailRow.departureAddress || '-' - }}终{{ detailRow.arrivalName || detailRow.arrivalAddress || '-' }} +
+ +
+ 发货地 + {{ + detailRow.departureName || detailRow.departureAddress || '-' + }} + + {{ + formatTransportPlanProvinceCityDistrict(detailRow.departureAddress) + }} + +
-
- - {{ - formatTransportPlanProvinceCityDistrict(detailRow.departureAddress) - }} - - 　→　 - - {{ - formatTransportPlanProvinceCityDistrict(detailRow.arrivalAddress) - }} - +
+ +
+ 收货地 + {{ + detailRow.arrivalName || detailRow.arrivalAddress || '-' + }} + + {{ + formatTransportPlanProvinceCityDistrict(detailRow.arrivalAddress) + }} + +
@@ -15397,62 +15404,86 @@ export default { grid-row: 1 / span 3; grid-column: 5; min-width: 0; - padding: 8px 0; + padding: 4px 0; } - &__waybill-route-head { + &__waybill-route-item { + position: relative; display: flex; - align-items: center; - justify-content: space-between; + align-items: stretch; gap: 12px; - b { - display: inline-flex; - flex: 0 0 auto; - width: 34px; - height: 34px; - align-items: center; - justify-content: center; - color: #fff; - border-radius: 4px; - background: #409eff; - - &.end { - background: #e6a23c; - } - } - - strong { - min-width: 0; - overflow: hidden; - color: #303133; - font-size: 18px; - text-overflow: ellipsis; - white-space: nowrap; - } - - &::before { - flex: 1; - order: 2; - height: 4px; - content: ''; - background: #e4e7ed; - } - - b.end { - order: 3; - } - - strong:last-child { - order: 4; + & + & { + margin-top: 18px; } } - &__waybill-route-text { - margin-top: 12px; + &__waybill-route-dot { + position: relative; + flex: 0 0 auto; + width: 12px; + margin-top: 2px; + + &::before { + display: block; + width: 12px; + height: 12px; + border-radius: 50%; + content: ''; + background: #409eff; + box-shadow: 0 0 0 3px #fff, 0 0 0 4px #c6e0ff; + } + + &.is-end::before { + background: #e6a23c; + box-shadow: 0 0 0 3px #fff, 0 0 0 4px #f5d9b0; + } + } + + &__waybill-route-item:not(:last-child) &__waybill-route-dot::after { + content: ''; + position: absolute; + top: 14px; + left: 5px; + width: 2px; + height: calc(100% + 10px); + background: repeating-linear-gradient( + to bottom, + #c0c4cc 0, + #c0c4cc 4px, + transparent 4px, + transparent 8px + ); + } + + &__waybill-route-detail { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 4px; + } + + &__waybill-route-label { + color: #909399; + font-size: 12px; + } + + &__waybill-route-name { + color: #303133; + font-size: 15px; + font-weight: 500; + line-height: 1.4; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + &__waybill-route-addr { overflow: hidden; color: #606266; - text-align: center; + font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } diff --git a/src/views/business/components/master-order-editor.vue b/src/views/business/components/master-order-editor.vue index a3ce199..78c24ad 100644 --- a/src/views/business/components/master-order-editor.vue +++ b/src/views/business/components/master-order-editor.vue @@ -1812,6 +1812,7 @@ export default { padding: 12px 12px 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } +.common-address-dialog__search, .common-cargo-dialog__search { background: #fff; } @@ -1845,6 +1846,7 @@ export default { :deep(.el-step__icon) { width: 32px; height: 32px; + flex-shrink: 0; border: 0; background: transparent; } @@ -1852,6 +1854,9 @@ export default { display: inline-flex; width: 32px; height: 32px; + min-width: 32px; + min-height: 32px; + flex-shrink: 0; align-items: center; justify-content: center; border-radius: 6px; @@ -1870,15 +1875,15 @@ export default { } .route-node-form { display: grid; - grid-template-columns: minmax(360px, 1.8fr) minmax(200px, 1fr) minmax(260px, 1.2fr) minmax( - 260px, - 1.2fr - ); + grid-template-columns: repeat(2, minmax(420px, 1fr)) repeat(2, minmax(260px, 1fr)); gap: 0 16px; align-items: start; :deep(.el-form-item) { margin: 0 0 12px; } + :deep(.el-form-item.route-address-form-item) { + grid-column: span 2; + } :deep(.el-form-item__content) { min-width: 0; } @@ -1894,7 +1899,7 @@ export default { gap: 8px; } .route-address-name { - flex: 0 0 140px; + flex: 0 0 220px; } .route-address-detail, .route-contact-actions :deep(.el-input) { @@ -1961,7 +1966,10 @@ export default { } @media screen and (max-width: 1440px) { .route-node-form { - grid-template-columns: repeat(2, minmax(280px, 1fr)); + grid-template-columns: repeat(2, minmax(320px, 1fr)); + :deep(.el-form-item.route-address-form-item) { + grid-column: span 2; + } } .route-step-title { align-items: flex-start;