b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(components): 优化运输能力模块标签页样式和结构

Browse Source 
- 修改ship-ledger组件标签页类型为border-card，提升视觉效果
- 引入SectionCard组件以支持布局增强
- 将vehicle-ledger组件中el-tabs结构调整为包含子元素，提升代码可读性
- 为vehicle-ledger组件标签页内容添加内边距，改善样式细节
- 统一标签页区域的样式，增强界面一致性
This commit is contained in:
赵忠林
2026-08-21 11:15:42 +08:00
parent 6381a7987c
commit 4528117143
2 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/transportCapacity/components/ship-ledger.vue
+3 -1
View File
@@ -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: {
src/views/transportCapacity/components/vehicle-ledger.vue
+28 -23
View File
@@ -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;