135 lines
2.6 KiB
Vue
135 lines
2.6 KiB
Vue
<template>
|
|
<div class="list-layout">
|
|
<!-- 顶部搜索区域 -->
|
|
<div class="search-section">
|
|
<slot name="search"></slot>
|
|
</div>
|
|
|
|
<!-- 表格区域 - 可滚动 -->
|
|
<div class="table-section">
|
|
<slot name="table"></slot>
|
|
</div>
|
|
|
|
<!-- 固定分页区域 -->
|
|
<div class="pagination-section">
|
|
<slot name="pagination"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ListLayout',
|
|
props: {
|
|
// 可以添加一些配置属性
|
|
height: {
|
|
type: String,
|
|
default: 'calc(100vh - 84px)'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 主容器布局 */
|
|
.list-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - 84px); /* 减去头部导航高度 */
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 搜索区域 - 固定在顶部 */
|
|
.search-section {
|
|
flex-shrink: 0;
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e4e7ed;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 表格区域 - 可滚动 */
|
|
.table-section {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 0 20px;
|
|
background: #fff;
|
|
min-height: 0; /* 确保 flex 子元素可以收缩 */
|
|
overflow-x: auto; /* 确保横向滚动条显示 */
|
|
overflow-y: auto; /* 确保纵向滚动条显示 */
|
|
}
|
|
|
|
/* 固定分页区域 */
|
|
.pagination-section {
|
|
flex-shrink: 0;
|
|
background: #fff;
|
|
padding: 15px 20px;
|
|
border-top: 1px solid #e4e7ed;
|
|
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 表格区域滚动条样式 */
|
|
.table-section::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.table-section::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.table-section::-webkit-scrollbar-thumb {
|
|
background: #c0c0c0;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.table-section::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
|
|
/* 确保表格在容器内正确显示，允许横向滚动 */
|
|
.table-section .el-table {
|
|
min-width: 100%;
|
|
}
|
|
|
|
/* 分页组件样式优化 */
|
|
.pagination-section .pagination-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.list-layout {
|
|
height: calc(100vh - 48px - 60px); /* 移动端调整高度：减去头部和底部导航 */
|
|
}
|
|
|
|
.search-section {
|
|
padding: 12px;
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.table-section {
|
|
padding: 0 10px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.pagination-section {
|
|
padding: 8px 10px;
|
|
/* 移动端隐藏分页，因为很少用 */
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|