refactor(ui): 优化多页面表单布局及样式统一

- 统一用 section-card 组件替换原有分段结构，简化模板结构
- 调整表单列宽为 6 栅格，提高响应式适配效果
- 修改标题类名，采用一致的 archive-page-form__title
- 精简并合并样式，移除各页面冗余标题和分段样式声明
- 全站业务状态标签改为普通文字，不显示背景和圆点，字体颜色统一
- 优化 element-ui.scss 中表格操作列的 el-link 样式，兼容多层 DOM 结构
- 增加表格操作列 el-tooltip 单元格自动宽度，防止内容裁切
- 调整正式结算列表操作列宽度，提升显示空间
- 简化部分页面表单控件宽度样式，统一控件宽度及间距
- 删除多处无用样式，减少样式冗余，提高代码可维护性

src/views/payment/bill-payment-form.vue

@@ -8,10 +8,9 @@
       label-width="auto"
       class="bill-payment-form-page__form"
     >
-      <section class="bill-payment-form-page__section">
-        <div class="bill-payment-form-page__section-title">基本信息</div>
-        <el-row :gutter="48">
-          <el-col :span="12">
+      <section-card title="基本信息">
+        <el-row :gutter="24">
+          <el-col :span="6">
             <el-form-item label="票据号码" prop="billLedgerId">
               <el-input
                 v-model="form.billNo"
@@ -24,9 +23,13 @@
                 </template>
               </el-input>
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="可用余额">
               <el-input :model-value="formatMoney(form.availableBalance)" disabled />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="付款日期" prop="paymentDate">
               <el-date-picker
                 v-model="form.paymentDate"
@@ -37,10 +40,12 @@
               />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="6">
             <el-form-item label="票面金额">
               <el-input :model-value="formatMoney(form.faceAmount)" disabled />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="本次使用" prop="usedAmount">
               <el-input-number
                 v-model="form.usedAmount"
@@ -66,10 +71,9 @@
             </el-form-item>
           </el-col>
         </el-row>
-      </section>
+      </section-card>
 
-      <section class="bill-payment-form-page__section">
-        <div class="bill-payment-form-page__section-title">附件信息</div>
+      <section-card title="附件信息">
         <el-table :data="form.attachments" border>
           <el-table-column type="index" label="序号" width="64" align="center" />
           <el-table-column label="文件名" min-width="220">
@@ -115,7 +119,7 @@
           button-text="上传"
           @change="normalizeAttachments"
         />
-      </section>
+      </section-card>
 
       <div class="bill-payment-form-page__actions">
         <template v-if="!readonly">
@@ -373,23 +377,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.bill-payment-form-page__section {
-  margin-bottom: 24px;
-}
-.bill-payment-form-page__section-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-  font-size: 18px;
-  font-weight: 600;
-}
-.bill-payment-form-page__section-title::before {
-  width: 4px;
-  height: 20px;
-  margin-right: 8px;
-  background: #409eff;
-  content: '';
-}
 .bill-payment-form-page__form :deep(.el-form-item) {
   margin-bottom: 16px;
 }
@@ -426,7 +413,7 @@ export default {
   background: #fafafa;
 }
 @media (max-width: 1024px) {
-  .bill-payment-form-page :deep(.el-col-12) {
+  .bill-payment-form-page :deep(.el-col-6) {
     max-width: 100%;
     flex: 0 0 100%;
   }