refactor(transportCapacity): 优化船舶及车辆台账组件结构与样式

- 船舶台账中使用 section-card 组件替换原有 section 标签
- 将证书附件及表格等内容包裹在 tabs 内的 tab-pane 中
- 调整相关样式，优化图片尺寸及间距
- 车辆台账组件中调整附件标签显示位置
- 统一图片组件内标签显示位置以增强视觉一致性

src/views/transportCapacity/components/ship-ledger.vue

@@ -1,32 +1,36 @@
 <template>
   <el-dialog :model-value="modelValue" title="船舶综合台账" width="96%" top="3vh" append-to-body destroy-on-close @update:model-value="$emit('update:modelValue', $event)">
     <div v-loading="detailLoading" class="ship-ledger">
-      <section v-for="section in sections" :key="section.title" class="ship-ledger__section">
+      <section-card
-        <div class="dialog-section-title">{{ section.title }}</div>
+        v-for="section in sections"
+        :key="section.title"
+        :title="section.title"
+        class="ship-ledger__section"
+      >
         <el-descriptions :column="3" border>
           <el-descriptions-item v-for="item in section.items" :key="item.label" :label="item.label">
             {{ display(item) }}
           </el-descriptions-item>
         </el-descriptions>
-      </section>
+      </section-card>
-      <section class="ship-ledger__section">
+      <section-card title="证书附件" class="ship-ledger__section">
-        <div class="dialog-section-title">证书附件</div>
         <div class="ship-ledger__images">
           <div v-for="item in imageFields" :key="item.prop" class="ship-ledger__image-item">
-            <span>{{ item.label }}</span>
             <el-image v-if="shipDetail[item.prop]" :src="shipDetail[item.prop]" :preview-src-list="imageUrls" preview-teleported fit="cover" />
             <el-empty v-else :image-size="36" description="暂无附件" />
+            <span>{{ item.label }}</span>
           </div>
         </div>
-      </section>
+      </section-card>
-      <el-tabs type="border-card" v-model="activeTab" @tab-change="loadRecords">
+      <el-tabs type="border-card" v-model="activeTab" class="ship-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="ship-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="ship-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>
@@ -82,11 +86,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.ship-ledger__section { margin-bottom: 16px; }
+.ship-ledger__section { margin-bottom: 12px; }
-.ship-ledger__images { display: flex; gap: 16px; overflow-x: auto; padding: 12px 0; }
+.ship-ledger__tabs { margin-top: 12px;
-.ship-ledger__image-item { width: 150px; flex: 0 0 150px; text-align: center; color: #606266; }
+  :deep(.el-tabs__content) { padding: 8px; }
+}
+.ship-ledger__images { display: flex; gap: 16px; overflow-x: auto; }
+.ship-ledger__image-item { width: 160px; flex: 0 0 160px; text-align: center; color: #606266; }
 .ship-ledger__image-item > span { display: block; margin-bottom: 8px; }
-.ship-ledger__image-item :deep(.el-image) { width: 150px; height: 110px; border: 1px solid #eff1f7; }
+.ship-ledger__image-item :deep(.el-image) { width: 160px; height: 110px; border: 1px solid #eff1f7; }
 .ship-ledger__image-item :deep(.el-empty) { height: 110px; border: 1px solid #eff1f7; }
 .ship-ledger__pagination { display: flex; justify-content: flex-end; margin-top: 16px; }
 </style>

src/views/transportCapacity/components/vehicle-ledger.vue

@@ -50,7 +50,6 @@
         </el-descriptions>
         <div class="vehicle-ledger__images">
           <div v-for="item in imageFields" :key="item.prop" class="vehicle-ledger__image-item">
-            <span>{{ item.label }}</span>
             <el-image
               v-if="vehicleDetail[item.prop]"
               :src="vehicleDetail[item.prop]"
@@ -59,6 +58,7 @@
               fit="cover"
             />
             <el-empty v-else :image-size="36" description="暂无图片" />
+            <span>{{ item.label }}</span>
           </div>
         </div>
       </section-card>