style(components): 优化运输能力模块标签页样式和结构
- 修改ship-ledger组件标签页类型为border-card,提升视觉效果 - 引入SectionCard组件以支持布局增强 - 将vehicle-ledger组件中el-tabs结构调整为包含子元素,提升代码可读性 - 为vehicle-ledger组件标签页内容添加内边距,改善样式细节 - 统一标签页区域的样式,增强界面一致性
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user