diff --git a/src/assets/styles/pageLayout.module.less b/src/assets/styles/pageLayout.module.less index b5e2aa5..503aba0 100644 --- a/src/assets/styles/pageLayout.module.less +++ b/src/assets/styles/pageLayout.module.less @@ -37,6 +37,49 @@ overflow: hidden; border-radius: 10px; + .tableBody { + flex: 1; + min-height: 0; + overflow: hidden; + + :global { + .ant-spin-nested-loading, + .ant-spin-container, + .ant-table, + .ant-table-container { + height: 100%; + } + } + } + + // ── 汇总 ── + .summary { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0 32px; + flex-shrink: 0; + padding: 14px 15px; + border-radius: 8px; + font-size: 14px; + color: rgba(0, 0, 0, 0.85); + } + + .summaryItem { + display: inline-flex; + align-items: baseline; + } + + .summaryLabel { + color: rgba(0, 0, 0, 0.65); + } + + .summaryValue { + font-weight: 600; + color: rgba(0, 0, 0, 0.85); + letter-spacing: 0.3px; + } + .pagination { flex-shrink: 0; display: flex; diff --git a/src/pages/finance/payments/index.module.less b/src/pages/finance/payments/index.module.less deleted file mode 100644 index 38ddafa..0000000 --- a/src/pages/finance/payments/index.module.less +++ /dev/null @@ -1,46 +0,0 @@ -// ===== 汇总（按图片：左对齐两段加粗数字） ===== -.summary { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0 32px; - flex-shrink: 0; - padding: 14px 15px; - background: #fff; - border-radius: 8px; - font-size: 14px; - color: rgba(0, 0, 0, 0.85); -} - -.summaryItem { - display: inline-flex; - align-items: baseline; -} - -.summaryLabel { - color: rgba(0, 0, 0, 0.65); -} - -.summaryValue { - font-weight: 600; - color: rgba(0, 0, 0, 0.85); - letter-spacing: 0.3px; - font-family: - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -} - -// ===== 表格 body 容器：占满 flex 剩余空间 ===== -.tableBody { - flex: 1; - min-height: 0; - overflow: hidden; - - :global { - .ant-spin-nested-loading, - .ant-spin-container, - .ant-table, - .ant-table-container { - height: 100%; - } - } -} diff --git a/src/pages/finance/payments/index.tsx b/src/pages/finance/payments/index.tsx index bb354fc..98527c2 100644 --- a/src/pages/finance/payments/index.tsx +++ b/src/pages/finance/payments/index.tsx @@ -2,7 +2,7 @@ import { defineComponent } from 'vue'; import { Button, Input, Table, Form, Space, Pagination, Select, DatePicker } from 'ant-design-vue'; import { usePaymentsModel } from './model/usePaymentsModel'; import { useContainerSize } from '@/hooks'; -import styles from './index.module.less'; +import pageStyles from '@/assets/styles/pageLayout.module.less'; const { RangePicker } = DatePicker; @@ -28,9 +28,9 @@ export default defineComponent({ const { containerRef, height } = useContainerSize({ headerOffset: 55 }); return () => ( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
- {/* ===== 汇总区（按图片样式：左对齐的两段加粗数字） ===== */} -
- - 总支付金额： - {summary.value.totalPay.toFixed(2)}元 +
+ {/* ===== 汇总区 ===== */} +
+ + 总支付金额： + {summary.value.totalPay.toFixed(2)}元 - - 总退款金额： - {summary.value.totalRefund.toFixed(2)}元 + + 总退款金额： + {summary.value.totalRefund.toFixed(2)}元
-
+
{/* 独立分页，右下方 */} -
+
tr > th) { - background: #fafafa; + .statDesc { + font-size: 12px; + letter-spacing: 0.3px; + } + + // ===== 图表卡 ===== + .chartCard { + flex-shrink: 0; + background: #fff; + border-radius: 10px; + padding: 18px 20px 14px; + margin-bottom: 16px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); + } + + .cardTitle { + font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, 0.85); + margin-bottom: 14px; + display: flex; + align-items: center; + gap: 6px; + } + + .cardTitleIcon { + font-size: 14px; + } + + // ===== 柱状图（echarts） ===== + .chartEcharts { + width: 100%; + height: 300px; + } + + // ===== 明细表卡（按内容自适应高度，不被压缩） ===== + .detailCard { + flex: none; + display: flex; + flex-direction: column; + background: #fff; + border-radius: 10px; + padding: 18px 20px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); + + :global(.ant-table-thead > tr > th) { + background: #fafafa; + font-weight: 600; + color: rgba(0, 0, 0, 0.85); + } } } diff --git a/src/pages/finance/reports/index.tsx b/src/pages/finance/reports/index.tsx index 2c4db89..db858a9 100644 --- a/src/pages/finance/reports/index.tsx +++ b/src/pages/finance/reports/index.tsx @@ -157,7 +157,7 @@ export default defineComponent({ ]; return ( -
+
{/* ===== 顶部标题 + 时间范围 ===== */}
diff --git a/src/pages/finance/wallet/components/WalletDetailModal.module.less b/src/pages/finance/wallet/components/WalletDetailModal.module.less index 2abdd8f..a1531f3 100644 --- a/src/pages/finance/wallet/components/WalletDetailModal.module.less +++ b/src/pages/finance/wallet/components/WalletDetailModal.module.less @@ -1,62 +1,56 @@ -// ===== 自定义标题栏 ===== -.modalHeader { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 0 16px; - margin-bottom: 16px; - border-bottom: 1px solid #f0f0f0; -} +.walletDetailModalMain { + // ===== 自定义标题栏 ===== + .modalHeader { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 0 16px; + margin-bottom: 16px; + border-bottom: 1px solid #f0f0f0; + } -.modalTitle { - font-size: 16px; - font-weight: 600; - color: rgba(0, 0, 0, 0.85); -} - -.closeBtn { - width: 28px; - height: 28px; - border: none; - background: transparent; - font-size: 22px; - line-height: 1; - color: rgba(0, 0, 0, 0.45); - cursor: pointer; - border-radius: 4px; - transition: all 0.2s; - - &:hover { - background: rgba(0, 0, 0, 0.04); + .modalTitle { + font-size: 16px; + font-weight: 600; color: rgba(0, 0, 0, 0.85); } -} -// ===== 内容区 ===== -.modalBody { - padding-top: 0; -} + .closeBtn { + width: 28px; + height: 28px; + border: none; + background: transparent; + font-size: 22px; + line-height: 1; + color: rgba(0, 0, 0, 0.45); + cursor: pointer; + border-radius: 4px; + transition: all 0.2s; -// ===== 筛选区 ===== -.filterBar { - flex-shrink: 0; - padding: 16px 20px; - margin-bottom: 16px; - background: #fafafa; - border: 1px solid #f0f0f0; - border-radius: 6px; -} - -// ===== 表格区 ===== -.tableWrap { - flex: 1; - min-height: 0; -} - -// ===== Modal 外层包裹：去除 antd 默认内边距 ===== -/* .walletModalWrap { - :global(.ant-modal-body) { - padding-top: 16px; - padding-bottom: 20px; + &:hover { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.85); + } } -} */ + + // ===== 内容区 ===== + .modalBody { + padding-top: 0; + } + + // ===== 筛选区 ===== + .filterBar { + flex-shrink: 0; + padding: 16px 20px; + margin-bottom: 16px; + background: #fafafa; + border: 1px solid #f0f0f0; + border-radius: 6px; + } + + // ===== 表格区 ===== + .tableWrap { + flex: 1; + min-height: 0; + } +} diff --git a/src/pages/finance/wallet/components/WalletDetailModal.tsx b/src/pages/finance/wallet/components/WalletDetailModal.tsx index de45682..4b2769c 100644 --- a/src/pages/finance/wallet/components/WalletDetailModal.tsx +++ b/src/pages/finance/wallet/components/WalletDetailModal.tsx @@ -207,6 +207,7 @@ export default defineComponent({ destroyOnClose footer={null} centered + wrapClassName={styles.walletDetailModalMain} >
{/* ===== 弹窗内筛选区 ===== */} diff --git a/src/pages/finance/wallet/index.module.less b/src/pages/finance/wallet/index.module.less index 3dae585..94fcb36 100644 --- a/src/pages/finance/wallet/index.module.less +++ b/src/pages/finance/wallet/index.module.less @@ -1,107 +1,73 @@ -// ===== 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100% ===== -.tableBody { - flex: 1; - min-height: 0; - overflow: hidden; +// ===== 页面容器 ===== +.walletMain { + // ===== 顶部 3 张统计卡 ===== + .statCards { + display: flex; + gap: 16px; + flex-shrink: 0; + margin-bottom: 16px; + } - :global { - .ant-spin-nested-loading, - .ant-spin-container, - .ant-table, - .ant-table-container { - height: 100%; + .statCard { + flex: 1; + min-width: 0; + display: flex; + align-items: center; + gap: 16px; + padding: 22px 24px; + background: #fff; + border: 1px solid #f0f0f0; + border-radius: 10px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); + transition: all 0.25s ease; + cursor: default; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } } -} -// ===== 顶部 3 张统计卡 ===== -.statCards { - display: flex; - gap: 16px; - flex-shrink: 0; - margin-bottom: 16px; -} + .statCardLeft { + flex-shrink: 0; + } -.statCard { - flex: 1; - min-width: 0; - display: flex; - align-items: center; - gap: 16px; - padding: 22px 24px; - background: #fff; - border: 1px solid #f0f0f0; - border-radius: 10px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); - transition: all 0.25s ease; - cursor: default; + .statIconWrap { + width: 52px; + height: 52px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 12px; + font-size: 26px; + transition: transform 0.25s ease; - &:hover { - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); - } -} - -.statCardLeft { - flex-shrink: 0; -} - -.statIconWrap { - width: 52px; - height: 52px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 12px; - font-size: 26px; - transition: transform 0.25s ease; - - .statCard:hover & { - transform: scale(1.05); - } -} - -.statCardRight { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 6px; -} - -.statLabel { - font-size: 13px; - color: rgba(0, 0, 0, 0.55); - letter-spacing: 0.3px; -} - -.statValue { - font-size: 26px; - font-weight: 600; - line-height: 1.2; - font-family: - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - letter-spacing: 0.3px; - white-space: nowrap; - 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; + .statCard:hover & { + transform: scale(1.05); + } + } + + .statCardRight { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 6px; + } + + .statLabel { + font-size: 13px; + color: rgba(0, 0, 0, 0.55); + letter-spacing: 0.3px; + } + + .statValue { + font-size: 26px; + font-weight: 600; + line-height: 1.2; + letter-spacing: 0.3px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } diff --git a/src/pages/finance/wallet/index.tsx b/src/pages/finance/wallet/index.tsx index a2437fa..89d2ffe 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 '@/assets/styles/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({
{/* ===== 筛选区 ===== */} -
+
-
+
+
{/* 独立分页，右下方 */} -
+
{/* 自定义标题栏 */}
diff --git a/src/pages/finance/withdraw/index.module.less b/src/pages/finance/withdraw/index.module.less deleted file mode 100644 index 295db04..0000000 --- a/src/pages/finance/withdraw/index.module.less +++ /dev/null @@ -1,15 +0,0 @@ -// ===== 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100% ===== -.tableBody { - flex: 1; - min-height: 0; - overflow: hidden; - - :global { - .ant-spin-nested-loading, - .ant-spin-container, - .ant-table, - .ant-table-container { - height: 100%; - } - } -} diff --git a/src/pages/finance/withdraw/index.tsx b/src/pages/finance/withdraw/index.tsx index 54f0be3..d1ca798 100644 --- a/src/pages/finance/withdraw/index.tsx +++ b/src/pages/finance/withdraw/index.tsx @@ -3,7 +3,7 @@ import { Button, Input, Table, Form, Space, Pagination, Select } from 'ant-desig import { useWithdrawModel } from './model/useWithdrawModel'; import { useContainerSize } from '@/hooks'; import WithdrawAuditModal from './components/WithdrawAuditModal'; -import styles from './index.module.less'; +import pageStyles from '@/assets/styles/pageLayout.module.less'; /** * bodyCell 渲染函数（操作列：根据审核状态切换"审核 / 查看"按钮） @@ -78,9 +78,9 @@ export default defineComponent({ ]; return () => ( -
+
{/* ===== 筛选区 ===== */} -
+
{/* ===== 表格区 ===== */} -
-
+
+
{/* 独立分页，右下方 */} -
+