fix(vehicle): 调整客户档案地区地址布局与宽度

- 将客户档案页面“所在地区”所在列从12改为6,新增“详细地址”列宽为6
- 修改“所在地区”级联选择器宽度由250px改为240px,匹配更合理的宽度设计
- 优化地址相关表单的布局,提高信息展示的清晰度和一致性
- transportCapacity/ship 组合控件宽度对齐至250px,解决两个date-picker和select宽度不一致的问题
- 修复项目表单中el-cascader宽度未统一的问题,确保级联选择器与其他输入控件同宽
This commit is contained in:
2026-09-02 15:00:40 +08:00
parent 6eff4b7383
commit 4ffceb0413
2 changed files with 20 additions and 9 deletions
+7
View File
@@ -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`,导致级联选择器按内容宽度收缩,未填满栅格列。
+9 -5
View File
@@ -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,12 +310,16 @@
filterable filterable
@change="handleRegisteredRegionChange" @change="handleRegisteredRegionChange"
/> />
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="详细地址" prop="registeredDetailAddress" required>
<el-input <el-input
v-model="archiveForm.registeredDetailAddress" v-model="archiveForm.registeredDetailAddress"
maxlength="255" maxlength="255"
placeholder="请输入详细地址" placeholder="请输入详细地址"
/> />
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -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;
} }