fix(styles): 调整必填星号与标签首行对齐样式
- 修改 .el-form-item__label 的对齐方式使必填星号与首行文字齐平 - 设置多标签布局下星号对齐,兼容单行和多行标签显示 - 调整 ::before 伪元素行高和外边距,确保星号基线一致 fix(project-apply): 更新表单字段“资金需求”为“履约保证金” - 修改项目申请页面中“资金需求”标签为“履约保证金” - 更新对应验证规则标签名称,保持校验一致性 chore(config): 更新开发服务器端口及代理设置 - 注释旧服务器配置,启用新端口 2889 - 更新 /api 代理目标地址为 172.16.203.228:8000 - 保持代理跨域设置不变
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
|
||||||
|
## 必填星号与 label 首行齐平(全局)
|
||||||
|
- 根因:`element-ui.scss` 中 `.el-form-item--label-right .el-form-item__label { align-items:center }` 使 inline-flex label 的星号 `::before`(独立 flex 子项)在多行折行时被垂直居中。
|
||||||
|
- 修复:label 改 `align-self:center`(整体仍随行垂直居中)+ `align-items:flex-start`(星号/文字首行齐平),覆盖 label-right/left/top 三种位置;旧 inline-block 注释已修正。
|
||||||
|
- 影响页面:project-apply 独立表单页等所有多行 label 场景(弹窗内 `white-space:nowrap` 不受影响)。
|
||||||
@@ -1047,23 +1047,29 @@
|
|||||||
.el-form-item--default .el-form-item__label {
|
.el-form-item--default .el-form-item__label {
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
}
|
}
|
||||||
.el-form-item--label-right .el-form-item__label {
|
// ============ 必填星号 * 与 label 首行齐平(全局) ============
|
||||||
align-items: center;
|
// label 为 inline-flex,星号 ::before 与文字是两个独立 flex 子项;
|
||||||
|
// 多行折行 label 若 align-items: center,星号会被垂直居中到第二行位置。
|
||||||
|
// align-items: flex-start 让星号与文字首行齐平;
|
||||||
|
// align-self: center 让 label 整体不随表单行(32px)拉伸,单行 label 仍与输入框垂直居中,视觉不变。
|
||||||
|
.el-form-item--label-right .el-form-item__label,
|
||||||
|
.el-form-item--label-left .el-form-item__label,
|
||||||
|
.el-form-item--label-top .el-form-item__label {
|
||||||
|
align-self: center;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
.el-form-item--default {
|
.el-form-item--default {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ============ 必填星号 * 与首行文字垂直居中 ============
|
// 辅助:星号跟随 label 行高,保证与首行文字基线一致(单行/多行通用)。
|
||||||
// Element Plus 默认 .el-form-item__label 为 inline-flex + align-items: flex-start,
|
// 注:真正的首行对齐由上方 .el-form-item__label 的 align-items: flex-start 完成;
|
||||||
// 星号 :before 高度(1em) 与文字行盒(line-height) 不一致时,多行/折行 label 会偏上。
|
// 客商档案(customer-archive)的 label 为 auto 高度 + padding 下沉方案,scoped 特异性更高会覆盖本规则。
|
||||||
// 让 :before 跟随 label 行高、以 inline-block 参与行内对齐即可修复,
|
|
||||||
// 兼容单行(默认 32px)与多行(auto + 18px)两种 label 高度场景。
|
|
||||||
// 注:客商档案(customer-archive)的 label 为 auto 高度 + padding 下沉方案,scoped 特异性更高会覆盖本规则。
|
|
||||||
.el-form-item.is-required .el-form-item__label::before {
|
.el-form-item.is-required .el-form-item__label::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
margin-top: 2px !important;
|
||||||
}
|
}
|
||||||
//.el-form-item {
|
//.el-form-item {
|
||||||
// margin-bottom: 15px !important;
|
// margin-bottom: 15px !important;
|
||||||
|
|||||||
@@ -376,7 +376,7 @@
|
|||||||
<template #suffix>万元</template>
|
<template #suffix>万元</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="资金需求" prop="fundDemand">
|
<el-form-item label="履约保证金" prop="fundDemand">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="form.fundDemand"
|
v-model="form.fundDemand"
|
||||||
@input="value => handleNumberInput('fundDemand', value)"
|
@input="value => handleNumberInput('fundDemand', value)"
|
||||||
@@ -1025,7 +1025,7 @@ export default {
|
|||||||
],
|
],
|
||||||
projectScale: [{ label: '项目规模', validator: validateAmount, trigger: 'blur' }],
|
projectScale: [{ label: '项目规模', validator: validateAmount, trigger: 'blur' }],
|
||||||
estimatedProfit: [{ label: '预估利润', validator: validateAmount, trigger: 'blur' }],
|
estimatedProfit: [{ label: '预估利润', validator: validateAmount, trigger: 'blur' }],
|
||||||
fundDemand: [{ label: '资金需求', validator: validateAmount, trigger: 'blur' }],
|
fundDemand: [{ label: '履约保证金', validator: validateAmount, trigger: 'blur' }],
|
||||||
handlerUserId: [
|
handlerUserId: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
|
|||||||
+13
-13
@@ -47,26 +47,26 @@ export default ({ mode, command }) => {
|
|||||||
__VUE_I18N_LEGACY_API__: true,
|
__VUE_I18N_LEGACY_API__: true,
|
||||||
__INTLIFY_PROD_DEVTOOLS__: false,
|
__INTLIFY_PROD_DEVTOOLS__: false,
|
||||||
},
|
},
|
||||||
server: {
|
|
||||||
port: 2888,
|
|
||||||
proxy: {
|
|
||||||
'/api': {
|
|
||||||
target: 'http://localhost',
|
|
||||||
//target: 'https://saber3.bladex.cn/api',
|
|
||||||
changeOrigin: true,
|
|
||||||
rewrite: path => path.replace(/^\/api/, ''),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// server: {
|
// server: {
|
||||||
// port: 2889,
|
// port: 2888,
|
||||||
// proxy: {
|
// proxy: {
|
||||||
// '/api': {
|
// '/api': {
|
||||||
// target: 'http://172.16.203.228:8000',
|
// target: 'http://localhost',
|
||||||
|
// //target: 'https://saber3.bladex.cn/api',
|
||||||
// changeOrigin: true,
|
// changeOrigin: true,
|
||||||
|
// rewrite: path => path.replace(/^\/api/, ''),
|
||||||
// },
|
// },
|
||||||
// },
|
// },
|
||||||
// },
|
// },
|
||||||
|
server: {
|
||||||
|
port: 2889,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://172.16.203.228:8000',
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'~': resolve(__dirname, './'),
|
'~': resolve(__dirname, './'),
|
||||||
|
|||||||
Reference in New Issue
Block a user