From 002940a41bf16e2a32085798ebde2b0a6ba04fa9 Mon Sep 17 00:00:00 2001
From: ltx <1006158920@qq.com>
Date: Wed, 13 May 2026 18:02:34 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E8=B5=9B=E4=BA=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/registration/index.vue | 829 +++++++++++++++++++++++++-
 1 file changed, 807 insertions(+), 22 deletions(-)

diff --git a/src/views/user/registration/index.vue b/src/views/user/registration/index.vue
index 1691cb4..365a7d4 100644
--- a/src/views/user/registration/index.vue
+++ b/src/views/user/registration/index.vue
@@ -54,27 +54,199 @@
 		</ProTable>
 
 		<!-- 赛事详情弹窗 -->
-		<el-dialog title="赛事详情" v-model="isShowDetailDialog" width="80%" style="min-height: 600px;"
-			@closed="clearDetailState">
-			<el-skeleton :rows="12" animated v-if="detailLoading" />
-			<template v-else>
-				<div v-if="formData">
-					<Step1BasicInfo v-model:modelValue="formData.basicInfo" :readonly="true" />
-					<div style="height:50px;"></div>
-					<Step2Units v-model:modelValue="formData.units" :readonly="true" />
-					<div style="height:50px;"></div>
-					<Step3ProjectConfig v-model:modelValue="projectConfigWithRegistrationType" :readonly="true" />
-					<div style="height:50px;"></div>
-				<UserStep4FeeConfig v-model:modelValue="formData.feeConfig" :readonly="true" />
-					<div style="height:100px;"></div>
+		<el-dialog v-model="isShowDetailDialog" width="82%" class="event-detail-dialog"
+			@closed="clearDetailState" :close-on-click-modal="false">
+			<template #header="{ close }">
+				<div class="detail-dialog-custom-header">
+					<div class="detail-dialog-header-badge">赛</div>
+					<span class="detail-dialog-header-title">赛事详情</span>
+					<el-button class="detail-dialog-close-btn" :icon="Close" circle text @click="close" />
 				</div>
-				<el-empty v-else description="暂无详情数据" />
+			</template>
+
+			<el-skeleton :rows="12" animated v-if="detailLoading" style="padding: 24px;" />
+			<template v-else>
+				<div v-if="formData" class="event-detail-content">
+
+					<!-- Hero：封面 + 核心字段 -->
+					<div class="edc-hero">
+						<div class="edc-cover-wrap">
+							<PreviewImage
+								v-if="formData.basicInfo.coverImage"
+								:src="formData.basicInfo.coverImage"
+								width="100%"
+								height="100%"
+								fit="cover"
+								:show-zoom-icon="true"
+								class="edc-cover-img"
+							/>
+							<div v-else class="edc-cover-empty">
+								<el-icon :size="40" color="#c0c4cc"><Picture /></el-icon>
+								<span>暂无封面</span>
+							</div>
+						</div>
+						<div class="edc-hero-right">
+							<h2 class="edc-event-name">{{ formData.basicInfo.eventName || '-' }}</h2>
+							<div class="edc-badge-row">
+								<el-tag v-if="detailStatusFromList !== null && detailStatusFromList !== undefined" :type="getEventStatusTagType(detailStatusFromList)" size="large" effect="dark">
+									{{ getEventStatusText(detailStatusFromList) }}
+								</el-tag>
+								<el-tag :type="formData.basicInfo.eventType === 0 ? 'primary' : 'info'" size="large">
+									{{ formData.basicInfo.eventType === 0 ? '线上' : formData.basicInfo.eventType === 1 ? '线下' : '-' }}
+								</el-tag>
+								<el-tag type="warning" size="large">
+									{{ registrationTypeText({ registrationType: formData.basicInfo.registrationType }) }}
+								</el-tag>
+							</div>
+							<div class="edc-kv-list">
+								<div class="edc-kv-item">
+									<span class="edc-kv-label">赛事地点</span>
+									<span class="edc-kv-val">{{ [formData.basicInfo.provinceName, formData.basicInfo.cityName, formData.basicInfo.districtName].filter(x => x).join(' · ') || '-' }}</span>
+								</div>
+								<div class="edc-kv-item" v-if="formData.basicInfo.detailAddress">
+									<span class="edc-kv-label">详细地址</span>
+									<span class="edc-kv-val">{{ formData.basicInfo.detailAddress }}</span>
+								</div>
+								<div class="edc-kv-item">
+									<span class="edc-kv-label">收费模式</span>
+									<el-tag size="small" :type="getDetailChargeModeTagType(formData.feeConfig.chargeMode)">
+										{{ getDetailChargeModeText(formData.feeConfig.chargeMode) }}
+									</el-tag>
+								</div>
+								<div class="edc-kv-item edc-kv-item--block">
+									<span class="edc-kv-label">退款规则</span>
+									<span class="edc-kv-val edc-kv-val--multiline">{{ formatRefundRulesBrief(detailData?.refundRules) }}</span>
+								</div>
+								<div class="edc-kv-item edc-kv-item--block">
+									<span class="edc-kv-label">积分规则</span>
+									<span class="edc-kv-val edc-kv-val--multiline">{{ formatPointsRuleBrief(detailData?.pointsRuleDetail, formData.basicInfo.pointsRuleName) }}</span>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					
+					<!-- 报名项目 -->
+					<div class="edc-section" v-if="formData.projectConfig?.projects?.length">
+						<div class="edc-section-hd">
+							<el-icon class="edc-section-icon"><Trophy /></el-icon>
+							<span class="edc-section-title">报名项目</span>
+							<span class="edc-section-count">共 {{ formData.projectConfig.projects.length }} 个</span>
+						</div>
+						<!-- 限报提示条 -->
+						<div class="edc-reg-limit-bar" v-if="formData.projectConfig.registrationLimit">
+							<el-icon><InfoFilled /></el-icon>
+							<span>限报
+								<strong>{{ formData.projectConfig.registrationLimit.teamProjectLimit ?? 1 }}</strong> 个团队、<strong>{{ formData.projectConfig.registrationLimit.individualProjectLimit ?? 1 }}</strong> 个个人
+							</span>
+						</div>
+						<div class="edc-proj-list">
+							<div class="edc-proj-card" v-for="(proj, pi) in formData.projectConfig.projects" :key="proj.id ?? pi">
+								<div class="edc-proj-hd">
+									<div class="edc-proj-num">{{ pi + 1 }}</div>
+									<div class="edc-proj-info">
+										<span class="edc-proj-name">{{ proj.name }}</span>
+										<div class="edc-proj-tags">
+											<el-tag type="info" size="small" v-if="proj.projectTypeName || proj.parentProjectTypeName">
+												{{ proj.projectTypeName || proj.parentProjectTypeName }}
+											</el-tag>
+											<el-tag type="warning" size="small" v-if="proj.durationMinutes || proj.durationSeconds">
+												{{ proj.durationMinutes ?? 0 }}分{{ proj.durationSeconds ?? 0 }}秒
+											</el-tag>
+											<!-- 仅单价（项目）模式才展示项目单价 -->
+											<el-tag type="success" size="small" v-if="detailChargeMode === 3 && proj.fee !== undefined && proj.fee !== null">
+												¥{{ proj.fee }}
+											</el-tag>
+											<el-tag type="primary" size="small" v-if="proj.limitCount">
+												限报 {{ proj.limitCount }} 人
+											</el-tag>
+										</div>
+									</div>
+								</div>
+								<div class="edc-group-table" v-if="proj.groups?.length">
+									<div class="edc-group-row edc-group-header">
+										<span>组别名称</span>
+										<span>出生日期范围</span>
+										<span>性别</span>
+									</div>
+									<div class="edc-group-row" v-for="(g, gi) in proj.groups" :key="g.id ?? gi">
+										<span class="edc-group-name">{{ g.groupName || '-' }}</span>
+										<span class="edc-group-date">
+											{{ g.birthDateStart ? g.birthDateStart.slice(0, 10) : '不限' }}
+											~
+											{{ g.birthDateEnd ? g.birthDateEnd.slice(0, 10) : '不限' }}
+										</span>
+										<el-tag size="small" :type="g.gender === 0 ? 'primary' : g.gender === 1 ? 'danger' : ''">
+											{{ g.gender === 0 ? '男' : g.gender === 1 ? '女' : '不限性别' }}
+										</el-tag>
+									</div>
+								</div>
+								<div class="edc-group-empty" v-else>暂无组别配置</div>
+							</div>
+						</div>
+					</div>
+
+										<!-- 费用信息 -->
+					<div class="edc-section">
+						<div class="edc-section-hd">
+							<el-icon class="edc-section-icon"><CreditCard /></el-icon>
+							<span class="edc-section-title">费用信息</span>
+						</div>
+						<div class="edc-fee-wrap">
+							<div class="edc-fee-mode-row">
+								<span class="edc-fee-mode-lbl">收费模式</span>
+								<el-tag size="large" :type="getDetailChargeModeTagType(formData.feeConfig.chargeMode)" effect="plain">
+									{{ getDetailChargeModeText(formData.feeConfig.chargeMode) }}
+								</el-tag>
+							</div>
+							<div class="edc-fee-price-row" v-if="detailChargeMode === 1 || detailChargeMode === 2">
+								<span class="edc-fee-price-lbl">报名费用</span>
+								<span class="edc-fee-price-val">¥ {{ formData.feeConfig.price ?? 0 }}</span>
+							</div>
+							<div v-if="detailChargeMode === 3 && formData.feeConfig.projects?.length" class="edc-fee-proj-table">
+								<div class="edc-fee-proj-hdr">
+									<span>项目名称</span>
+									<span>费用（元）</span>
+								</div>
+								<div class="edc-fee-proj-row" v-for="proj in formData.feeConfig.projects" :key="proj.id">
+									<span>{{ proj.name }}</span>
+									<span class="edc-fee-proj-price">¥ {{ proj.fee ?? 0 }}</span>
+								</div>
+							</div>
+							<el-empty v-if="detailChargeMode === 0" description="该赛事免费参加" :image-size="60" style="padding: 16px 0;" />
+						</div>
+					</div>
+
+					<!-- 参与单位 -->
+					<div class="edc-section" v-if="formData.units?.units?.length">
+						<div class="edc-section-hd">
+							<el-icon class="edc-section-icon"><OfficeBuilding /></el-icon>
+							<span class="edc-section-title">参与单位</span>
+						</div>
+						<div class="edc-units-row">
+							<div class="edc-unit-card" v-for="unit in formData.units.units" :key="unit.unitName + unit.sort">
+								<div class="edc-unit-avatar">
+									<el-image v-if="unit.logoUrl" :src="unit.logoUrl" fit="contain" class="edc-unit-avatar-img" />
+									<el-icon v-else :size="30" color="#c0c4cc"><OfficeBuilding /></el-icon>
+								</div>
+								<div class="edc-unit-body">
+									<div class="edc-unit-name">{{ unit.unitName || '-' }}</div>
+									<el-tag size="small" type="info" style="margin-top: 4px;">
+										{{ unit.customUnitType || getDetailUnitTypeLabel(unit.unitType) }}
+									</el-tag>
+								</div>
+							</div>
+						</div>
+					</div>
+
+				</div>
+				<el-empty v-else description="暂无详情数据" style="padding: 60px 0;" />
 			</template>
 
 			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="isShowDetailDialog = false">关闭</el-button>
-				</span>
+				<div class="detail-dialog-footer">
+					<el-button @click="isShowDetailDialog = false" size="large" round style="min-width: 120px;">关闭</el-button>
+				</div>
 			</template>
 		</el-dialog>
 
@@ -445,7 +617,7 @@
 <script setup>
 import { ref, computed, nextTick, onUnmounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { Close, Picture, Loading, CircleCheck, ArrowRight, Plus, Delete } from '@element-plus/icons-vue';
+import { Close, Picture, Loading, CircleCheck, ArrowRight, Plus, Delete, Calendar, Document, OfficeBuilding, Trophy, CreditCard, InfoFilled } from '@element-plus/icons-vue';
 import ProTable from '/@/components/ProTable/index.vue';
 import { formatDate } from '/@/utils/formatTime';
 import {
@@ -465,10 +637,7 @@ import {
 } from '/@/api/match/usereventregistration';
 import { teamPageGet, teamDetailGet } from '/@/api/match/unitUser';
 import QRCode from 'qrcodejs2-fixes';
-import Step1BasicInfo from '/@/views/match/manage/Steps/Step1BasicInfo.vue';
-import Step2Units from '/@/views/match/manage/Steps/Step2Units.vue';
-import Step3ProjectConfig from '/@/views/match/manage/Steps/Step3ProjectConfig.vue';
-import UserStep4FeeConfig from './UserStep4FeeConfig.vue';
+
 import PreviewImage from '/@/components/PreviewImage/index.vue';
 
 const tableRef = ref();
@@ -582,6 +751,11 @@ const eventStatusMap = {
 	'RegistrationEnded': { type: 'warning', text: '报名结束' },
 	'Ongoing': { type: 'primary', text: '比赛中' },
 	'Ended': { type: 'danger', text: '已结束' },
+	0: { type: 'info', text: '未开始' },
+	1: { type: 'success', text: '报名中' },
+	2: { type: 'warning', text: '报名结束' },
+	3: { type: 'primary', text: '比赛中' },
+	4: { type: 'danger', text: '已结束' },
 };
 
 const getEventStatusTagType = (status) => {
@@ -601,6 +775,64 @@ const isEventEnrolling = (row) => {
 	return isEnrolling && canRegister;
 };
 
+// -------------------- 赛事详情展示辅助函数 --------------------
+const getDetailUnitTypeLabel = (v) => {
+	const map = { 0: '主办单位', 1: '承办单位', 2: '协办单位', 3: '赞助单位' };
+	return map[v] ?? '-';
+};
+
+const normalizeDetailChargeMode = (mode) => {
+	if (mode === 0 || mode === '0' || mode === 'Free' || mode === 'free') return 0;
+	if (mode === 1 || mode === '1' || mode === 'FixedPrice') return 1;
+	if (mode === 2 || mode === '2' || mode === 'UnitPriceEvent') return 2;
+	if (mode === 3 || mode === '3' || mode === 'UnitPriceProject') return 3;
+	return 0;
+};
+
+const detailChargeMode = computed(() => normalizeDetailChargeMode(formData.value.feeConfig?.chargeMode));
+
+const getDetailChargeModeText = (mode) => {
+	const m = normalizeDetailChargeMode(mode);
+	return ['免费', '定价（赛事）', '单价（赛事）', '单价（项目）'][m] ?? '-';
+};
+
+const getDetailChargeModeTagType = (mode) => {
+	const m = normalizeDetailChargeMode(mode);
+	return ['success', 'warning', 'primary', 'info'][m] ?? 'info';
+};
+
+const formatPointsRuleBrief = (pointsRuleDetail, pointsRuleName) => {
+	if (!pointsRuleDetail) return pointsRuleName || '-';
+	const ruleName = pointsRuleDetail.ruleName || pointsRuleName || '未命名规则';
+	const participationPoints = pointsRuleDetail.participationPoints ?? 0;
+	const detailLines = (pointsRuleDetail.details ?? []).map((d) => {
+		const start = d?.startRank;
+		const end = d?.endRank;
+		const points = d?.points ?? 0;
+		if (start === undefined || start === null) return `积分 ${points}`;
+		if (end === undefined || end === null || Number(start) === Number(end)) return `第${start}名: ${points}分`;
+		return `第${start}-${end}名: ${points}分`;
+	});
+	const remark = pointsRuleDetail.remark ? `备注: ${pointsRuleDetail.remark}` : '';
+	return [
+		`参赛积分: ${participationPoints}`,
+		...detailLines,
+		remark,
+	].filter(Boolean).join('；\n');
+};
+
+const formatRefundRulesBrief = (refundRules) => {
+	if (!Array.isArray(refundRules) || !refundRules.length) return '-';
+	return refundRules.map((r) => {
+		const start = r?.dayStart ?? 0;
+		const end = r?.dayEnd;
+		const range = end === 999 || end === '999' ? `${start}天及以上` : `${start}-${end ?? 0}天`;
+		const percent = r?.deductPercentage ?? 0;
+		const remark = r?.remark ? `（${r.remark}）` : '';
+		return `${range}: 扣除${percent}%${remark}`;
+	}).join('；\n');
+};
+
 // 展平项目和组别数据用于详情弹窗显示
 const detailProjectsForDisplay = computed(() => {
 	const list = [];
@@ -632,6 +864,7 @@ const detailProjectsForDisplay = computed(() => {
 const isShowDetailDialog = ref(false);
 const detailLoading = ref(false);
 const detailData = ref(null);
+const detailStatusFromList = ref(null);
 const formData = ref({
 	// 步骤1：基本信息
 	basicInfo: {
@@ -690,6 +923,7 @@ const projectConfigWithRegistrationType = computed(() => ({
 const clearDetailState = () => {
 	detailLoading.value = false;
 	detailData.value = null;
+	detailStatusFromList.value = null;
 	formData.value = {
 		basicInfo: {
 			id: undefined,
@@ -737,6 +971,7 @@ const openDetailDialog = async (row) => {
 	isShowDetailDialog.value = true;
 	detailLoading.value = true;
 	detailData.value = null;
+	detailStatusFromList.value = row?.status ?? row?.eventStatus ?? null;
 	try {
 		const { succeeded, data } = await usereventregistrationDetailGet(eventId);
 		if (!succeeded) {
@@ -2192,6 +2427,552 @@ const handleCreateOrderAndPay = async () => {
 };
 </script>
 <style scoped lang="scss">
+/* ---- 赛事详情弹窗 ---- */
+.event-detail-dialog {
+	:deep(.el-dialog__header) {
+		padding: 0;
+		margin-right: 0;
+	}
+
+	:deep(.el-dialog__body) {
+		padding: 0;
+		max-height: calc(80vh - 130px);
+		overflow-y: auto;
+		scrollbar-width: thin;
+		scrollbar-color: #c0c4cc transparent;
+
+		&::-webkit-scrollbar {
+			width: 6px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: #c0c4cc;
+			border-radius: 3px;
+		}
+	}
+
+	:deep(.el-dialog__footer) {
+		border-top: 1px solid #ebeef5;
+		padding: 16px 24px;
+	}
+}
+
+.detail-dialog-custom-header {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 16px 20px;
+	background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+	border-radius: 8px 8px 0 0;
+}
+
+.detail-dialog-header-badge {
+	width: 36px;
+	height: 36px;
+	background: rgba(255, 255, 255, 0.22);
+	border: 2px solid rgba(255, 255, 255, 0.45);
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 15px;
+	font-weight: 700;
+	color: #fff;
+	flex-shrink: 0;
+}
+
+.detail-dialog-header-title {
+	font-size: 17px;
+	font-weight: 600;
+	color: #fff;
+	flex: 1;
+	letter-spacing: 1px;
+}
+
+.detail-dialog-close-btn {
+	color: rgba(255, 255, 255, 0.85) !important;
+	border-color: rgba(255, 255, 255, 0.4) !important;
+	background: rgba(255, 255, 255, 0.12) !important;
+
+	&:hover {
+		color: #fff !important;
+		background: rgba(255, 255, 255, 0.28) !important;
+	}
+}
+
+.event-detail-content {
+	padding: 20px 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+/* ---- Hero ---- */
+.edc-hero {
+	display: flex;
+	gap: 20px;
+	background: linear-gradient(135deg, #f0f7ff 0%, #fafcff 100%);
+	border: 1px solid #e0ecfd;
+	border-radius: 12px;
+	overflow: hidden;
+	padding: 20px;
+	align-items: flex-start;
+}
+
+.edc-cover-wrap {
+	flex-shrink: 0;
+	width: 180px;
+	height: 140px;
+	border-radius: 8px;
+	overflow: hidden;
+	border: 1px solid #e0ecfd;
+	background: #f5f7fa;
+}
+
+.edc-cover-img {
+	width: 100%;
+	height: 100%;
+}
+
+.edc-cover-empty {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	color: #c0c4cc;
+	font-size: 12px;
+}
+
+.edc-hero-right {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.edc-event-name {
+	margin: 0;
+	font-size: 20px;
+	font-weight: 700;
+	color: #1a3c6e;
+	line-height: 1.3;
+}
+
+.edc-badge-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.edc-kv-list {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	margin-top: 4px;
+}
+
+.edc-kv-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 13px;
+}
+
+.edc-kv-item--block {
+	align-items: flex-start;
+}
+
+.edc-kv-label {
+	flex-shrink: 0;
+	color: #909399;
+	min-width: 60px;
+}
+
+.edc-kv-val {
+	color: #303133;
+	font-weight: 500;
+}
+
+.edc-kv-val--multiline {
+	white-space: pre-wrap;
+	line-height: 1.6;
+	word-break: break-word;
+}
+
+/* ---- Section ---- */
+.edc-section {
+	border: 1px solid #e0ecfd;
+	border-radius: 12px;
+	overflow: hidden;
+	box-shadow: 0 2px 8px rgba(64, 158, 255, 0.05);
+}
+
+.edc-section-hd {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 13px 18px;
+	background: linear-gradient(90deg, #eef5ff 0%, #f8fbff 100%);
+	border-bottom: 1px solid #e0ecfd;
+}
+
+.edc-section-icon {
+	color: #409eff;
+	font-size: 16px;
+	flex-shrink: 0;
+}
+
+.edc-section-title {
+	font-size: 14px;
+	font-weight: 600;
+	color: #1a3c6e;
+	flex: 1;
+}
+
+.edc-section-count {
+	font-size: 12px;
+	color: #909399;
+	background: #ecf5ff;
+	padding: 2px 8px;
+	border-radius: 10px;
+}
+
+/* ---- 时间安排 ---- */
+.edc-time-row {
+	display: flex;
+	gap: 12px;
+	padding: 16px;
+	flex-wrap: wrap;
+}
+
+.edc-time-card {
+	flex: 1;
+	min-width: 160px;
+	background: #fff;
+	border: 1px solid #dce8fb;
+	border-radius: 10px;
+	padding: 14px 16px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 6px;
+}
+
+.edc-time-card-label {
+	font-size: 12px;
+	color: #909399;
+	font-weight: 500;
+	letter-spacing: 0.5px;
+	margin-bottom: 4px;
+}
+
+.edc-time-card-val {
+	font-size: 13px;
+	color: #303133;
+	font-weight: 500;
+	text-align: center;
+}
+
+.edc-time-card-arrow {
+	color: #b0c8f0;
+	font-size: 14px;
+}
+
+.edc-time-card-empty {
+	font-size: 13px;
+	color: #c0c4cc;
+}
+
+.edc-material-tip {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 10px 16px;
+	background: #fff7e6;
+	border-top: 1px solid #ffe0a0;
+	font-size: 13px;
+	color: #b07d00;
+
+	.el-icon {
+		color: #e6a23c;
+		flex-shrink: 0;
+	}
+}
+
+/* ---- 赛事介绍 ---- */
+.edc-intro {
+	padding: 16px 20px;
+	background: #fff;
+	font-size: 14px;
+	line-height: 1.8;
+	color: #303133;
+	word-break: break-word;
+
+	:deep(p) { margin: 6px 0; }
+	:deep(img) { max-width: 100%; border-radius: 4px; }
+	:deep(h1, h2, h3) { margin: 10px 0 6px; }
+}
+
+/* ---- 参与单位 ---- */
+.edc-units-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	padding: 16px;
+	background: #fff;
+}
+
+.edc-unit-card {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 14px;
+	border: 1px solid #e0ecfd;
+	border-radius: 10px;
+	background: #f8fbff;
+	min-width: 160px;
+	transition: box-shadow 0.2s;
+
+	&:hover {
+		box-shadow: 0 2px 10px rgba(64, 158, 255, 0.12);
+	}
+}
+
+.edc-unit-avatar {
+	width: 44px;
+	height: 44px;
+	border-radius: 8px;
+	overflow: hidden;
+	background: #eef2fa;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.edc-unit-avatar-img {
+	width: 100%;
+	height: 100%;
+}
+
+.edc-unit-body {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.edc-unit-name {
+	font-size: 13px;
+	font-weight: 600;
+	color: #303133;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.edc-reg-limit-bar {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 9px 18px;
+	background: #f0f9ff;
+	border-bottom: 1px solid #d6ebff;
+	font-size: 13px;
+	color: #3a7bd5;
+
+	.el-icon {
+		color: #409eff;
+		flex-shrink: 0;
+	}
+
+	strong {
+		color: #1a5fc8;
+		font-size: 15px;
+		margin: 0 1px;
+	}
+}
+
+/* ---- 报名项目 ---- */
+.edc-proj-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 16px;
+	background: #fff;
+}
+
+.edc-proj-card {
+	border: 1px solid #e0ecfd;
+	border-radius: 10px;
+	overflow: hidden;
+}
+
+.edc-proj-hd {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 12px 14px;
+	background: linear-gradient(90deg, #f0f7ff, #fafcff);
+	border-bottom: 1px solid #e0ecfd;
+}
+
+.edc-proj-num {
+	width: 26px;
+	height: 26px;
+	background: linear-gradient(135deg, #409eff, #66b1ff);
+	color: #fff;
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 12px;
+	font-weight: 700;
+	flex-shrink: 0;
+	margin-top: 2px;
+	box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
+}
+
+.edc-proj-info {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.edc-proj-name {
+	font-size: 14px;
+	font-weight: 600;
+	color: #1a3c6e;
+}
+
+.edc-proj-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.edc-group-table {
+	padding: 0 14px 12px;
+}
+
+.edc-group-row {
+	display: grid;
+	grid-template-columns: 1fr 1.6fr 90px;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 0;
+	border-bottom: 1px solid #f0f4fb;
+	font-size: 13px;
+
+	&:last-child {
+		border-bottom: none;
+	}
+}
+
+.edc-group-header {
+	color: #909399;
+	font-size: 12px;
+	padding-top: 12px;
+}
+
+.edc-group-name {
+	font-weight: 500;
+	color: #303133;
+}
+
+.edc-group-date {
+	color: #606266;
+}
+
+.edc-group-empty {
+	padding: 12px 14px;
+	color: #c0c4cc;
+	font-size: 13px;
+}
+
+/* ---- 费用信息 ---- */
+.edc-fee-wrap {
+	padding: 16px 20px;
+	background: #fff;
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+
+.edc-fee-mode-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.edc-fee-mode-lbl {
+	font-size: 13px;
+	color: #909399;
+	min-width: 60px;
+}
+
+.edc-fee-price-row {
+	display: flex;
+	align-items: baseline;
+	gap: 12px;
+}
+
+.edc-fee-price-lbl {
+	font-size: 13px;
+	color: #909399;
+	min-width: 60px;
+}
+
+.edc-fee-price-val {
+	font-size: 26px;
+	font-weight: 700;
+	color: #f56c6c;
+}
+
+.edc-fee-proj-table {
+	border: 1px solid #e0ecfd;
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.edc-fee-proj-hdr {
+	display: grid;
+	grid-template-columns: 1fr 120px;
+	padding: 8px 14px;
+	background: #f0f7ff;
+	font-size: 12px;
+	color: #909399;
+	font-weight: 500;
+}
+
+.edc-fee-proj-row {
+	display: grid;
+	grid-template-columns: 1fr 120px;
+	padding: 10px 14px;
+	border-top: 1px solid #eef2fb;
+	font-size: 13px;
+	color: #303133;
+	transition: background 0.15s;
+
+	&:hover {
+		background: #f8fbff;
+	}
+}
+
+.edc-fee-proj-price {
+	font-weight: 600;
+	color: #f56c6c;
+}
+
+.detail-dialog-footer {
+	display: flex;
+	justify-content: center;
+}
+
 .dialog-footer {
 	margin-top: 80px;
 }
@@ -2888,6 +3669,10 @@ const handleCreateOrderAndPay = async () => {
 
 /* 响应式适配 */
 @media screen and (max-width: 768px) {
+	.edc-rule-grid {
+		grid-template-columns: 1fr;
+	}
+
 	.step-footer--payment {
 		flex-wrap: wrap;
 		gap: 8px;