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