fix: 处理冲突
This commit is contained in:
@@ -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,会挤开表格列或卡片内间距,统一去掉
|
||||
|
||||
@@ -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 () => (
|
||||
<div class={pageStyles.container}>
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<div class="page-filter">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="时间" name="timeRange">
|
||||
<RangePicker
|
||||
@@ -78,7 +77,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class={pageStyles.table}>
|
||||
<div class="page-table">
|
||||
{/* ===== 汇总区(按图片样式:左对齐的两段加粗数字) ===== */}
|
||||
<div class={styles.summary}>
|
||||
<span class={styles.summaryItem}>
|
||||
@@ -102,7 +101,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* 独立分页,右下方 */}
|
||||
<div class={pageStyles.pagination}>
|
||||
<div class="page-pagination">
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { Select, Table } from 'ant-design-vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { useReportsModel } from './model/useReportsModel';
|
||||
import styles from './index.module.less';
|
||||
import pageStyles from '@/components/page/pageLayout.module.less';
|
||||
|
||||
/**
|
||||
* 账务报表
|
||||
@@ -158,7 +157,7 @@ export default defineComponent({
|
||||
];
|
||||
|
||||
return (
|
||||
<div class={[pageStyles.container, styles.pageWrap]}>
|
||||
<div class={['page-container', styles.pageWrap]}>
|
||||
{/* ===== 顶部标题 + 时间范围 ===== */}
|
||||
<div class={styles.reportHeader}>
|
||||
<div class={styles.headerLeft}>
|
||||
|
||||
@@ -86,3 +86,22 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@ 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;
|
||||
@@ -106,7 +105,7 @@ export default defineComponent({
|
||||
];
|
||||
|
||||
return (
|
||||
<div class={pageStyles.container}>
|
||||
<div class="page-container">
|
||||
{/* ===== 顶部统计卡 ===== */}
|
||||
<div class={styles.statCards}>
|
||||
{statCards.map((item) => (
|
||||
@@ -134,7 +133,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<div class="page-filter">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="用户昵称" name="searchUserName">
|
||||
<Input
|
||||
@@ -197,7 +196,7 @@ export default defineComponent({
|
||||
{/* ===== 下方区域:筛选 + 表格(独立白卡片) ===== */}
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class={pageStyles.table}>
|
||||
<div class="page-table">
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
@@ -217,7 +216,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* 独立分页,右下方 */}
|
||||
<div class={pageStyles.pagination}>
|
||||
<div class="page-pagination">
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
|
||||
@@ -4,7 +4,6 @@ import { useWithdrawModel } from './model/useWithdrawModel';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import WithdrawAuditModal from './components/WithdrawAuditModal';
|
||||
import styles from './index.module.less';
|
||||
import pageStyles from '@/components/page/pageLayout.module.less';
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数(操作列:根据审核状态切换"审核 / 查看"按钮)
|
||||
@@ -79,9 +78,9 @@ export default defineComponent({
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class={pageStyles.container}>
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<div class="page-filter">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="申请人昵称" name="searchUserName">
|
||||
<Input
|
||||
@@ -137,7 +136,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class={pageStyles.table}>
|
||||
<div class="page-table">
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
@@ -158,7 +157,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* 独立分页,右下方 */}
|
||||
<div class={pageStyles.pagination}>
|
||||
<div class="page-pagination">
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
|
||||
Reference in New Issue
Block a user