调整项目-合同-运单-结算逻辑链

src/views/settlement/transport-reconciliation.vue

@@ -31,10 +31,6 @@
     </section>
 
     <section class="reconciliation-page__table-panel">
-      <el-tabs v-model="settlementType" @tab-change="handleTabChange">
-        <el-tab-pane label="应付" name="payable" />
-        <el-tab-pane label="应收" name="receivable" />
-      </el-tabs>
       <div class="reconciliation-page__toolbar">
         <div>
           <el-button
@@ -51,6 +47,15 @@
           </el-tooltip>
         </div>
       </div>
+      <el-tabs
+        v-model="settlementType"
+        class="reconciliation-page__settlement-tabs"
+        type="card"
+        @tab-change="handleTabChange"
+      >
+        <el-tab-pane label="应付" name="payable" />
+        <el-tab-pane label="应收" name="receivable" />
+      </el-tabs>
       <el-table v-loading="loading" :data="rows" border @selection-change="selection = $event">
         <el-table-column type="selection" width="52" fixed="left" align="center" />
         <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
@@ -314,6 +319,12 @@ export default {
   align-items: center;
   gap: 8px;
 }
+.reconciliation-page__settlement-tabs {
+  margin-bottom: 0;
+}
+.reconciliation-page__settlement-tabs :deep(.el-tabs__header) {
+  margin: 0;
+}
 .reconciliation-page__links {
   display: flex;
   flex-wrap: wrap;