style: 调整页面间距和分页大小以优化布局
统一将页面间距和分页大小调整为12px,移除不必要的底部填充,优化整体布局和视觉一致性。
This commit is contained in:
parent
14cca119a9
commit
ea52794aae
|
@ -108,7 +108,7 @@ onMounted(() => {
|
|||
</el-form>
|
||||
|
||||
<div class="grid-container">
|
||||
<el-row :gutter="20">
|
||||
<el-row :gutter="12">
|
||||
<el-col v-for="(item, index) in dataList" :key="item.ab98UserId" :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-card class="user-card" :body-style="{ padding: '8px 20px' }">
|
||||
<div class="card-content">
|
||||
|
@ -156,7 +156,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.user-card {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 12px;
|
||||
min-height: 210px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -215,8 +215,8 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.grid-container {
|
||||
margin: 20px 0;
|
||||
padding-bottom: 60px;
|
||||
margin: 12px 0;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
|
||||
.el-row {
|
||||
|
@ -227,13 +227,13 @@ onMounted(() => {
|
|||
.pagination-wrapper {
|
||||
position: relative;
|
||||
background: var(--el-bg-color);
|
||||
padding: 12px 12px;
|
||||
padding: 9px 12px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -41,7 +41,7 @@ export function useHook() {
|
|||
const pageLoading = ref(true); // 加载状态
|
||||
const pagination = reactive<PaginationProps>({ // 分页配置
|
||||
total: 0,
|
||||
pageSize: 8,
|
||||
pageSize: 12,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
|
|
|
@ -57,7 +57,7 @@ watch(
|
|||
</el-form>
|
||||
|
||||
<div class="grid-container">
|
||||
<el-row :gutter="20">
|
||||
<el-row :gutter="12">
|
||||
<el-col v-for="(item, index) in dataList" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-card class="user-card" :body-style="{ padding: '8px 20px' }">
|
||||
<div class="card-wrapper">
|
||||
|
@ -108,7 +108,7 @@ watch(
|
|||
}
|
||||
|
||||
.user-card {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 12px;
|
||||
min-height: 210px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -172,8 +172,8 @@ watch(
|
|||
}
|
||||
|
||||
.grid-container {
|
||||
margin: 20px 0;
|
||||
padding-bottom: 60px;
|
||||
margin: 12px 0;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
|
||||
.el-row {
|
||||
|
@ -184,13 +184,13 @@ watch(
|
|||
.pagination-wrapper {
|
||||
position: relative;
|
||||
background: var(--el-bg-color);
|
||||
padding: 12px 12px;
|
||||
padding: 8px 12px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue