diff --git a/src/assets/styles/index.less b/src/assets/styles/index.less index 30c80a7..2f0d68e 100644 --- a/src/assets/styles/index.less +++ b/src/assets/styles/index.less @@ -56,6 +56,58 @@ 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/pages/finance/payments/index.tsx b/src/pages/finance/payments/index.tsx index f98b5e4..bb354fc 100644 --- a/src/pages/finance/payments/index.tsx +++ b/src/pages/finance/payments/index.tsx @@ -3,7 +3,6 @@ import { Button, Input, Table, Form, Space, Pagination, Select, DatePicker } fro import { usePaymentsModel } from './model/usePaymentsModel'; import { useContainerSize } from '@/hooks'; import styles from './index.module.less'; -import pageStyles from '@/components/page/pageLayout.module.less'; const { RangePicker } = DatePicker; @@ -29,9 +28,9 @@ export default defineComponent({ const { containerRef, height } = useContainerSize({ headerOffset: 55 }); return () => ( -