diff --git a/src/assets/styles/index.less b/src/assets/styles/index.less index af15fdb..30c80a7 100644 --- a/src/assets/styles/index.less +++ b/src/assets/styles/index.less @@ -56,57 +56,6 @@ a { background: transparent; } -// ===== 页面布局公共类 ===== - -// 页面容器:纵向 flex,占满高度;筛选区与表格区作为直接子元素 -.page-container { - display: flex; - flex-direction: column; - height: 100%; -} - -// 页面筛选区域:横向 flex,可换行 -.page-filter { - display: flex; - flex-wrap: wrap; - align-items: center; - column-gap: 16px; - row-gap: 12px; - flex-shrink: 0; - padding: 16px; - background-color: #fff; - border-radius: 10px; -} - -// 筛选区域操作按钮组:横向 flex -.page-filter-actions { - display: flex; - align-items: center; - gap: 10px; - margin-left: 0; -} - -// 表格显示区域:纵向 flex,占据剩余高度。 -// overflow: hidden 防止子元素撑开容器,滚动由 Table 的 scroll.x/y 接管。 -// 分页组件作为独立子元素置于 Table 下方,不占用 Table 的 scroll 空间。 -.page-table { - display: flex; - flex-direction: column; - flex: 1; - background-color: #fff; - min-height: 0; - min-width: 0; - margin-top: 16px; - overflow: hidden; - border-radius: 10px; -} - -.page-pagination { - flex-shrink: 0; - display: flex; - justify-content: flex-end; - padding: 14px; -} // ===== antd 组件覆盖 ===== // Tag 默认 margin-right: 8px,会挤开表格列或卡片内间距,统一去掉 diff --git a/src/components/page/pageLayout.module.less b/src/components/page/pageLayout.module.less new file mode 100644 index 0000000..5d2e012 --- /dev/null +++ b/src/components/page/pageLayout.module.less @@ -0,0 +1,47 @@ +// 页面容器:纵向 flex,占满高度 +.container { + display: flex; + flex-direction: column; + height: 100%; +} + +// 页面筛选区域:横向 flex,可换行 +.filter { + display: flex; + flex-wrap: wrap; + align-items: center; + column-gap: 16px; + row-gap: 12px; + flex-shrink: 0; + padding: 16px; + background-color: #fff; + border-radius: 10px; +} + +// 筛选区域操作按钮组 +.filterActions { + display: flex; + align-items: center; + gap: 10px; + margin-left: 0; +} + +// 表格显示区域:纵向 flex,占据剩余高度 +.table { + display: flex; + flex-direction: column; + flex: 1; + background-color: #fff; + min-height: 0; + min-width: 0; + margin-top: 16px; + overflow: hidden; + border-radius: 10px; +} + +.pagination { + flex-shrink: 0; + display: flex; + justify-content: flex-end; + padding: 14px; +} diff --git a/src/pages/events/banner/index.tsx b/src/pages/events/banner/index.tsx index 98cc70f..f2ddd59 100644 --- a/src/pages/events/banner/index.tsx +++ b/src/pages/events/banner/index.tsx @@ -15,6 +15,7 @@ import { useBannerModel, BANNER_STATUS_OPTIONS } from './model/useBannerModel'; import { useContainerSize } from '@/hooks'; import BannerFormModal from './components/BannerFormModal'; import styles from './index.module.less'; +import pageStyles from '@/components/page/pageLayout.module.less'; /** * bodyCell 渲染函数 @@ -193,9 +194,9 @@ export default defineComponent({ ]; return () => ( -