From 9342e674c584c1c51333265cf31b0c7fd4d3a285 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Thu, 27 Aug 2026 15:55:17 +0800
Subject: [PATCH] =?UTF-8?q?style(contract-manage):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=8F=8F=E8=BF=B0=E7=BB=84=E4=BB=B6=E5=B8=83=E5=B1=80=E5=92=8C?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将多个 el-descriptions 组件的 columns 属性从3调整为4，提升信息展示密度
- 扩展备注栏跨度以适应新列数布局
- 修改网格布局grid-template-columns为4列，调整列间距与行间距适配新样式
- 调整部分宽度属性，使界面自适应更合理
- 在customer-archive视图中移除多余的section-card标签，清理无用代码
- 修改全局样式element-ui.scss中的表单项底部间距由1px改为8px，提升控件间距协调性
- 优化输入框及下拉框占位符及选中值颜色，使视觉识别度更高且统一全站设计规范
---
 src/styles/element-ui.scss             | 15 ++++++++++++---
 src/views/business/contract-manage.vue | 17 +++++++++--------
 src/views/vehicle/customer-archive.vue |  2 --
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index e47a785..c19dc9f 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -127,7 +127,7 @@
 .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--medium.el-form-item {
-  margin-bottom: 1px;
+  margin-bottom: 8px;
 }
 
 .avue-crud__search .el-form-item__label {
@@ -1072,8 +1072,8 @@
   font-size: var(--el-form-label-font-size);
 }
 
-// ============ 加深输入框 / 下拉框占位符颜色 ============
-// 客户反馈默认 placeholder 灰色（#a8abb2）太浅，统一加深一档到 #909399（Element Plus 次级文字标准灰）。
+// ============ 输入框 / 下拉框占位符与选中值颜色 ============
+// 客户反馈默认 placeholder 灰色（#a8abb2）太浅，统一加深到 #909399（Element Plus 次级文字标准灰）。
 // 同时覆盖原生 input/textarea 与 el-select 的占位文本，保证全站一致。
 // 注：.el-select__placeholder.is-transparent 是聚焦未选值时的透明态，无需处理。
 .el-input__inner,
@@ -1092,6 +1092,15 @@
   }
 }
 
+// 未选中：占位符用次级灰 #909399
 .el-select__placeholder {
   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;
+}
diff --git a/src/views/business/contract-manage.vue b/src/views/business/contract-manage.vue
index 77f0e57..cb388b0 100644
--- a/src/views/business/contract-manage.vue
+++ b/src/views/business/contract-manage.vue
@@ -577,7 +577,7 @@
       <div v-loading="detailLoading" class="contract-manage-form contract-manage-detail">
         <section class="contract-manage-form__section contract-manage-form__section--panel">
           <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="签约类型">{{
               detailValue('signType')
             }}</el-descriptions-item>
@@ -620,7 +620,7 @@
             <el-descriptions-item label="回款账期">{{
               detailUnitValue('paymentDays', '天')
             }}</el-descriptions-item>
-            <el-descriptions-item label="备注" :span="3">{{
+            <el-descriptions-item label="备注" :span="4">{{
               detailValue('remark')
             }}</el-descriptions-item>
           </el-descriptions>
@@ -635,7 +635,7 @@
 
         <section class="contract-manage-form__section contract-manage-form__section--panel">
           <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="费用生成模式">{{
               detailFeeGenerationMode
             }}</el-descriptions-item>
@@ -664,7 +664,7 @@
             <el-tab-pane label="预结算配置" name="pre" />
             <el-tab-pane label="正式结算配置" name="formal" />
           </el-tabs>
-          <el-descriptions :column="3" class="contract-manage-detail__descriptions">
+          <el-descriptions :column="4" class="contract-manage-detail__descriptions">
             <el-descriptions-item label="自动生成结算单">{{
               Number(detailSettlementRule.autoGenerate) === 1 ? '开启' : '关闭'
             }}</el-descriptions-item>
@@ -2182,8 +2182,9 @@ export default {
 
   &__grid {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    column-gap: 48px;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    column-gap: 24px;
+    row-gap: 0;
   }
 
   &__remark {
@@ -2196,8 +2197,8 @@ export default {
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     align-items: center;
     gap: 8px;
-    width: 360px;
-    max-width: 100%;
+    width: 100%;
+    max-width: 360px;
 
     span {
       color: #606266;
diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue
index ba5b0d4..8bf015f 100644
--- a/src/views/vehicle/customer-archive.vue
+++ b/src/views/vehicle/customer-archive.vue
@@ -488,7 +488,6 @@
                 >新增联系人</el-button
               >
             </div>
-            <section-card>
               <el-table :data="contactTableData" border class="contact-table">
                 <el-table-column label="序号" prop="__index" width="90" align="center" />
                 <el-table-column label="联系人姓名" prop="contactName" min-width="150" />
@@ -520,7 +519,6 @@
                 @size-change="size => handleDetailSizeChange('contact', size)"
                 @current-change="page => handleDetailCurrentChange('contact', page)"
               />
-            </section-card>
 
           </el-tab-pane>
           <el-tab-pane label="收款信息" name="receiptAccounts">