fix: 样式优化

This commit is contained in:
ZhuRui
2026-08-07 20:06:04 +08:00
parent 5300a1ec2e
commit d9a20c906b
4 changed files with 40 additions and 19 deletions
@@ -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>