FE-lab-xcx/pages_safetyEducationExamination/views/exam/onlineExamPlay.vue

<!-- 在线考试答题页 -->
<template>
	<view class="exam-screen">
		<!-- 顶部栏 -->
		<view class="topbar">
			<!-- <view class="topbar-left" @click="requestSubmit(false)">‹ 交卷</view> -->
			<view class="topbar-left"></view>
			<view class="topbar-title">{{ examInfo.examName || '考试中' }}</view>
			<view class="topbar-right" @click="toggleQuestionNav">题号</view>
		</view>

		<!-- 剩余时间条 -->
		<view class="time-bar">
			<view class="time-bar-left">
				<text class="time-label">剩余时间</text>
				<text class="time-value">{{ formattedTime }}</text>
			</view>
			<text class="time-tip">请合理安排答题时间</text>
		</view>

		<!-- 答题统计 -->
		<view class="stat-row">
			<view class="stat-item">
				<text class="stat-num stat-answered">{{ answeredCount }}</text>
				<text class="stat-label">已答</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num">{{ unansweredCount }}</text>
				<text class="stat-label">未答</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num">{{ totalCount }}</text>
				<text class="stat-label">总题</text>
			</view>
		</view>

		<!-- 题号导航面板 -->
		<view v-if="showQuestionNav" class="q-nav-panel">
			<view class="q-nav-scroll-wrapper">
				<view class="q-nav-header">
					<text class="q-nav-title">题目列表</text>
					<text class="q-nav-close" @click="toggleQuestionNav">✕</text>
				</view>
				<scroll-view scroll-y class="q-nav-scroll">
					<view v-for="(group, gi) in questionTypeGroups" :key="gi" class="q-group">
						<view class="q-group-title">{{ group.questionTypeName }}（{{ group.questionCount }}题 {{ group.totalScore }}分）</view>
						<view class="q-num-row">
							<view
								v-for="(q, qi) in group.questions"
								:key="qi"
								class="q-num"
								:class="gi === groupIndex && qi === questionIndex ? 'current' : (q.answered === 1 ? 'answered' : '')"
								@click="selectQuestion(gi, qi)"
							>{{ q.questionNo }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 题目内容 -->
		<scroll-view scroll-y class="q-scroll-content">
			<view v-if="currentQuestion.snapshotQuestionId" class="q-card">
				<view class="q-header">
					<view class="q-header-left">
						<text class="q-type-badge">{{ currentQuestion.questionTypeName }}</text>
						<text class="q-num-text">第 {{ currentQuestion.questionNo }} 题</text>
						<text class="q-score-text">（{{ currentQuestion.questionScore }}分）</text>
					</view>
					<text v-if="currentQuestion.difficulty" class="q-difficulty">{{ getDifficultyText(currentQuestion.difficulty) }}</text>
				</view>
				<view class="q-content">
					<rich-text :nodes="currentQuestion.questionContent || ''"></rich-text>
				</view>
				<view class="q-options">
					<view
						v-for="(opt, oi) in (currentQuestion.options || [])"
						:key="oi"
						class="q-option"
						:class="{ selected: isSelected(opt.optionLabel) }"
						:data-oi="oi"
						@click="onOptionTap"
					>
						<view class="q-option-label">{{ opt.optionLabel }}</view>
						<view class="q-option-content">
							<rich-text :nodes="opt.optionContent || opt.optionLabel"></rich-text>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="pageLoading" class="empty-tip">加载中...</view>
			<view v-else class="empty-tip">暂无题目</view>
			<view class="scroll-bottom-space"></view>
		</scroll-view>

		<!-- 上一题/下一题 -->
		<view class="q-nav">
			<view class="q-nav-btn" :class="{ disabled: isFirstQuestion }" @click="prevQuestion">上一题</view>
			<view class="q-nav-btn q-nav-btn-next" :class="{ disabled: isLastQuestion }" @click="nextQuestion">下一题</view>
		</view>

		<!-- 底部提交 -->
		<view class="exam-bottom">
			<view class="btn-primary" @click="requestSubmit(false)">提交试卷</view>
		</view>

		<!-- 交卷结果遮罩 -->
		<view v-if="showResult" class="result-shade">
			<view class="result-card">
				<view class="result-score-wrap">
					<text class="result-score-num">{{ resultData.score }}</text>
					<text class="result-score-unit">分</text>
				</view>
				<view class="result-score-label">本次考试成绩</view>
				<view class="result-pass-pill" :class="resultData.isPass ? 'is-pass' : 'is-fail'">
					<text class="result-pass-text">{{ resultData.isPass ? '考试通过' : '考试未通过' }}</text>
				</view>
				<view class="result-grid">
					<view class="result-grid-item">
						<view class="result-grid-label">满分</view>
						<view class="result-grid-value">{{ resultData.totalScore }}</view>
					</view>
					<view class="result-grid-item">
						<view class="result-grid-label">及格分</view>
						<view class="result-grid-value text-orange">{{ resultData.passScore }}</view>
					</view>
					<view class="result-grid-item">
						<view class="result-grid-label">用时</view>
						<view class="result-grid-value">{{ resultData.usedTime }}</view>
					</view>
				</view>
				<view class="result-stats">
					<view class="result-stats-row">
						<text class="result-stats-label">正确题数</text>
						<text class="result-stats-value text-green">{{ resultData.correctCount }}</text>
					</view>
					<view class="result-stats-row">
						<text class="result-stats-label">错误题数</text>
						<text class="result-stats-value text-red">{{ resultData.wrongCount }}</text>
					</view>
					<view class="result-stats-row">
						<text class="result-stats-label">正确率</text>
						<text class="result-stats-value text-blue">{{ resultData.accuracy }}</text>
					</view>
				</view>
				<view class="result-btns">
					<view v-if="!resultData.isPass" class="result-btn result-btn-outline" @click="reviewMistakes">查看错题</view>
					<!-- <view v-if="resultData.canRetake" class="result-btn result-btn-primary" @click="retakeExam">重新考试</view> -->
					<view class="result-btn result-btn-primary" @click="closeResult">返回</view>
				</view>
				<view class="result-cert" v-if="resultData.certificateName">
					<text class="result-cert-icon">🏆</text>
					<view class="result-cert-info">
						<view class="result-cert-title">您已获得证书！</view>
						<view class="result-cert-name">{{ resultData.certificateName }}</view>
						<!-- <view class="result-cert-btn" @click="goCertificate(resultData.certificatePath)">查看证书</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		examElExamAttemptReviewSidebar,
		examElExamAttemptReviewQuestion,
		examUserExamGetExamSurplusTime,
		examUserExamAnswerSave,
		examUserExamSubmit,
		examUserExamStart,
	} from '@/pages_safetyEducationExamination/api/index.js'

	export default {
		data() {
			return {
				examId: '',
				attemptId: '',
				examKind: '',
				examInfo: {},
				questionTypeGroups: [],
				currentQuestion: {},
				groupIndex: 0,
				questionIndex: 0,
				remainingSeconds: 0,
				initialSeconds: 0,
				timer: null,
				hasWarnedTime: false,
				showQuestionNav: false,
				pageLoading: false,
				isSaving: false,
				isSubmitting: false,
				hasSubmitted: false,
				showResult: false,
				resultData: {},
			}
		},
		computed: {
			isFirstQuestion() {
				return this.groupIndex === 0 && this.questionIndex === 0;
			},
			isLastQuestion() {
				const lastGi = this.questionTypeGroups.length - 1;
				if (lastGi < 0) return true;
				const lastGroup = this.questionTypeGroups[lastGi];
				return this.groupIndex === lastGi && this.questionIndex === (lastGroup.questions.length - 1);
			},
			totalCount() {
				return this.questionTypeGroups.reduce((s, g) => s + (g.questions ? g.questions.length : 0), 0);
			},
			answeredCount() {
				return this.questionTypeGroups.reduce((s, g) => {
					return s + (g.questions || []).filter(q => q.answered === 1).length;
				}, 0);
			},
			unansweredCount() {
				return this.totalCount - this.answeredCount;
			},
			formattedTime() {
				const s = Math.max(0, Math.floor(this.remainingSeconds));
				const m = Math.floor(s / 60);
				const sec = s % 60;
				return m + '分' + (sec < 10 ? '0' : '') + sec + '秒';
			},
		},
		onLoad(options) {
			this.examId = options.examId || '';
			this.attemptId = options.attemptId || '';
			this.examKind = options.examKind || '';
			if (!this.attemptId) {
				uni.showToast({ title: '考试信息无效', icon: 'none' });
				setTimeout(() => uni.navigateBack(), 1500);
				return;
			}
			this.pageLoading = true;
			this.loadSidebar();
		},
		onShow() {
			if (this.hasSubmitted || !this.attemptId) return;
			if (this.questionTypeGroups.length > 0) {
				this.syncRemainingTime();
			}
		},
		onHide() {
			this.clearTimer();
			if (!this.hasSubmitted) this.saveCurrentAnswer();
		},
		onUnload() {
			this.clearTimer();
			if (!this.hasSubmitted) this.saveCurrentAnswer();
		},
		methods: {
			async loadSidebar() {
				try {
					const { data } = await examElExamAttemptReviewSidebar({
						attemptId: this.attemptId,
						examKind: this.examKind,
					});
					if (data.code === 200 && data.data) {
						this.examInfo = {
							examTypeName: data.data.examTypeName || '',
							examName: data.data.examName || '',
							questionCount: data.data.questionCount || 0,
							totalScore: data.data.totalScore || 0,
							passScore: data.data.passScore || 0,
						};
						this.$set(this, 'questionTypeGroups', data.data.questionTypeGroups || []);
						this.groupIndex = 0;
						this.questionIndex = 0;
						const firstGroup = this.questionTypeGroups[0];
						if (firstGroup && firstGroup.questions && firstGroup.questions.length > 0) {
							await this.loadQuestion(firstGroup.questions[0].snapshotQuestionId);
							this.syncRemainingTime();
						}
					} else {
						uni.showToast({ title: data.message || '加载失败', icon: 'none' });
					}
				} catch (e) {
					console.error('加载题号导航失败', e);
				} finally {
					this.pageLoading = false;
				}
			},
			async loadQuestion(snapshotQuestionId) {
				try {
					const { data } = await examElExamAttemptReviewQuestion({
						attemptId: this.attemptId,
						snapshotQuestionId: snapshotQuestionId,
						examScene: 1,
					});
					if (data.code === 200 && data.data) {
						this.$set(this, 'currentQuestion', data.data);
					} else {
						throw new Error(data.message || '加载题目失败');
					}
				} catch (e) {
					console.error('加载题目失败', e);
					throw e;
				}
			},
			async syncRemainingTime() {
				try {
					const { data } = await examUserExamGetExamSurplusTime({ attemptId: this.attemptId });
					if (data.code === 200) {
						this.remainingSeconds = Number(data.data) || 0;
						if (!this.initialSeconds) this.initialSeconds = this.remainingSeconds;
						this.clearTimer();
						this.startTimer();
					}
				} catch (e) {
					console.error('获取剩余时间失败', e);
				}
			},
			startTimer() {
				if (this.timer) return;
				this.timer = setInterval(() => {
					if (this.remainingSeconds <= 0) {
						this.clearTimer();
						this.autoSubmit();
						return;
					}
					this.remainingSeconds--;
					if (this.remainingSeconds === 60 && !this.hasWarnedTime) {
						this.hasWarnedTime = true;
						uni.showToast({ title: '请注意剩余时间', icon: 'none', duration: 2000 });
					}
				}, 1000);
			},
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			selectAnswer(optIndex) {
				const opt = (this.currentQuestion.options || [])[optIndex];
				if (!opt || !this.currentQuestion.snapshotQuestionId) return;
				let tags = Array.isArray(this.currentQuestion.answerTags) ? [...this.currentQuestion.answerTags] : [];
				if (this.currentQuestion.questionType === 2) {
					const idx = tags.indexOf(opt.optionLabel);
					if (idx === -1) {
						tags.push(opt.optionLabel);
					} else {
						tags.splice(idx, 1);
					}
				} else {
					tags = [opt.optionLabel];
				}
				this.$set(this.currentQuestion, 'answerTags', tags);
			},
			onOptionTap(e) {
				const oi = Number(e.currentTarget.dataset.oi);
				this.selectAnswer(oi);
			},
			isSelected(label) {
				const tags = this.currentQuestion.answerTags;
				return Array.isArray(tags) && tags.indexOf(label) !== -1;
			},
			saveCurrentAnswer() {
				const q = this.currentQuestion;
				if (!q || !q.snapshotQuestionId) return Promise.resolve();
				const tags = Array.isArray(q.answerTags) ? q.answerTags.filter(Boolean) : [];
				if (tags.length === 0) return Promise.resolve();
				// 保存时记录当前 index，.then 回调里用快照避免 index 已切换导致回写错题
				const gi = this.groupIndex;
				const qi = this.questionIndex;
				return examUserExamAnswerSave({
					attemptId: this.attemptId,
					snapshotQuestionId: q.snapshotQuestionId,
					userAnswer: tags.join(','),
				}).then(res => {
					if (res.data && res.data.code === 200) {
						const groups = this.questionTypeGroups;
						if (groups[gi] && groups[gi].questions[qi]) {
							this.$set(groups[gi].questions[qi], 'answered', 1);
						}
					}
				}).catch(e => {
					console.error('保存答案失败', e);
				});
			},
			async changeQuestion(targetGi, targetQi) {
				if (this.isSaving) return;
				if (targetGi === this.groupIndex && targetQi === this.questionIndex) return;
				const group = this.questionTypeGroups[targetGi];
				if (!group || !group.questions || !group.questions[targetQi]) return;
				const prevGi = this.groupIndex;
				const prevQi = this.questionIndex;
				this.isSaving = true;
				try {
					await this.saveCurrentAnswer();
					this.groupIndex = targetGi;
					this.questionIndex = targetQi;
					await this.loadQuestion(group.questions[targetQi].snapshotQuestionId);
				} catch (e) {
					this.groupIndex = prevGi;
					this.questionIndex = prevQi;
					uni.showToast({ title: '题目加载失败，请重试', icon: 'none' });
				} finally {
					this.isSaving = false;
				}
			},
			selectQuestion(gi, qi) {
				this.changeQuestion(gi, qi);
				this.showQuestionNav = false;
			},
			prevQuestion() {
				if (this.isFirstQuestion || this.isSaving) return;
				if (this.questionIndex > 0) {
					this.changeQuestion(this.groupIndex, this.questionIndex - 1);
				} else {
					const prevGi = this.groupIndex - 1;
					const prevGroup = this.questionTypeGroups[prevGi];
					if (prevGroup) {
						this.changeQuestion(prevGi, prevGroup.questions.length - 1);
					}
				}
			},
			nextQuestion() {
				if (this.isLastQuestion || this.isSaving) return;
				const currentGroup = this.questionTypeGroups[this.groupIndex];
				if (this.questionIndex < currentGroup.questions.length - 1) {
					this.changeQuestion(this.groupIndex, this.questionIndex + 1);
				} else {
					this.changeQuestion(this.groupIndex + 1, 0);
				}
			},
			toggleQuestionNav() {
				this.showQuestionNav = !this.showQuestionNav;
			},
			getNumClass(gi, qi, q) {
				if (gi === this.groupIndex && qi === this.questionIndex) return 'current';
				if (q.answered === 1) return 'answered';
				return '';
			},
			getDifficultyText(d) {
				return { 1: '简单', 2: '一般', 3: '较难', 4: '很难' }[d] || '';
			},
			async requestSubmit(isAuto) {
				if (this.isSubmitting || this.hasSubmitted) return;
				this.isSubmitting = true;
				await this.saveCurrentAnswer();
				const unanswered = this.unansweredCount;
				if (isAuto) {
					await this.doSubmit();
					this.isSubmitting = false;
					return;
				}
				const content = unanswered > 0 ? `还有${unanswered}题未答，确认要交卷吗？` : '确认要交卷吗？';
				uni.showModal({
					title: '提示',
					content: content,
					success: async (res) => {
						if (res.confirm) {
							await this.doSubmit();
						}
						this.isSubmitting = false;
					},
					fail: () => { this.isSubmitting = false; }
				});
			},
			async autoSubmit() {
				if (this.isSubmitting || this.hasSubmitted) return;
				this.isSubmitting = true;
				await this.saveCurrentAnswer();
				uni.showToast({ title: '考试时间结束，正在提交…', icon: 'none' });
				await this.doSubmit();
				this.isSubmitting = false;
			},
			async doSubmit() {
				try {
					const { data } = await examUserExamSubmit({ attemptId: this.attemptId });
					if (data.code === 200 && data.data) {
						this.hasSubmitted = true;
						this.clearTimer();
						this.buildResult(data.data);
						this.showResult = true;
					} else {
						uni.showToast({ title: data.message || '交卷失败', icon: 'none' });
					}
				} catch (e) {
					console.error('交卷失败', e);
					uni.showToast({ title: '交卷失败', icon: 'none' });
				}
			},
			buildResult(resp) {
				const score = resp.totalScore || 0;
				const passScore = this.examInfo.passScore || 0;
				const pass = score >= passScore;
				const correct = this.pickNumber(resp.correctCount, resp.correctNum);
				const wrong = this.pickNumber(resp.wrongCount, resp.wrongNum);
				const total = this.pickNumber(resp.totalQuestionNum, this.totalCount);
				this.resultData = {
					score: score,
					isPass: pass,
					totalScore: this.examInfo.totalScore || 0,
					passScore: passScore,
					usedTime: this.buildUsedTime(),
					correctCount: correct == null ? '-' : `${correct} 题`,
					wrongCount: wrong == null ? '-' : `${wrong} 题`,
					accuracy: (correct == null || !total) ? '-' : `${Math.round((correct / total) * 100)}%`,
					canRetake: !pass && resp.canContinueExam === 1,
					certName: resp.certName || '',
					certUrl: resp.certUrl || '',
				};
			},
			pickNumber(...vals) {
				for (const v of vals) {
					if (v !== undefined && v !== null && v !== '') return Number(v);
				}
				return null;
			},
			buildUsedTime() {
				if (!this.initialSeconds) return '-';
				const used = Math.max(0, this.initialSeconds - Math.floor(this.remainingSeconds));
				const m = Math.floor(used / 60);
				const s = used % 60;
				return `${m}'${s < 10 ? '0' : ''}${s}"`;
			},
			async retakeExam() {
				try {
					const { data } = await examUserExamStart({ examId: this.examId, examScene: 1 });
					if (data.code === 200 && data.data && data.data.attemptId) {
						this.attemptId = data.data.attemptId;
						this.showResult = false;
						this.hasSubmitted = false;
						this.isSubmitting = false;
						this.hasWarnedTime = false;
						this.$set(this, 'questionTypeGroups', []);
						this.$set(this, 'currentQuestion', {});
						this.groupIndex = 0;
						this.questionIndex = 0;
						this.remainingSeconds = 0;
						this.initialSeconds = 0;
						this.pageLoading = true;
						this.loadSidebar();
					} else {
						uni.showToast({ title: data.message || '重新考试失败', icon: 'none' });
					}
				} catch (e) {
					console.error('重新考试失败', e);
					uni.showToast({ title: '重新考试失败', icon: 'none' });
				}
			},
			closeResult() {
				this.showResult = false;
				uni.navigateBack();
			},
			reviewMistakes() {
				const examName = encodeURIComponent(this.examInfo.examName || '');
				uni.redirectTo({
					url: `/pages_safetyEducationExamination/views/exam/incorrectQuestionsList?attemptId=${this.attemptId}&examName=${examName}`
				});
			},
			goCertificate(url) {
				if (!url) {
					uni.showToast({ title: '暂无证书', icon: 'none' });
					return;
				}
				uni.showLoading({ title: '加载中...', mask: true });
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.tempFilePath,
								fileType: 'pdf',
								showMenu: true,
								fail: () => {
									uni.showToast({ title: '打开证书失败', icon: 'none' });
								},
								complete: () => {
									uni.hideLoading();
								}
							});
						} else {
							uni.hideLoading();
							uni.showToast({ title: '证书加载失败', icon: 'none' });
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({ title: '证书加载失败', icon: 'none' });
					}
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.exam-screen
		height 100%
		display flex
		flex-direction column
		background #f5f7fa
		position relative

	.topbar
		display flex
		align-items center
		justify-content space-between
		height 88rpx
		padding 0 28rpx
		background #fff
		border-bottom 1rpx solid #e8edf3
		flex-shrink 0

	.topbar-left
		font-size 28rpx
		color #1677ff
		min-width 80rpx

	.topbar-title
		font-size 28rpx
		font-weight 600
		color #222
		flex 1
		text-align center

	.topbar-right
		font-size 28rpx
		color #1677ff
		min-width 80rpx
		text-align right

	.time-bar
		display flex
		align-items center
		justify-content space-between
		padding 20rpx 28rpx
		background linear-gradient(90deg, #1677ff 0%, #0958d9 100%)
		flex-shrink 0

	.time-bar-left
		display flex
		align-items baseline

	.time-label
		font-size 24rpx
		color rgba(255,255,255,0.85)
		margin-right 16rpx

	.time-value
		font-size 44rpx
		font-weight 700
		color #fff

	.time-tip
		font-size 22rpx
		color rgba(255,255,255,0.75)

	.stat-row
		display flex
		align-items center
		background #fff
		padding 20rpx 0
		flex-shrink 0
		border-bottom 1rpx solid #e8edf3

	.stat-item
		flex 1
		display flex
		flex-direction column
		align-items center

	.stat-divider
		width 1rpx
		height 40rpx
		background #eee

	.stat-num
		font-size 36rpx
		font-weight 700
		color #333
		line-height 1

	.stat-answered
		color #1677ff

	.stat-label
		font-size 22rpx
		color #999
		margin-top 6rpx

	.q-nav-panel
		position absolute
		top 0
		left 0
		right 0
		bottom 0
		background rgba(0,0,0,0.45)
		z-index 100
		display flex
		flex-direction column
		justify-content flex-end

	.q-nav-scroll-wrapper
		background #fff
		border-radius 32rpx 32rpx 0 0
		max-height 70vh
		display flex
		flex-direction column

	.q-nav-header
		display flex
		align-items center
		justify-content space-between
		padding 28rpx 28rpx 16rpx
		flex-shrink 0

	.q-nav-title
		font-size 30rpx
		font-weight 600
		color #222

	.q-nav-close
		font-size 32rpx
		color #999
		padding 10rpx

	.q-nav-scroll
		flex 1
		overflow hidden
		padding-bottom 40rpx

	.q-group
		padding 0 28rpx 16rpx

	.q-group-title
		font-size 24rpx
		color #666
		line-height 60rpx

	.q-num-row
		display flex
		flex-wrap wrap

	.q-num
		width 72rpx
		height 72rpx
		line-height 72rpx
		text-align center
		font-size 24rpx
		border-radius 12rpx
		margin 8rpx
		background #f4f6fa
		color #333
		border 1rpx solid transparent

	.q-num.answered
		background #e6f4ff
		color #1677ff
		border-color #91caff

	.q-num.current
		background #1677ff
		color #fff

	.q-scroll-content
		flex 1
		overflow hidden

	.q-card
		margin 24rpx
		padding 28rpx
		background #fff
		border-radius 20rpx
		border 1rpx solid #dde3ed

	.q-header
		display flex
		align-items center
		justify-content space-between
		margin-bottom 20rpx

	.q-header-left
		display flex
		align-items center

	.q-type-badge
		font-size 20rpx
		padding 4rpx 14rpx
		background #e6f4ff
		color #1677ff
		border 1rpx solid #91caff
		border-radius 8rpx
		margin-right 12rpx

	.q-num-text
		font-size 26rpx
		color #333

	.q-score-text
		font-size 22rpx
		color #999

	.q-difficulty
		font-size 22rpx
		color #fa8c16
		background #fff7e6
		padding 4rpx 12rpx
		border-radius 8rpx

	.q-content
		font-size 28rpx
		line-height 1.8
		color #222
		margin-bottom 24rpx

	.q-options
		display flex
		flex-direction column

	.q-option
		display flex
		align-items center
		padding 22rpx 20rpx
		margin-bottom 16rpx
		border 2rpx solid #dde3ed
		border-radius 16rpx
		background #fff

	.q-option.selected
		border-color #1677ff
		background #e6f4ff

	.q-option-label
		width 48rpx
		height 48rpx
		line-height 48rpx
		text-align center
		border-radius 50%
		background #f4f6fa
		color #333
		font-size 24rpx
		font-weight 600
		margin-right 20rpx
		flex-shrink 0

	.q-option.selected .q-option-label
		background #1677ff
		color #fff

	.q-option-content
		flex 1
		font-size 26rpx
		color #333
		line-height 1.6

	.scroll-bottom-space
		height 200rpx

	.q-nav
		display flex
		background #fff
		border-top 1rpx solid #e8edf3
		flex-shrink 0

	.q-nav-btn
		flex 1
		height 88rpx
		line-height 88rpx
		text-align center
		font-size 28rpx
		color #1677ff

	.q-nav-btn.q-nav-btn-next
		border-left 1rpx solid #e8edf3

	.q-nav-btn.disabled
		color #ccc

	.exam-bottom
		padding 20rpx 24rpx
		padding-bottom calc(20rpx + env(safe-area-inset-bottom))
		background #fff
		border-top 1rpx solid #e8edf3
		flex-shrink 0

	.btn-primary
		background #1677ff
		color #fff
		border-radius 16rpx
		font-size 30rpx
		font-weight 600
		height 88rpx
		line-height 88rpx
		text-align center

	.result-shade
		position fixed
		top 0
		left 0
		right 0
		bottom 0
		background rgba(0,0,0,0.55)
		z-index 200
		display flex
		align-items center
		justify-content center

	.result-card
		width 580rpx
		background #fff
		border-radius 24rpx
		padding 40rpx 32rpx 32rpx
		display flex
		flex-direction column
		align-items center

	.result-score-wrap
		display flex
		align-items baseline
		line-height 1

	.result-score-num
		font-size 112rpx
		font-weight 900
		color #1857d4

	.result-score-unit
		font-size 30rpx
		font-weight 700
		color #1857d4
		margin-left 6rpx

	.result-score-label
		font-size 24rpx
		color #8896a7
		margin-top 4rpx
		margin-bottom 20rpx

	.result-pass-pill
		display inline-flex
		align-items center
		justify-content center
		border-radius 40rpx
		padding 8rpx 40rpx
		margin-bottom 28rpx

	.result-pass-pill.is-pass
		background #f6ffed

	.result-pass-pill.is-fail
		background #fff5f5

	.result-pass-text
		font-size 30rpx
		font-weight 700

	.result-pass-pill.is-pass .result-pass-text
		color #10a37f

	.result-pass-pill.is-fail .result-pass-text
		color #e53e3e

	.result-grid
		display flex
		width 100%
		gap 16rpx
		margin-bottom 24rpx

	.result-grid-item
		flex 1
		background #f4f6fa
		border-radius 16rpx
		padding 18rpx 12rpx
		text-align center

	.result-grid-label
		font-size 22rpx
		color #8896a7
		margin-bottom 8rpx

	.result-grid-value
		font-size 28rpx
		font-weight 500
		color #1a2233

	.result-stats
		width 100%
		background #f4f6fa
		border-radius 16rpx
		padding 22rpx 24rpx
		margin-bottom 28rpx
		box-sizing border-box

	.result-stats-row
		display flex
		justify-content space-between
		align-items center
		font-size 26rpx
		color #4a5568

	.result-stats-row + .result-stats-row
		margin-top 16rpx

	.result-stats-value
		font-weight 500

	.result-btns
		display flex
		width 100%
		gap 16rpx

	.result-btn
		flex 1
		height 80rpx
		line-height 80rpx
		text-align center
		border-radius 14rpx
		font-size 28rpx

	.result-btn-outline
		border 1rpx solid #1857d4
		color #1857d4

	.result-btn-primary
		border 1rpx solid #1857d4
		background #1857d4
		color #fff

	.result-cert
		display flex
		align-items center
		width 100%
		margin-top 24rpx
		padding 24rpx 20rpx
		background #f4f6fa
		border-radius 16rpx
		box-sizing border-box

	.result-cert-icon
		font-size 56rpx
		margin-right 20rpx

	.result-cert-info
		flex 1

	.result-cert-title
		font-size 28rpx
		font-weight 500
		color #1a2233
		margin-bottom 8rpx

	.result-cert-name
		font-size 24rpx
		color #8896a7

	.result-cert-btn
		display inline-block
		margin-top 12rpx
		padding 0 24rpx
		height 56rpx
		line-height 56rpx
		background #1857d4
		color #fff
		font-size 24rpx
		border-radius 10rpx

	.text-orange
		color #e67e22
	.text-green
		color #10a37f
	.text-red
		color #e53e3e
	.text-blue
		color #1857d4

	.empty-tip
		text-align center
		padding 80rpx 0
		color #aaa
		font-size 26rpx
</style>