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

<!-- 模拟考试答题页 -->
<template>
	<view class="exam-screen">
		<!-- 顶部栏 -->
		<view class="topbar">
			<view class="topbar-left" @click="requestSubmit(false)">‹ 交卷</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-correct">{{ correct }}</text>
				<text class="stat-label">答对</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num stat-wrong">{{ incorrect }}</text>
				<text class="stat-label">答错</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num">{{ (accuracy * 100).toFixed(0) }}%</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="getNumClass(gi, qi, q)"
								@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>
					<view class="q-header-right">
						<view v-if="currentQuestion.difficulty" class="q-stars">
							<text
								v-for="s in 4"
								:key="s"
								:class="['star-icon', s <= currentQuestion.difficulty ? 'star-active' : 'star-empty']"
							>★</text>
						</view>
						<view class="view-answer-btn" @click="viewAnswerShowType = !viewAnswerShowType">
							{{ viewAnswerShowType ? '关闭答案' : '查看答案' }}
						</view>
					</view>
				</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) }"
						@click="selectAnswer(opt)"
					>
						<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 v-if="viewAnswerShowType" class="answer-result-box">
					<view class="answer-row">
						<text class="answer-label">答案：</text>
						<text class="answer-value">{{ arrayToString(currentQuestion.correctAnswerTags) }}</text>
					</view>
					<view class="analysis-title">试题解析</view>
					<view class="analysis-content">
						<rich-text v-if="currentQuestion.analysis" :nodes="currentQuestion.analysis"></rich-text>
						<text v-else class="analysis-empty">无</text>
					</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-title">{{ resultData.title }}</view>
				<view class="result-score">
					<text class="result-score-num">{{ resultData.score }}</text>
					<text class="result-score-unit">分</text>
				</view>
				<view class="result-desc">{{ resultData.desc }}</view>
				<view class="result-btns">
					<view v-if="resultData.canRetake" class="result-btn result-btn-outline" @click="retakeExam">重新考试</view>
					<view class="result-btn result-btn-primary" @click="closeResult">{{ resultData.canRetake ? '返回' : '确认' }}</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: '',
				examInfo: {},
				questionTypeGroups: [],
				currentQuestion: {},
				groupIndex: 0,
				questionIndex: 0,
				remainingSeconds: 0,
				timer: null,
				hasWarnedTime: false,
				showQuestionNav: false,
				pageLoading: false,
				isSaving: false,
				isSubmitting: false,
				hasSubmitted: false,
				showResult: false,
				resultData: {},
				viewAnswerShowType: false,
			}
		},
		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)
			},
			// 答对：isCorrect === 1
			correct() {
				let count = 0
				this.questionTypeGroups.forEach(g => {
					;(g.questions || []).forEach(q => { if (q.isCorrect === 1) count++ })
				})
				return count
			},
			// 答错：isCorrect === 0
			incorrect() {
				let count = 0
				this.questionTypeGroups.forEach(g => {
					;(g.questions || []).forEach(q => { if (q.isCorrect === 0) count++ })
				})
				return count
			},
			// 正确率
			accuracy() {
				if (this.totalCount === 0) return 0
				return parseFloat((this.correct / this.totalCount).toFixed(2))
			},
			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 || ''
			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()
			this.saveCurrentAnswer()
		},
		onUnload() {
			this.clearTimer()
			this.saveCurrentAnswer()
		},
		methods: {
			// 加载左侧题号导航
			async loadSidebar() {
				try {
					const response = await examElExamAttemptReviewSidebar({ attemptId: this.attemptId })
					const data = response.data
					this.examInfo = {
						examTypeName: data.examTypeName || '',
						examName: data.examName || '',
						questionCount: data.questionCount || 0,
						totalScore: data.totalScore || 0,
						passScore: data.passScore || 0,
					}
					this.$set(this, 'questionTypeGroups', 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()
					}
				} catch (e) {
					uni.showToast({ title: '加载失败', icon: 'none' })
				} finally {
					this.pageLoading = false
				}
			},
			// 加载题目详情（examScene:2 模拟考试）
			async loadQuestion(snapshotQuestionId) {
				try {
					const response = await examElExamAttemptReviewQuestion({
						attemptId: this.attemptId,
						snapshotQuestionId: snapshotQuestionId,
						examScene: 2,
					})
					this.$set(this, 'currentQuestion', response.data)
					this.$set(this, 'viewAnswerShowType', false)
				} catch (e) {
					uni.showToast({ title: '题目加载失败', icon: 'none' })
				}
			},
			// 同步剩余时间并启动倒计时
			async syncRemainingTime() {
				try {
					const response = await examUserExamGetExamSurplusTime({ attemptId: this.attemptId })
					this.remainingSeconds = Number(response.data) || 0
					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(opt) {
				if (!this.currentQuestion.snapshotQuestionId) return
				let tags = Array.isArray(this.currentQuestion.answerTags) ? [...this.currentQuestion.answerTags] : []
				const qType = this.currentQuestion.questionType
				if (qType == 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)
			},
			isSelected(label) {
				const tags = this.currentQuestion.answerTags
				return Array.isArray(tags) && tags.indexOf(label) !== -1
			},
			// 保存当前答案，同时回写 isCorrect 到题号列表
			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()
				return examUserExamAnswerSave({
					attemptId: this.attemptId,
					snapshotQuestionId: q.snapshotQuestionId,
					userAnswer: tags.join(','),
				}).then(response => {
					// response.data 是 isCorrect 值（1正确 0错误）
					const groups = this.questionTypeGroups
					if (groups[this.groupIndex] && groups[this.groupIndex].questions[this.questionIndex]) {
						this.$set(groups[this.groupIndex].questions[this.questionIndex], 'isCorrect', response.data)
					}
				}).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
				this.isSaving = true
				await this.saveCurrentAnswer()
				this.isSaving = false
				this.groupIndex = targetGi
				this.questionIndex = targetQi
				await this.loadQuestion(group.questions[targetQi].snapshotQuestionId)
			},
			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.isCorrect === 1) return 'correct'
				if (q.isCorrect === 0) return 'wrong'
				return ''
			},
			// 提交前确认
			async requestSubmit(isAuto) {
				if (this.isSubmitting || this.hasSubmitted) return
				this.isSubmitting = true
				await this.saveCurrentAnswer()
				// 统计未答题数
				let unanswered = 0
				this.questionTypeGroups.forEach(g => {
					;(g.questions || []).forEach(q => { if (q.isCorrect == null) unanswered++ })
				})
				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 response = await examUserExamSubmit({ attemptId: this.attemptId })
					this.hasSubmitted = true
					this.clearTimer()
					this.buildResult(response.data)
					this.showResult = true
				} catch (e) {
					uni.showToast({ title: '交卷失败', icon: 'none' })
				}
			},
			buildResult(resp) {
				const score = resp.totalScore || 0
				const pass = score >= (this.examInfo.passScore || 0)
				if (pass) {
					this.resultData = {
						title: '模拟考试通过',
						score: score,
						desc: '本次模拟考试成绩有效',
						canRetake: false,
					}
				} else if (resp.canContinueExam === 1) {
					this.resultData = {
						title: '本次模拟考试不及格',
						score: score,
						desc: `未达及格线 ${this.examInfo.passScore} 分，可重新考试`,
						canRetake: true,
					}
				} else {
					this.resultData = {
						title: '本次模拟考试不及格',
						score: score,
						desc: '未达及格线',
						canRetake: false,
					}
				}
			},
			async retakeExam() {
				try {
					const response = await examUserExamStart({ examId: this.examId, examScene: 2 })
					const data = response.data
					if (data && data.attemptId) {
						this.attemptId = data.attemptId
						this.showResult = false
						this.hasSubmitted = false
						this.isSubmitting = false
						this.hasWarnedTime = false
						this.viewAnswerShowType = false
						this.$set(this, 'questionTypeGroups', [])
						this.$set(this, 'currentQuestion', {})
						this.groupIndex = 0
						this.questionIndex = 0
						this.remainingSeconds = 0
						this.pageLoading = true
						this.loadSidebar()
					} else {
						uni.showToast({ title: response.message || '重新考试失败', icon: 'none' })
						uni.navigateBack()
					}
				} catch (e) {
					uni.showToast({ title: '重新考试失败', icon: 'none' })
				}
			},
			closeResult() {
				this.showResult = false
				uni.navigateBack()
			},
			// 答案标签转显示文字（Y→对 N→错）
			arrayToString(list) {
				if (!Array.isArray(list)) return ''
				return list.map(item => {
					if (item === 'Y') return '对'
					if (item === 'N') return '错'
					return item
				}).join(',')
			},
		}
	}
</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-correct
		color #52c41a

	.stat-wrong
		color #ff4d4f

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

	.q-nav-panel
		position fixed
		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.correct
		background #f6ffed
		color #52c41a
		border-color #b7eb8f

	.q-num.wrong
		background #fff2f0
		color #ff4d4f
		border-color #ffa39e

	.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
		flex 1
		flex-wrap wrap

	.q-header-right
		display flex
		align-items center
		flex-shrink 0
		margin-left 12rpx

	.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-stars
		display flex
		align-items center
		margin-right 16rpx

	.star-icon
		font-size 28rpx
		font-style normal

	.star-active
		color #fadb14

	.star-empty
		color #d9d9d9

	.view-answer-btn
		font-size 22rpx
		padding 6rpx 18rpx
		background #0183fa
		color #fff
		border-radius 8rpx
		white-space nowrap

	.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

	.answer-result-box
		background #f5f5f5
		border-radius 12rpx
		padding 24rpx 28rpx
		margin-top 20rpx

	.answer-row
		display flex
		align-items center
		margin-bottom 16rpx

	.answer-label
		font-size 26rpx
		font-weight 600
		color #333

	.answer-value
		font-size 26rpx
		color #1677ff
		font-weight 700

	.analysis-title
		font-size 26rpx
		font-weight 600
		color #333
		margin-bottom 12rpx

	.analysis-content
		font-size 24rpx
		color #666
		line-height 1.7
		padding 0 8rpx

	.analysis-empty
		font-size 24rpx
		color #aaa

	.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 48rpx 40rpx 36rpx
		display flex
		flex-direction column
		align-items center

	.result-title
		font-size 32rpx
		font-weight 700
		color #222
		margin-bottom 20rpx

	.result-score
		display flex
		align-items baseline
		margin-bottom 16rpx

	.result-score-num
		font-size 80rpx
		font-weight 700
		color #F59A23
		line-height 1

	.result-score-unit
		font-size 30rpx
		color #F59A23
		margin-left 8rpx

	.result-desc
		font-size 26rpx
		color #666
		text-align center
		margin-bottom 36rpx
		line-height 1.6

	.result-btns
		display flex
		width 100%

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

	.result-btn-outline
		border 1rpx solid #1677ff
		color #1677ff
		margin-right 20rpx

	.result-btn-primary
		background #1677ff
		color #fff

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