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
@@ -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;