style(contract-manage): 优化描述组件布局和样式调整
- 将多个 el-descriptions 组件的 columns 属性从3调整为4,提升信息展示密度 - 扩展备注栏跨度以适应新列数布局 - 修改网格布局grid-template-columns为4列,调整列间距与行间距适配新样式 - 调整部分宽度属性,使界面自适应更合理 - 在customer-archive视图中移除多余的section-card标签,清理无用代码 - 修改全局样式element-ui.scss中的表单项底部间距由1px改为8px,提升控件间距协调性 - 优化输入框及下拉框占位符及选中值颜色,使视觉识别度更高且统一全站设计规范
This commit is contained in:
@@ -127,7 +127,7 @@
|
|||||||
.avue-crud__search .el-form-item--small.el-form-item,
|
.avue-crud__search .el-form-item--small.el-form-item,
|
||||||
.avue-crud__search .el-form-item--large.el-form-item,
|
.avue-crud__search .el-form-item--large.el-form-item,
|
||||||
.avue-crud__search .el-form-item--medium.el-form-item {
|
.avue-crud__search .el-form-item--medium.el-form-item {
|
||||||
margin-bottom: 1px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avue-crud__search .el-form-item__label {
|
.avue-crud__search .el-form-item__label {
|
||||||
@@ -1072,8 +1072,8 @@
|
|||||||
font-size: var(--el-form-label-font-size);
|
font-size: var(--el-form-label-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ============ 加深输入框 / 下拉框占位符颜色 ============
|
// ============ 输入框 / 下拉框占位符与选中值颜色 ============
|
||||||
// 客户反馈默认 placeholder 灰色(#a8abb2)太浅,统一加深一档到 #909399(Element Plus 次级文字标准灰)。
|
// 客户反馈默认 placeholder 灰色(#a8abb2)太浅,统一加深到 #909399(Element Plus 次级文字标准灰)。
|
||||||
// 同时覆盖原生 input/textarea 与 el-select 的占位文本,保证全站一致。
|
// 同时覆盖原生 input/textarea 与 el-select 的占位文本,保证全站一致。
|
||||||
// 注:.el-select__placeholder.is-transparent 是聚焦未选值时的透明态,无需处理。
|
// 注:.el-select__placeholder.is-transparent 是聚焦未选值时的透明态,无需处理。
|
||||||
.el-input__inner,
|
.el-input__inner,
|
||||||
@@ -1092,6 +1092,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 未选中:占位符用次级灰 #909399
|
||||||
.el-select__placeholder {
|
.el-select__placeholder {
|
||||||
color: #909399 !important;
|
color: #909399 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 已选中:选中文本用主文字色 #333333,与占位符明显区分。
|
||||||
|
// 注意:Element Plus 选中值节点同时带 el-select__selected-item 与 el-select__placeholder 两个类,
|
||||||
|
// 而上面占位符规则用了 !important,故此处必须同样 !important 才能胜出(本规则 specificity 更高)。
|
||||||
|
// 仅作用于非禁用态,禁用态保留 Element Plus 的禁用灰(--el-select-disabled-color),避免被覆盖。
|
||||||
|
.el-select__wrapper:not(.is-disabled) .el-select__selected-item {
|
||||||
|
color: #606266 !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -577,7 +577,7 @@
|
|||||||
<div v-loading="detailLoading" class="contract-manage-form contract-manage-detail">
|
<div v-loading="detailLoading" class="contract-manage-form contract-manage-detail">
|
||||||
<section class="contract-manage-form__section contract-manage-form__section--panel">
|
<section class="contract-manage-form__section contract-manage-form__section--panel">
|
||||||
<div class="dialog-section-title">基本信息</div>
|
<div class="dialog-section-title">基本信息</div>
|
||||||
<el-descriptions :column="3" class="contract-manage-detail__descriptions">
|
<el-descriptions :column="4" class="contract-manage-detail__descriptions">
|
||||||
<el-descriptions-item label="签约类型">{{
|
<el-descriptions-item label="签约类型">{{
|
||||||
detailValue('signType')
|
detailValue('signType')
|
||||||
}}</el-descriptions-item>
|
}}</el-descriptions-item>
|
||||||
@@ -620,7 +620,7 @@
|
|||||||
<el-descriptions-item label="回款账期">{{
|
<el-descriptions-item label="回款账期">{{
|
||||||
detailUnitValue('paymentDays', '天')
|
detailUnitValue('paymentDays', '天')
|
||||||
}}</el-descriptions-item>
|
}}</el-descriptions-item>
|
||||||
<el-descriptions-item label="备注" :span="3">{{
|
<el-descriptions-item label="备注" :span="4">{{
|
||||||
detailValue('remark')
|
detailValue('remark')
|
||||||
}}</el-descriptions-item>
|
}}</el-descriptions-item>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
@@ -635,7 +635,7 @@
|
|||||||
|
|
||||||
<section class="contract-manage-form__section contract-manage-form__section--panel">
|
<section class="contract-manage-form__section contract-manage-form__section--panel">
|
||||||
<div class="dialog-section-title">计费信息</div>
|
<div class="dialog-section-title">计费信息</div>
|
||||||
<el-descriptions :column="3" class="contract-manage-detail__descriptions">
|
<el-descriptions :column="4" class="contract-manage-detail__descriptions">
|
||||||
<el-descriptions-item label="费用生成模式">{{
|
<el-descriptions-item label="费用生成模式">{{
|
||||||
detailFeeGenerationMode
|
detailFeeGenerationMode
|
||||||
}}</el-descriptions-item>
|
}}</el-descriptions-item>
|
||||||
@@ -664,7 +664,7 @@
|
|||||||
<el-tab-pane label="预结算配置" name="pre" />
|
<el-tab-pane label="预结算配置" name="pre" />
|
||||||
<el-tab-pane label="正式结算配置" name="formal" />
|
<el-tab-pane label="正式结算配置" name="formal" />
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
<el-descriptions :column="3" class="contract-manage-detail__descriptions">
|
<el-descriptions :column="4" class="contract-manage-detail__descriptions">
|
||||||
<el-descriptions-item label="自动生成结算单">{{
|
<el-descriptions-item label="自动生成结算单">{{
|
||||||
Number(detailSettlementRule.autoGenerate) === 1 ? '开启' : '关闭'
|
Number(detailSettlementRule.autoGenerate) === 1 ? '开启' : '关闭'
|
||||||
}}</el-descriptions-item>
|
}}</el-descriptions-item>
|
||||||
@@ -2182,8 +2182,9 @@ export default {
|
|||||||
|
|
||||||
&__grid {
|
&__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
column-gap: 48px;
|
column-gap: 24px;
|
||||||
|
row-gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__remark {
|
&__remark {
|
||||||
@@ -2196,8 +2197,8 @@ export default {
|
|||||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
width: 360px;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 360px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: #606266;
|
color: #606266;
|
||||||
|
|||||||
@@ -488,7 +488,6 @@
|
|||||||
>新增联系人</el-button
|
>新增联系人</el-button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<section-card>
|
|
||||||
<el-table :data="contactTableData" border class="contact-table">
|
<el-table :data="contactTableData" border class="contact-table">
|
||||||
<el-table-column label="序号" prop="__index" width="90" align="center" />
|
<el-table-column label="序号" prop="__index" width="90" align="center" />
|
||||||
<el-table-column label="联系人姓名" prop="contactName" min-width="150" />
|
<el-table-column label="联系人姓名" prop="contactName" min-width="150" />
|
||||||
@@ -520,7 +519,6 @@
|
|||||||
@size-change="size => handleDetailSizeChange('contact', size)"
|
@size-change="size => handleDetailSizeChange('contact', size)"
|
||||||
@current-change="page => handleDetailCurrentChange('contact', page)"
|
@current-change="page => handleDetailCurrentChange('contact', page)"
|
||||||
/>
|
/>
|
||||||
</section-card>
|
|
||||||
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="收款信息" name="receiptAccounts">
|
<el-tab-pane label="收款信息" name="receiptAccounts">
|
||||||
|
|||||||
Reference in New Issue
Block a user