Compare commits
4 Commits
880f986b8a
...
a7399c997d
| Author | SHA1 | Date | |
|---|---|---|---|
 ZhuRui
|
a7399c997d | ||
|
ZhuRui
|
aaa3710314 | ||
 chenzhen
|
ce383e6f95 | ||
 cst
|
0563e188a2 |
@@ -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;
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
border-radius: 5px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: -9px;
|
||||
@@ -40,6 +39,14 @@
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tabContent {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.tabClose:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,12 +77,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.tabItemActive) {
|
||||
.tabTitleCon:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
@@ -126,11 +127,33 @@
|
||||
transition: fill 0.15s;
|
||||
}
|
||||
|
||||
.tabClose {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
// 仅包裹文字 + 关闭按钮，通过 margin 收在 tab 内部
|
||||
.tabContent {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 0 10px 0 10px;
|
||||
padding: 2px 2px 2px 8px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.35s;
|
||||
}
|
||||
|
||||
.tabTitle {
|
||||
min-width: 0;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tabClose {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
@@ -139,32 +162,6 @@
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.15s;
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.tabTitleCon {
|
||||
height: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tabTitle {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-width: 0;
|
||||
padding: 2px 32px 2px 18px;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,12 +71,12 @@ const PageTabs = defineComponent({
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* 标签文字（flex 子元素，与关闭按钮同行） */}
|
||||
<div class={styles.tabTitle}>{tab.title}</div>
|
||||
|
||||
{/* 关闭按钮（flex 子元素，不参与 shrink） */}
|
||||
<div class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
|
||||
✕
|
||||
{/* 标签内容：hover 背景包裹文字 + 关闭按钮 */}
|
||||
<div class={styles.tabContent}>
|
||||
<div class={styles.tabTitle}>{tab.title}</div>
|
||||
<div class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
|
||||
✕
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 () => (
|
||||
<div class="page-container">
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="时间" name="timeRange">
|
||||
<RangePicker
|
||||
@@ -77,22 +77,21 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
{/* ===== 汇总区（按图片样式：左对齐的两段加粗数字） ===== */}
|
||||
<div class={styles.summary}>
|
||||
<span class={styles.summaryItem}>
|
||||
<span class={styles.summaryLabel}>总支付金额：</span>
|
||||
<span class={styles.summaryValue}>{summary.value.totalPay.toFixed(2)}元</span>
|
||||
<div class={pageStyles.table}>
|
||||
{/* ===== 汇总区 ===== */}
|
||||
<div class={pageStyles.summary}>
|
||||
<span class={pageStyles.summaryItem}>
|
||||
<span class={pageStyles.summaryLabel}>总支付金额：</span>
|
||||
<span class={pageStyles.summaryValue}>{summary.value.totalPay.toFixed(2)}元</span>
|
||||
</span>
|
||||
<span class={styles.summaryItem}>
|
||||
<span class={styles.summaryLabel}>总退款金额：</span>
|
||||
<span class={styles.summaryValue}>{summary.value.totalRefund.toFixed(2)}元</span>
|
||||
<span class={pageStyles.summaryItem}>
|
||||
<span class={pageStyles.summaryLabel}>总退款金额：</span>
|
||||
<span class={pageStyles.summaryValue}>{summary.value.totalRefund.toFixed(2)}元</span>
|
||||
</span>
|
||||
</div>
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<div ref={containerRef} class={pageStyles.tableBody}>
|
||||
<Table
|
||||
columns={columns}
|
||||
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
scroll={{ x: 'max-content', y: height.value }}
|
||||
@@ -101,7 +100,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class="page-pagination">
|
||||
<div class={pageStyles.pagination}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
|
||||
@@ -1,127 +1,126 @@
|
||||
// ===== 整页可滚动：内容超出视口时出滚动条 =====
|
||||
.pageWrap {
|
||||
height: auto !important;
|
||||
.reportsMain {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
// ===== 顶部标题区 =====
|
||||
.reportHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 4px 4px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.headerLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.reportTitle {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.reportSub {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
// ===== 顶部 3 张统计卡 =====
|
||||
.statCards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.statCard {
|
||||
padding: 20px 24px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
transition: all 0.25s ease;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
|
||||
// ===== 顶部标题区 =====
|
||||
.reportHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 4px 4px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.headerLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.reportTitle {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.statDesc {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.reportSub {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
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);
|
||||
}
|
||||
// ===== 顶部 3 张统计卡 =====
|
||||
.statCards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.statCard {
|
||||
padding: 20px 24px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
transition: all 0.25s ease;
|
||||
cursor: default;
|
||||
|
||||
.cardTitleIcon {
|
||||
font-size: 14px;
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 柱状图（echarts） =====
|
||||
.chartEcharts {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.statLabel {
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
// ===== 明细表卡（按内容自适应高度，不被压缩） =====
|
||||
.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);
|
||||
.statValue {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
:global(.ant-table-thead > 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,7 +157,7 @@ export default defineComponent({
|
||||
];
|
||||
|
||||
return (
|
||||
<div class={['page-container', styles.pageWrap]}>
|
||||
<div class={styles.reportsMain}>
|
||||
{/* ===== 顶部标题 + 时间范围 ===== */}
|
||||
<div class={styles.reportHeader}>
|
||||
<div class={styles.headerLeft}>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -207,6 +207,7 @@ export default defineComponent({
|
||||
destroyOnClose
|
||||
footer={null}
|
||||
centered
|
||||
wrapClassName={styles.walletDetailModalMain}
|
||||
>
|
||||
<div class={styles.modalBody}>
|
||||
{/* ===== 弹窗内筛选区 ===== */}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<div class="page-container">
|
||||
<div class={[pageStyles.containerMain, styles.walletMain]}>
|
||||
{/* ===== 顶部统计卡 ===== */}
|
||||
<div class={styles.statCards}>
|
||||
{statCards.map((item) => (
|
||||
@@ -133,7 +134,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="用户昵称" name="searchUserName">
|
||||
<Input
|
||||
@@ -196,8 +197,8 @@ export default defineComponent({
|
||||
{/* ===== 下方区域：筛选 + 表格（独立白卡片） ===== */}
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<div class={pageStyles.table}>
|
||||
<div ref={containerRef} class={pageStyles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
dataSource={dataSource.value}
|
||||
@@ -216,7 +217,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class="page-pagination">
|
||||
<div class={pageStyles.pagination}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
|
||||
@@ -1,195 +1,195 @@
|
||||
// ===== Modal 外层包裹：去掉 antd 默认内边距 =====
|
||||
.modalWrap {
|
||||
.withdrawAuditModalMain {
|
||||
:global(.ant-modal-header) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 自定义标题栏 =====
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
// ===== 自定义标题栏 =====
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 8px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 通用区块 =====
|
||||
.section {
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
.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;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 14px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background: #1677ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 描述项栅格（3 列） =====
|
||||
.descGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
row-gap: 14px;
|
||||
column-gap: 24px;
|
||||
}
|
||||
|
||||
.descItem {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.descLabel {
|
||||
flex-shrink: 0;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.descValue {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.descValueBold {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
// ===== 审核表单 =====
|
||||
.formRow {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 18px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.formLabel {
|
||||
width: 88px;
|
||||
flex-shrink: 0;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-size: 13px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.formLabelTop {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
// ===== 上传 =====
|
||||
.uploader {
|
||||
flex: 1;
|
||||
|
||||
:global {
|
||||
.ant-upload-list-picture-card-container {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
.ant-upload-select {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uploadTrigger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 22px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
// ===== 通用区块 =====
|
||||
.section {
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
|
||||
&:hover {
|
||||
color: #1677ff;
|
||||
background: #f0f7ff;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 14px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background: #1677ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 描述项栅格（3 列） =====
|
||||
.descGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
row-gap: 14px;
|
||||
column-gap: 24px;
|
||||
}
|
||||
|
||||
.descItem {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.descLabel {
|
||||
flex-shrink: 0;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.descValue {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.descValueBold {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
// ===== 审核表单 =====
|
||||
.formRow {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 18px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.formLabel {
|
||||
width: 88px;
|
||||
flex-shrink: 0;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-size: 13px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.formLabelTop {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
// ===== 上传 =====
|
||||
.uploader {
|
||||
flex: 1;
|
||||
|
||||
:global {
|
||||
.ant-upload-list-picture-card-container {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
.ant-upload-select {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uploadTrigger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 22px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #1677ff;
|
||||
background: #f0f7ff;
|
||||
}
|
||||
}
|
||||
|
||||
.uploadText {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
// ===== 审核信息（只读，逐行展示） =====
|
||||
.infoColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 14px;
|
||||
}
|
||||
|
||||
.auditImg {
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.noImage {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
.uploadText {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
// ===== 审核信息（只读，逐行展示） =====
|
||||
.infoColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 14px;
|
||||
}
|
||||
|
||||
.auditImg {
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.noImage {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
@@ -105,9 +105,9 @@ export default defineComponent({
|
||||
width={850}
|
||||
centered
|
||||
footer={null}
|
||||
wrapClassName={styles.modalWrap}
|
||||
title={null}
|
||||
closable={false}
|
||||
wrapClassName={styles.withdrawAuditModalMain}
|
||||
>
|
||||
{/* 自定义标题栏 */}
|
||||
<div class={styles.modalHeader}>
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 () => (
|
||||
<div class="page-container">
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="申请人昵称" name="searchUserName">
|
||||
<Input
|
||||
@@ -136,8 +136,8 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<div class={pageStyles.table}>
|
||||
<div ref={containerRef} class={pageStyles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
dataSource={dataSource.value}
|
||||
@@ -157,7 +157,7 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class="page-pagination">
|
||||
<div class={pageStyles.pagination}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
|
||||
Reference in New Issue
Block a user