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 () => ( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
+
{/* 独立分页,右下方 */} -
+
( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
+
{/* 独立分页,右下方 */} -
+
( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
+
{/* 金额汇总 */}
@@ -238,7 +239,7 @@ export default defineComponent({
{/* 独立分页,右下方 */} -
+
( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
+
{/* 独立分页,右下方 */} -
+
( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
+
{/* ===== 汇总区(按图片样式:左对齐的两段加粗数字) ===== */}
@@ -101,7 +102,7 @@ export default defineComponent({
{/* 独立分页,右下方 */} -
+
+
{/* ===== 顶部标题 + 时间范围 ===== */}
diff --git a/src/pages/finance/wallet/index.module.less b/src/pages/finance/wallet/index.module.less index 3dae585..c4ed3e8 100644 --- a/src/pages/finance/wallet/index.module.less +++ b/src/pages/finance/wallet/index.module.less @@ -86,22 +86,3 @@ overflow: hidden; text-overflow: ellipsis; } - -// ===== 下方白卡片:包裹筛选区 + 表格区 ===== -.tableSection { - flex: 1; - min-height: 0; - display: flex; - flex-direction: column; - padding: 16px 20px; - background: #fff; - border: 1px solid #f0f0f0; - border-radius: 10px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); - overflow: hidden; - - // 表格区紧贴筛选区下方,控制间距 - :global(.page-table) { - margin-top: 16px; - } -} diff --git a/src/pages/finance/wallet/index.tsx b/src/pages/finance/wallet/index.tsx index a2437fa..02d37bc 100644 --- a/src/pages/finance/wallet/index.tsx +++ b/src/pages/finance/wallet/index.tsx @@ -5,6 +5,7 @@ import { useWalletModel } from './model/useWalletModel'; import { useContainerSize } from '@/hooks'; import WalletDetailModal from './components/WalletDetailModal'; import styles from './index.module.less'; +import pageStyles from '@/components/page/pageLayout.module.less'; interface StatCardItem { key: string; @@ -105,7 +106,7 @@ export default defineComponent({ ]; return ( -
+
{/* ===== 顶部统计卡 ===== */}
{statCards.map((item) => ( @@ -133,7 +134,7 @@ export default defineComponent({
{/* ===== 筛选区 ===== */} -
+
+
{/* 独立分页,右下方 */} -
+
( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
+
{/* 独立分页,右下方 */} -
+
( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
+
{/* 分页 */} -
+
( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
+
{/* 独立分页 */} -
+