fix: 样式优化
This commit is contained in:
@@ -28,12 +28,29 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
|
:global(.ant-descriptions-view table) {
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
:global(.ant-descriptions-item-label) {
|
:global(.ant-descriptions-item-label) {
|
||||||
width: 110px;
|
width: 110px;
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: rgba(0, 0, 0, 0.65);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 首列内容区加宽(省市区、公开活动、创建时间等)
|
||||||
|
.wideCol:global(.ant-descriptions-item-content) {
|
||||||
|
width: 38%;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 较长 label 加宽且不换行(class 同时挂在 label/content 上,需用复合选择器)
|
||||||
|
.wideLabel:global(.ant-descriptions-item-label) {
|
||||||
|
width: 132px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
// Item 的 class 会同时挂在 label/content 两个同级 td/th 上,不能用后代选择器
|
// Item 的 class 会同时挂在 label/content 两个同级 td/th 上,不能用后代选择器
|
||||||
.statCell:global(.ant-descriptions-item-content) {
|
.statCell:global(.ant-descriptions-item-content) {
|
||||||
min-width: 60px;
|
min-width: 60px;
|
||||||
|
|||||||
@@ -181,7 +181,7 @@ export default defineComponent({
|
|||||||
<Modal
|
<Modal
|
||||||
visible={props.visible}
|
visible={props.visible}
|
||||||
title="查看详情"
|
title="查看详情"
|
||||||
width={900}
|
width={980}
|
||||||
onCancel={props.onClose}
|
onCancel={props.onClose}
|
||||||
footer={null}
|
footer={null}
|
||||||
centered
|
centered
|
||||||
@@ -198,8 +198,10 @@ export default defineComponent({
|
|||||||
<div class={styles.section}>
|
<div class={styles.section}>
|
||||||
<div class={styles.sectionTitle}>基础信息</div>
|
<div class={styles.sectionTitle}>基础信息</div>
|
||||||
<Descriptions size="small" bordered column={3} class={styles.desc}>
|
<Descriptions size="small" bordered column={3} class={styles.desc}>
|
||||||
<Descriptions.Item label="赛事名称">{detail.value.name}</Descriptions.Item>
|
<Descriptions.Item label="赛事名称" span={2}>
|
||||||
<Descriptions.Item label="赛事时间" span={2}>
|
{detail.value.name}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="赛事时间">
|
||||||
{detail.value.startTimeBegin} 至 {detail.value.startTimeEnd}
|
{detail.value.startTimeBegin} 至 {detail.value.startTimeEnd}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
|
|
||||||
@@ -207,17 +209,19 @@ export default defineComponent({
|
|||||||
{detail.value.descr}
|
{detail.value.descr}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
|
|
||||||
<Descriptions.Item label="报名起止时间" span={3}>
|
<Descriptions.Item label="报名起止时间" span={3} class={styles.wideLabel}>
|
||||||
{signupTimeDisplay(detail.value.signupTimeBegin, detail.value.signupTimeEnd)}
|
{signupTimeDisplay(detail.value.signupTimeBegin, detail.value.signupTimeEnd)}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
|
|
||||||
<Descriptions.Item label="省市区">{detail.value.venueArea}</Descriptions.Item>
|
<Descriptions.Item label="省市区" class={styles.wideCol}>
|
||||||
|
{detail.value.venueArea}
|
||||||
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="地点">{detail.value.venue}</Descriptions.Item>
|
<Descriptions.Item label="地点">{detail.value.venue}</Descriptions.Item>
|
||||||
<Descriptions.Item label="场地编号" class={styles.statCell}>
|
<Descriptions.Item label="场地编号" class={styles.statCell}>
|
||||||
{detail.value.venueNo || '--'}
|
{detail.value.venueNo || '--'}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
|
|
||||||
<Descriptions.Item label="公开活动">
|
<Descriptions.Item label="公开活动" class={styles.wideCol}>
|
||||||
{formatPublic(detail.value.isPublic)}
|
{formatPublic(detail.value.isPublic)}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="证件号">
|
<Descriptions.Item label="证件号">
|
||||||
@@ -227,12 +231,16 @@ export default defineComponent({
|
|||||||
{formatYN(detail.value.isRequireIdCardImg)}
|
{formatYN(detail.value.isRequireIdCardImg)}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
|
|
||||||
<Descriptions.Item label="创建时间">{detail.value.createTime}</Descriptions.Item>
|
<Descriptions.Item label="创建时间" class={styles.wideCol}>
|
||||||
|
{detail.value.createTime}
|
||||||
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="创建人" span={2}>
|
<Descriptions.Item label="创建人" span={2}>
|
||||||
{detail.value.createNickname}
|
{detail.value.createNickname}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
|
|
||||||
<Descriptions.Item label="报名人数">{detail.value.signupCount}</Descriptions.Item>
|
<Descriptions.Item label="报名人数" class={styles.wideCol}>
|
||||||
|
{detail.value.signupCount}
|
||||||
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="退赛人数">{detail.value.dropoutCount}</Descriptions.Item>
|
<Descriptions.Item label="退赛人数">{detail.value.dropoutCount}</Descriptions.Item>
|
||||||
<Descriptions.Item
|
<Descriptions.Item
|
||||||
label="最大人数"
|
label="最大人数"
|
||||||
@@ -241,7 +249,7 @@ export default defineComponent({
|
|||||||
{detail.value.totalLimit || '--'}
|
{detail.value.totalLimit || '--'}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
|
|
||||||
<Descriptions.Item label="总对阵数">
|
<Descriptions.Item label="总对阵数" class={styles.wideCol}>
|
||||||
{detail.value.matchTotalCount}
|
{detail.value.matchTotalCount}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="已完成对阵数" span={2}>
|
<Descriptions.Item label="已完成对阵数" span={2}>
|
||||||
|
|||||||
@@ -96,16 +96,12 @@
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: rgba(0, 0, 0, 0.85);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.descValueBold {
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auditImgList {
|
.auditImgList {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
|
|||||||
@@ -150,10 +150,10 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderItem = (label: string, value: any, isBold = false) => (
|
const renderItem = (label: string, value: any) => (
|
||||||
<div class={styles.descItem}>
|
<div class={styles.descItem}>
|
||||||
<span class={styles.descLabel}>{label}</span>
|
<span class={styles.descLabel}>{label}</span>
|
||||||
<span class={[styles.descValue, isBold ? styles.descValueBold : '']}>{value || '--'}</span>
|
<span class={styles.descValue}>{value || '--'}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -175,11 +175,11 @@ export default defineComponent({
|
|||||||
{renderItem('申请时间:', d.createDate)}
|
{renderItem('申请时间:', d.createDate)}
|
||||||
{renderItem('打款类型:', d.withdrawType)}
|
{renderItem('打款类型:', d.withdrawType)}
|
||||||
<div style="display: contents;" />
|
<div style="display: contents;" />
|
||||||
{renderItem('提现金额:', `¥${d.withdrawAmount}`, true)}
|
{renderItem('提现金额:', `¥${d.withdrawAmount}`)}
|
||||||
{renderItem('费率:', `${(Number(d.feeRate) * 100).toFixed(2)}%`)}
|
{renderItem('费率:', `${(Number(d.feeRate) * 100).toFixed(2)}%`)}
|
||||||
{renderItem('手续费:', `¥${d.feeAmount}`)}
|
{renderItem('手续费:', `¥${d.feeAmount}`)}
|
||||||
{renderItem('到账金额:', `¥${d.receivedAmount}`, true)}
|
{renderItem('到账金额:', `¥${d.receivedAmount}`)}
|
||||||
{renderItem('审核状态:', getAuditStatusText(d.auditStatus), true)}
|
{renderItem('审核状态:', getAuditStatusText(d.auditStatus))}
|
||||||
{renderItem('到账状态:', getPayStatusText(d.payStatus))}
|
{renderItem('到账状态:', getPayStatusText(d.payStatus))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user