style(business-crud-page): 调整调度弹窗卡片对齐及货物信息标题布局
- 调整调度弹窗顶部“基本信息”与“收发货路线”两卡片最小高度至260px,实现高度一致 - 通过设置 flex 属性确保卡片内部白底区域等高对齐 - 修改调度摘要容器底部间距为12px,避免与卡片自身 margin 叠加 - 收紧“货物信息”标题的行高,保证与右侧链接垂直居中对齐 - 设置右侧导入货物和常用货物链接使用 inline-flex 和垂直居中样式 - master-order-editor 组件中调整页面布局,将行内元素两端对齐,并移除不必要背景色
This commit is contained in:
@@ -79,3 +79,17 @@
|
|||||||
- 校验:文本格式与原串逐字符一致,仅「件」数字变色;未动 `dispatchSummaryItems` 等其它逻辑。
|
- 校验:文本格式与原串逐字符一致,仅「件」数字变色;未动 `dispatchSummaryItems` 等其它逻辑。
|
||||||
- 修正(用户反馈):原把整段「数字+件」一起变蓝导致「件」字也蓝。改为数字与单位拆成两个 span(`dispatch-summary-value` 仅含数字、`dispatch-summary-unit` 含单位),蓝色与加粗只作用于数字,「件」字保持默认色。
|
- 修正(用户反馈):原把整段「数字+件」一起变蓝导致「件」字也蓝。改为数字与单位拆成两个 span(`dispatch-summary-value` 仅含数字、`dispatch-summary-unit` 含单位),蓝色与加粗只作用于数字,「件」字保持默认色。
|
||||||
- 二次修正(用户反馈):「吨」数字也要蓝。将 `isPiece` 由 `unit==='件'` 放宽为恒 `true`,即所有单位的数字均蓝色、单位字默认色(覆盖 吨/件/方 等)。
|
- 二次修正(用户反馈):「吨」数字也要蓝。将 `isPiece` 由 `unit==='件'` 放宽为恒 `true`,即所有单位的数字均蓝色、单位字默认色(覆盖 吨/件/方 等)。
|
||||||
|
|
||||||
|
## business-crud-page.vue 调度弹窗顶部两卡片对齐 + 下方间距 12px
|
||||||
|
- 需求:截图显示「基本信息」与「收发货路线」两张 section-card 高度不一致,且与下方「待调度列表」间距需 12px。
|
||||||
|
- 改动(src/views/business/components/business-crud-page.vue):
|
||||||
|
1. `&__dispatch-summary` 容器 `margin-bottom:8px→12px`,并在容器内覆盖 `.section-card{margin-bottom:0 !important}`,避免 section-card 自带 8px margin 与容器 margin 叠加。
|
||||||
|
2. `&__dispatch-summary-card` 与 `&__dispatch-route-card` 加 `min-height:260px`;内部 `:deep(.section-card)` 与 `:deep(.section-card__body)` 均 `flex:1` 并设 `display:flex;flex-direction:column`,确保左右卡片外框与内部白底区域都等高对齐。
|
||||||
|
- 校验:grid `align-items:stretch` + section-card flex:1 撑满,卡片底部会对齐;下方间距精确 12px。
|
||||||
|
|
||||||
|
## business-crud-page.vue「货物信息」标题与右侧链接水平对齐
|
||||||
|
- 需求:截图显示「货物信息」标题与右侧「导入货物」「常用货物」两个 `el-link` 不在同一水平线。
|
||||||
|
- 改动(src/views/business/components/business-crud-page.vue):
|
||||||
|
1. `.dialog-section-title > span { line-height: 1 }` 收紧标题文字行高。
|
||||||
|
2. `&__section-actions .el-link { display:inline-flex; align-items:center; line-height:1 }` 让链接严格垂直居中。
|
||||||
|
- 校验:两处使用 `.dialog-section-title--action.business-crud-page__goods-title` + `__section-actions` 的货物信息标题都会生效。
|
||||||
|
|||||||
@@ -9618,6 +9618,10 @@ export default {
|
|||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: block;
|
display: block;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
@@ -9647,6 +9651,12 @@ export default {
|
|||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|
||||||
|
.el-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__task {
|
&__task {
|
||||||
|
|||||||
@@ -1061,7 +1061,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
h3 {
|
h3 {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
@@ -1071,7 +1071,6 @@ export default {
|
|||||||
.goods-toolbar {
|
.goods-toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
background-color: #f3f3f3;
|
|
||||||
}
|
}
|
||||||
.goods-actions {
|
.goods-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user