style(master-order-dispatch): 修复起终路由条左侧节点被裁切问题

- 修改 .route-overview 由右对齐改为左对齐,调整 padding 保证滚动时两端节点完整显示
- 调整 .route-overview__node 的 flex 属性,限制最小和最大宽度,添加文本溢出省略样式防止撑爆
- 优化 .route-overview__line 的 flex 属性,使其可收缩,提升滚动时平滑度
- 保留 1200px 媒体查询中原有的 justify-content 设置,避免影响现有布局
- 统一给各 transportCapacity 相关 vue 文件中的 .el-form-item 添加了底部外边距样式,增强表单间距
- 调整 element-ui 的 .el-col 底部外边距为0,统一样式规范
This commit is contained in:
2026-08-21 16:03:02 +08:00
parent 851379f4de
commit bcdd412d95
6 changed files with 49 additions and 11 deletions
+14
View File
@@ -159,3 +159,17 @@
## ship 页 label 规则:最多 6 汉字宽、超出换行 ## ship 页 label 规则:最多 6 汉字宽、超出换行
- `src/views/transportCapacity/ship.vue`el-form `label-width`(原 HEAD 为 auto,工作区历史为 150)→ `100`6 汉字≈84px+冒号≈98px100px 恰容 6 字);`.ship-form` 内新增 `:deep(.el-form-item__label) { white-space: normal; line-height: 20px }` 允许换行。适用整个 ship 表单(含证书区)。 - `src/views/transportCapacity/ship.vue`el-form `label-width`(原 HEAD 为 auto,工作区历史为 150)→ `100`6 汉字≈84px+冒号≈98px100px 恰容 6 字);`.ship-form` 内新增 `:deep(.el-form-item__label) { white-space: normal; line-height: 20px }` 允许换行。适用整个 ship 表单(含证书区)。
- 注意:改该文件前先确认 git 暂存区状态,`git checkout -- <file>` 恢复的是 index 版本;本文件 index=HEAD=auto,工作区曾为 150(历史未提交改动),已被本次需求覆盖。 - 注意:改该文件前先确认 git 暂存区状态,`git checkout -- <file>` 恢复的是 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 个文本元素分别用 `<el-tooltip placement="top" :show-after="120">` 包裹,`:content` 与原文本一致;保持原有 `text-overflow:ellipsis` 截断视觉不变。
- `:show-after="120"` 让鼠标停留 120ms 才弹,避免快速划过连续触发多个 tooltip;`placement="top"` 配合节点垂直居中位置弹出,体验稳定。
- 风险:仅模板增加 6 个 el-tooltip 实例,无 JS/style 改动;与之前段头 `el-tooltip`segment-checkbox-label)用法一致。
+1 -1
View File
@@ -37,7 +37,7 @@
} }
.el-col { .el-col {
margin-bottom: 8px; margin-bottom: 0 !important;
} }
.el-main { .el-main {
@@ -20,16 +20,28 @@
<template v-for="(route, index) in routes" :key="route.segmentNo"> <template v-for="(route, index) in routes" :key="route.segmentNo">
<div class="route-overview__node"> <div class="route-overview__node">
<span :class="['route-badge', index === 0 ? 'start' : 'middle']">{{ index === 0 ? '起' : '经' }}</span> <span :class="['route-badge', index === 0 ? 'start' : 'middle']">{{ index === 0 ? '起' : '经' }}</span>
<strong>{{ route.departureName || '-' }}</strong> <el-tooltip :content="route.departureName || '-'" placement="top" :show-after="120">
<small>{{ route.departureAddress || '-' }}</small> <strong>{{ route.departureName || '-' }}</strong>
<small>{{ contactText(route.departureContact, route.departurePhone) }}</small> </el-tooltip>
<el-tooltip :content="route.departureAddress || '-'" placement="top" :show-after="120">
<small>{{ route.departureAddress || '-' }}</small>
</el-tooltip>
<el-tooltip :content="contactText(route.departureContact, route.departurePhone)" placement="top" :show-after="120">
<small>{{ contactText(route.departureContact, route.departurePhone) }}</small>
</el-tooltip>
</div> </div>
<div class="route-overview__line"></div> <div class="route-overview__line"></div>
<div v-if="index === routes.length - 1" class="route-overview__node"> <div v-if="index === routes.length - 1" class="route-overview__node">
<span class="route-badge end"></span> <span class="route-badge end"></span>
<strong>{{ route.arrivalName || '-' }}</strong> <el-tooltip :content="route.arrivalName || '-'" placement="top" :show-after="120">
<small>{{ route.arrivalAddress || '-' }}</small> <strong>{{ route.arrivalName || '-' }}</strong>
<small>{{ contactText(route.arrivalContact, route.arrivalPhone) }}</small> </el-tooltip>
<el-tooltip :content="route.arrivalAddress || '-'" placement="top" :show-after="120">
<small>{{ route.arrivalAddress || '-' }}</small>
</el-tooltip>
<el-tooltip :content="contactText(route.arrivalContact, route.arrivalPhone)" placement="top" :show-after="120">
<small>{{ contactText(route.arrivalContact, route.arrivalPhone) }}</small>
</el-tooltip>
</div> </div>
</template> </template>
</div> </div>
@@ -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-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 { 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; } .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 { 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 130px; justify-items: center; gap: 6px; text-align: center; strong { font-size: 16px; white-space: nowrap; } small { color: #606266; white-space: nowrap; } } .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-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-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; } .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%; } } .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; } .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: 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%; } } @media screen and (max-width: 992px) { .dispatch-bottom { left: 0; width: 100%; } }
.route-overview {
margin-top: -30px !important;
}
</style> </style>
+3 -1
View File
@@ -1601,5 +1601,7 @@ export default {
color: #d40000; color: #d40000;
font-weight: 600; font-weight: 600;
} }
.el-form-item {
margin-bottom: 14px !important;
}
</style> </style>
+3
View File
@@ -1374,4 +1374,7 @@ export default {
color: #d40000; color: #d40000;
font-weight: 600; font-weight: 600;
} }
.el-form-item {
margin-bottom: 14px !important;
}
</style> </style>
+4
View File
@@ -1536,4 +1536,8 @@ export default {
color: #d40000; color: #d40000;
font-weight: 600; font-weight: 600;
} }
.el-form-item {
margin-bottom: 14px !important;
}
</style> </style>