fix(vehicle): 调整客户档案地区地址布局与宽度
- 将客户档案页面“所在地区”所在列从12改为6,新增“详细地址”列宽为6 - 修改“所在地区”级联选择器宽度由250px改为240px,匹配更合理的宽度设计 - 优化地址相关表单的布局,提高信息展示的清晰度和一致性 - transportCapacity/ship 组合控件宽度对齐至250px,解决两个date-picker和select宽度不一致的问题 - 修复项目表单中el-cascader宽度未统一的问题,确保级联选择器与其他输入控件同宽
This commit is contained in:
@@ -39,6 +39,13 @@
|
|||||||
- 样式清理:删除无用的 `.cert-upload-grid { padding-top:8px }` / `.cert-upload-spacer { height:1px }`;保留 `.cert-block` / `.cert-block__title` / `.ship-upload-item`(`margin-bottom:14px`)。
|
- 样式清理:删除无用的 `.cert-upload-grid { padding-top:8px }` / `.cert-upload-spacer { height:1px }`;保留 `.cert-block` / `.cert-block__title` / `.ship-upload-item`(`margin-bottom:14px`)。
|
||||||
- 验证:用户刷新浏览器看新布局。
|
- 验证:用户刷新浏览器看新布局。
|
||||||
|
|
||||||
|
## transportCapacity/ship 组合控件宽度对齐 250px 体系
|
||||||
|
- 问题:基础船舶信息里「安放龙骨日期/建造完工日期」的起止两个 date-picker、「航区」的 select 都是 `flex:1` 撑满所在 span=12 整列(约 498px),明显比单字段 250px 宽,视觉不协调。
|
||||||
|
- 修复(`src/views/transportCapacity/ship.vue` 末尾 scoped 样式):
|
||||||
|
- `.date-range-inline :deep(.el-date-editor)` 由 `flex:1; min-width:0` 增加 `max-width: 250px` → 两个 date-picker 在窗够宽时各对齐 250px、彼此等宽,窄窗时 flex:1 收缩不溢出。
|
||||||
|
- `.navigation-area-field :deep(.el-select)` 由 `flex:1; min-width:0` 增加 `max-width: 250px` → 航区 select 对齐 250px 单字段。
|
||||||
|
- 说明:`flex:1` 保底防溢出,`max-width:250px` 把组合控件拉回与单字段一致的 250px 体系(受所在列宽限制,安放龙骨 span=12 在常规窗宽下两个 date-picker 约 226px 等宽,更宽窗自动到 250px)。
|
||||||
|
|
||||||
## business/project-apply.vue 表单「业务部门/承办部门」级联选择器宽度统一
|
## business/project-apply.vue 表单「业务部门/承办部门」级联选择器宽度统一
|
||||||
- 问题:项目新增/编辑表单(含独立表单页 `/business/project-apply/form`)中,业务部门、承办部门两个 `el-cascader` 的按钮宽度与同行的 select/input 不一致。
|
- 问题:项目新增/编辑表单(含独立表单页 `/business/project-apply/form`)中,业务部门、承办部门两个 `el-cascader` 的按钮宽度与同行的 select/input 不一致。
|
||||||
- 根因:scoped 样式里强制 100% 宽度的控件列表(`el-input` / `el-select` / `el-tree-select` / `el-date-editor`)漏了 `el-cascader`,导致级联选择器按内容宽度收缩,未填满栅格列。
|
- 根因:scoped 样式里强制 100% 宽度的控件列表(`el-input` / `el-select` / `el-tree-select` / `el-date-editor`)漏了 `el-cascader`,导致级联选择器按内容宽度收缩,未填满栅格列。
|
||||||
|
|||||||
@@ -297,8 +297,8 @@
|
|||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="6">
|
||||||
<el-form-item label="地址" prop="registeredDetailAddress" required>
|
<el-form-item label="所在地区" prop="registeredDetailAddress" required>
|
||||||
<div class="archive-form__address">
|
<div class="archive-form__address">
|
||||||
<el-cascader
|
<el-cascader
|
||||||
ref="registeredRegionCascader"
|
ref="registeredRegionCascader"
|
||||||
@@ -310,14 +310,18 @@
|
|||||||
filterable
|
filterable
|
||||||
@change="handleRegisteredRegionChange"
|
@change="handleRegisteredRegionChange"
|
||||||
/>
|
/>
|
||||||
<el-input
|
|
||||||
v-model="archiveForm.registeredDetailAddress"
|
|
||||||
maxlength="255"
|
|
||||||
placeholder="请输入详细地址"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="详细地址" prop="registeredDetailAddress" required>
|
||||||
|
<el-input
|
||||||
|
v-model="archiveForm.registeredDetailAddress"
|
||||||
|
maxlength="255"
|
||||||
|
placeholder="请输入详细地址"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</section-card>
|
</section-card>
|
||||||
|
|
||||||
@@ -4757,8 +4761,8 @@ export default {
|
|||||||
|
|
||||||
.archive-form__address {
|
.archive-form__address {
|
||||||
:deep(.el-cascader) {
|
:deep(.el-cascader) {
|
||||||
flex: 0 0 250px;
|
flex: 0 0 240px;
|
||||||
width: 250px;
|
width: 240px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user