style(business-crud-page): 优化运单详情起终点区域样式
- 将起终点区域改为垂直时间轴风格,左侧显示两个圆点,右侧显示详细地址及省市区信息 - 删除旧的起终点样式类,确认无其他引用,保证代码清晰 - 实现响应式设计,窄屏时垂直时间轴自动变为整行展示 style(master-order-editor): 调整多联总单编辑页收发货信息布局 - 修复竖向时间轴节点图标被压扁问题,增加最小宽高和防止缩小样式 - 优化收发货信息输入区网格布局,地址项独占前两列,宽度加大,支持长地址显示 - 响应式下地址项独占整行,保证小屏幕下不被截断 - 修改搜索栏白底样式,让选择常用地址弹窗搜索栏也使用白底,保持视觉一致性
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user