From bcdd412d959e1f56bdc40fa0a7fa6f7dda68ca85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Fri, 21 Aug 2026 16:03:02 +0800 Subject: [PATCH] =?UTF-8?q?style(master-order-dispatch):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E8=B5=B7=E7=BB=88=E8=B7=AF=E7=94=B1=E6=9D=A1=E5=B7=A6?= =?UTF-8?q?=E4=BE=A7=E8=8A=82=E7=82=B9=E8=A2=AB=E8=A3=81=E5=88=87=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改 .route-overview 由右对齐改为左对齐，调整 padding 保证滚动时两端节点完整显示 - 调整 .route-overview__node 的 flex 属性，限制最小和最大宽度，添加文本溢出省略样式防止撑爆 - 优化 .route-overview__line 的 flex 属性，使其可收缩，提升滚动时平滑度 - 保留 1200px 媒体查询中原有的 justify-content 设置，避免影响现有布局 - 统一给各 transportCapacity 相关 vue 文件中的 .el-form-item 添加了底部外边距样式，增强表单间距 - 调整 element-ui 的 .el-col 底部外边距为0，统一样式规范 --- .workbuddy/memory/2026-08-21.md | 14 ++++++++ src/styles/element-ui.scss | 2 +- .../components/master-order-dispatch.vue | 33 ++++++++++++++----- src/views/transportCapacity/driver.vue | 4 ++- src/views/transportCapacity/ship.vue | 3 ++ src/views/transportCapacity/vehicle.vue | 4 +++ 6 files changed, 49 insertions(+), 11 deletions(-) diff --git a/.workbuddy/memory/2026-08-21.md b/.workbuddy/memory/2026-08-21.md index f432434..83d4200 100644 --- a/.workbuddy/memory/2026-08-21.md +++ b/.workbuddy/memory/2026-08-21.md @@ -159,3 +159,17 @@ ## ship 页 label 规则：最多 6 汉字宽、超出换行 - `src/views/transportCapacity/ship.vue`：el-form `label-width`（原 HEAD 为 auto，工作区历史为 150）→ `100`（6 汉字≈84px+冒号≈98px，100px 恰容 6 字）；`.ship-form` 内新增 `:deep(.el-form-item__label) { white-space: normal; line-height: 20px }` 允许换行。适用整个 ship 表单（含证书区）。 - 注意：改该文件前先确认 git 暂存区状态，`git checkout -- ` 恢复的是 index 版本；本文件 index=HEAD=auto，工作区曾为 150（历史未提交改动），已被本次需求覆盖。 + +## master-order-dispatch 起-终路由条左侧节点被裁切修复 +- 问题：`/business/master-order?mode=dispatch` 顶部 overview 的路由节点条（起/经/终），最左侧"起（梧州段）"被裁掉半字。根因：`.route-overview` 用 `justify-content: flex-end` 右对齐 + `overflow-x:auto`，节点总宽(4×130+3×56=688px)超出右侧栏可用宽度时，溢出从左侧跑出可视区，且节点 `flex:0 0 130px` 写死、长名字会撑爆。 +- 改动（`src/views/business/components/master-order-dispatch.vue` scoped 样式，3 处）： + 1. `.route-overview`：`justify-content:flex-end` → `flex-start`；padding 改为 `8px 24px 0`（左右留白，滚动时两端节点完整可见）。 + 2. `.route-overview__node`：`flex:0 0 130px` → `flex:0 0 auto; min-width:130px; max-width:200px; padding:0 4px`；strong/small 加 `max-width:100%; overflow:hidden; text-overflow:ellipsis`（长名字省略号不撑爆）。 + 3. `.route-overview__line`：`flex:1 0 56px; min-width:56px` → `flex:0 1 56px; min-width:24px`（line 可收缩，滚动兜底更平滑）。 +- 说明：1200px media query 里原有 `justify-content:flex-start` 现与默认一致，冗余但无害，保留未删。仅样式改动，无 JS 逻辑变化。 + +## master-order-dispatch 路由节点地址/联系人加 tooltip（hover 提示完整内容） +- 需求：起-终节点条地址过长截断（"九头山货..."等）时，鼠标移上去能看到完整内容。 +- 改动（`src/views/business/components/master-order-dispatch.vue` 模板，21-45 行）：起/经、终节点各自的 strong（名称）+ 两个 small（地址、联系人）共 6 个文本元素分别用 `` 包裹，`:content` 与原文本一致；保持原有 `text-overflow:ellipsis` 截断视觉不变。 +- `:show-after="120"` 让鼠标停留 120ms 才弹，避免快速划过连续触发多个 tooltip；`placement="top"` 配合节点垂直居中位置弹出，体验稳定。 +- 风险：仅模板增加 6 个 el-tooltip 实例，无 JS/style 改动；与之前段头 `el-tooltip`（segment-checkbox-label）用法一致。 diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 3dc1a70..6e2cb4e 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -37,7 +37,7 @@ } .el-col { - margin-bottom: 8px; + margin-bottom: 0 !important; } .el-main { diff --git a/src/views/business/components/master-order-dispatch.vue b/src/views/business/components/master-order-dispatch.vue index 22fb9a0..e27810e 100644 --- a/src/views/business/components/master-order-dispatch.vue +++ b/src/views/business/components/master-order-dispatch.vue @@ -20,16 +20,28 @@ @@ -676,10 +688,10 @@ export default { .overview-content { display: grid; grid-template-columns: minmax(400px, .9fr) minmax(620px, 1.6fr); gap: 28px; padding: 8px 24px 20px; } .overview-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; margin: 0; dt { margin-bottom: 6px; color: #909399; font-size: 13px; } dd { margin: 0; color: #409eff; font-size: 14px; word-break: break-all; } } .overview-meta dd.overview-meta__plain-value { color: #303133; } -.route-overview { display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 8px; overflow-x: auto; } -.route-overview__node { display: grid; flex: 0 0 130px; justify-items: center; gap: 6px; text-align: center; strong { font-size: 16px; white-space: nowrap; } small { color: #606266; white-space: nowrap; } } +.route-overview { display: flex; align-items: flex-start; justify-content: flex-start; padding: 8px 24px 0; overflow-x: auto; } +.route-overview__node { display: grid; flex: 0 0 auto; min-width: 130px; max-width: 200px; justify-items: center; gap: 6px; text-align: center; padding: 0 4px; strong { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } small { color: #606266; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .route-badge { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 4px; background: #67c23a; color: #fff; font-weight: 600; &.start { background: #409eff; } &.end { background: #e6a23c; } } -.route-overview__line { flex: 1 0 56px; min-width: 56px; height: 32px; margin-top: 0; border-bottom: 6px solid #e4e7ed; } +.route-overview__line { flex: 0 1 56px; min-width: 24px; height: 32px; margin-top: 0; border-bottom: 6px solid #e4e7ed; } .segment-header { min-height: 46px; padding: 0 20px; border-bottom: 1px solid #eff1f7; font-weight: 600; em { color: #409eff; font-style: normal; } } .segment-content { padding: 16px 24px; } .dispatch-form { :deep(.el-form-item) { margin-bottom: 16px; } :deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; } } @@ -704,4 +716,7 @@ export default { .table-actions { display: flex; flex-wrap: wrap; gap: 8px; } @media screen and (max-width: 1200px) { .overview-content { grid-template-columns: 1fr; } .route-overview { justify-content: flex-start; } } @media screen and (max-width: 992px) { .dispatch-bottom { left: 0; width: 100%; } } +.route-overview { + margin-top: -30px !important; +} diff --git a/src/views/transportCapacity/driver.vue b/src/views/transportCapacity/driver.vue index 637e874..84f2add 100644 --- a/src/views/transportCapacity/driver.vue +++ b/src/views/transportCapacity/driver.vue @@ -1601,5 +1601,7 @@ export default { color: #d40000; font-weight: 600; } - +.el-form-item { + margin-bottom: 14px !important; +} diff --git a/src/views/transportCapacity/ship.vue b/src/views/transportCapacity/ship.vue index 5e3f5bd..5d5f2d9 100644 --- a/src/views/transportCapacity/ship.vue +++ b/src/views/transportCapacity/ship.vue @@ -1374,4 +1374,7 @@ export default { color: #d40000; font-weight: 600; } +.el-form-item { + margin-bottom: 14px !important; +} diff --git a/src/views/transportCapacity/vehicle.vue b/src/views/transportCapacity/vehicle.vue index 8f5b810..934767d 100644 --- a/src/views/transportCapacity/vehicle.vue +++ b/src/views/transportCapacity/vehicle.vue @@ -1536,4 +1536,8 @@ export default { color: #d40000; font-weight: 600; } + +.el-form-item { + margin-bottom: 14px !important; +}