From 45281171433c21f26d80a1db1323456a424a1364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 21 Aug 2026 11:15:42 +0800
Subject: [PATCH] =?UTF-8?q?style(components):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=BF=90=E8=BE=93=E8=83=BD=E5=8A=9B=E6=A8=A1=E5=9D=97=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A1=B5=E6=A0=B7=E5=BC=8F=E5=92=8C=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改ship-ledger组件标签页类型为border-card，提升视觉效果
- 引入SectionCard组件以支持布局增强
- 将vehicle-ledger组件中el-tabs结构调整为包含子元素，提升代码可读性
- 为vehicle-ledger组件标签页内容添加内边距，改善样式细节
- 统一标签页区域的样式，增强界面一致性
---
 .../components/ship-ledger.vue                |  4 +-
 .../components/vehicle-ledger.vue             | 51 ++++++++++---------
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/views/transportCapacity/components/ship-ledger.vue b/src/views/transportCapacity/components/ship-ledger.vue
index e25ae95..f3971d7 100644
--- a/src/views/transportCapacity/components/ship-ledger.vue
+++ b/src/views/transportCapacity/components/ship-ledger.vue
@@ -19,7 +19,7 @@
           </div>
         </div>
       </section>
-      <el-tabs v-model="activeTab" @tab-change="loadRecords">
+      <el-tabs type="border-card" v-model="activeTab" @tab-change="loadRecords">
         <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" />
       </el-tabs>
       <el-table v-loading="tableLoading" :data="records" border stripe>
@@ -33,6 +33,7 @@
 
 <script>
 import { getDetail } from '@/api/transportCapacity/transport-ship';
+import SectionCard from '@/components/section-card/main.vue';
 import { getList as insurance } from '@/api/vehicle/insurance-record';
 import { getList as violation } from '@/api/vehicle/violation-record';
 import { getList as maintenance } from '@/api/vehicle/maintenance-record';
@@ -58,6 +59,7 @@ const tabConfigs = [
 ].map(([name, label, request, cols]) => ({ name, label, request, columns: cols }));
 
 export default {
+  components: { SectionCard },
   props: { modelValue: Boolean, ship: { type: Object, default: () => ({}) } }, emits: ['update:modelValue'],
   data() { return { detailLoading: false, tableLoading: false, shipDetail: {}, activeTab: 'insurance', records: [], page: { current: 1, size: 10, total: 0 } }; },
   computed: {
diff --git a/src/views/transportCapacity/components/vehicle-ledger.vue b/src/views/transportCapacity/components/vehicle-ledger.vue
index 9b300f8..353cce2 100644
--- a/src/views/transportCapacity/components/vehicle-ledger.vue
+++ b/src/views/transportCapacity/components/vehicle-ledger.vue
@@ -64,30 +64,31 @@
       </section-card>
 
       <el-tabs type="border-card" v-model="activeTab" class="vehicle-ledger__tabs" @tab-change="loadRecords">
-        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" />
+        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
+          <el-table v-loading="tableLoading" :data="records" border stripe>
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column
+              v-for="column in activeColumns"
+              :key="column.prop"
+              :prop="column.prop"
+              :label="column.label"
+              :min-width="column.width || 140"
+              show-overflow-tooltip
+            />
+          </el-table>
+          <div class="vehicle-ledger__pagination">
+            <el-pagination
+              v-model:current-page="page.current"
+              v-model:page-size="page.size"
+              :page-sizes="[10, 20, 50]"
+              :total="page.total"
+              layout="total, sizes, prev, pager, next"
+              @size-change="handlePageChange"
+              @current-change="loadRecords"
+            />
+          </div>
+        </el-tab-pane>
       </el-tabs>
-      <el-table v-loading="tableLoading" :data="records" border stripe>
-        <el-table-column type="index" label="序号" width="70" align="center" />
-        <el-table-column
-          v-for="column in activeColumns"
-          :key="column.prop"
-          :prop="column.prop"
-          :label="column.label"
-          :min-width="column.width || 140"
-          show-overflow-tooltip
-        />
-      </el-table>
-      <div class="vehicle-ledger__pagination">
-        <el-pagination
-          v-model:current-page="page.current"
-          v-model:page-size="page.size"
-          :page-sizes="[10, 20, 50]"
-          :total="page.total"
-          layout="total, sizes, prev, pager, next"
-          @size-change="handlePageChange"
-          @current-change="loadRecords"
-        />
-      </div>
     </div>
   </el-dialog>
 </template>
@@ -412,6 +413,10 @@ export default {
 }
 .vehicle-ledger__tabs {
   margin-top: 16px;
+
+  :deep(.el-tabs__content) {
+    padding: 8px;
+  }
 }
 .vehicle-ledger__pagination {
   display: flex;