hospital-rescue-app-v2/pages/course/practice.uvue

<template>
	<hr-page page-bg="#F3F4F6" status-bg="#FFFFFF" nav-title="顺序练习" @right-click="onMore">
		<template v-slot:right>
			<x-icon name="more-fill" color="#6B7280" font-size="18"></x-icon>
		</template>

		<view class="hr-body">

			<!-- ============ hero ============ -->
			<view class="prac-hero">
				<view class="prac-c1"></view>
				<view class="prac-ic">
					<x-icon name="play-fill" color="#FFFFFF" font-size="27"></x-icon>
				</view>
				<text class="prac-t">{{ meta.subject }}</text>
				<text class="prac-s">顺序练习 · 按章节顺序出题</text>
			</view>

			<!-- ============ 练习信息 ============ -->
			<hr-card variant="list" style="margin-top:10px">
				<hr-lrow icon="▦" theme="pri" title="题目数量" sub="覆盖本课题全部章节">
					<template v-slot:right>
						<text class="prac-val">{{ meta.total }} 题</text>
					</template>
				</hr-lrow>
				<hr-lrow icon="◔" theme="amb" title="预计用时" sub="按每题 36 秒估算">
					<template v-slot:right>
						<text class="prac-val">约 {{ meta.minutes }} 分钟</text>
					</template>
				</hr-lrow>
				<hr-lrow icon="✓" theme="grn" title="目标正确率" sub="达标后计入课题完成度" :is-last="true">
					<template v-slot:right>
						<text class="prac-val prac-val-grn">{{ meta.goal }}</text>
					</template>
				</hr-lrow>
			</hr-card>

			<hr-tip style="margin-top:10px" theme="warn" icon="⚑"
				:text="'顺序练习不限制次数，答错的题目会自动进入错题本，可随时回来复习。'"></hr-tip>

			<!-- ============ 上次练习 ============ -->
			<hr-sec title="上次练习" :first="false"></hr-sec>
			<hr-card>
				<view class="hr-row-between">
					<text class="prac-last">{{ meta.lastTime }} · 已练 {{ meta.lastDone }} 题</text>
					<text class="prac-rate">正确率 {{ meta.lastRate }}%</text>
				</view>
				<view style="margin-top:9px">
					<hr-progress :percent="lastPct"></hr-progress>
				</view>
				<text class="prac-note">上次练到第 {{ meta.lastDone }} 题，可继续或重新开始。</text>
			</hr-card>

			<view style="height:14px"></view>
		</view>

		<template v-slot:footer>
			<view class="hr-fixedbar">
				<view class="hr-btn hr-btn-primary hr-btn-lg" style="flex:1" @click="onStart">
					<text class="prac-btn-t">开始练习</text>
				</view>
			</view>
		</template>
	</hr-page>
</template>

<script lang="uts" setup>
	import { computed } from 'vue'
	import { practiceMeta } from '@/mock/index.uts'
	import { navTo } from '@/utils/nav.uts'

	/** s36 顺序练习 */
	const meta = practiceMeta

	const lastPct = computed(() : number => {
		return Math.round(meta.lastDone * 100 / meta.total)
	})

	function onStart() : void {
		navTo('/pages/course/quiz?idx=0')
	}

	function onMore() : void {
		uni.showToast({ title: '练习记录 / 重置进度', icon: 'none' })
	}
</script>

<style>
	.prac-hero {
		background-image: linear-gradient(to bottom right, #2563EB, #1D4ED8);
		border-radius: 32rpx;
		padding: 44rpx 32rpx 44rpx 32rpx;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		position: relative;
	}

	.prac-c1 {
		position: absolute;
		right: -80rpx;
		bottom: -104rpx;
		width: 240rpx;
		height: 240rpx;
		border-radius: 120rpx;
		background-color: rgba(255, 255, 255, 0.09);
	}

	.prac-ic {
		width: 128rpx;
		height: 128rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 255, 255, 0.2);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 24rpx;
	}

	.prac-t {
		font-size: 35.8rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.prac-s {
		font-size: 25.8rpx;
		color: rgba(255, 255, 255, 0.86);
		margin-top: 10rpx;
	}

	.prac-val {
		font-size: 33.6rpx;
		font-weight: bold;
		color: #1F2937;
		margin-left: 16rpx;
	}

	.prac-val-grn {
		color: #059669;
	}

	.prac-last {
		font-size: 28rpx;
		color: #6B7280;
	}

	.prac-rate {
		font-size: 28rpx;
		font-weight: bold;
		color: #2563EB;
	}

	.prac-note {
		font-size: 24.6rpx;
		color: #9CA3AF;
		margin-top: 14rpx;
	}

	.prac-btn-t {
		font-size: 35.8rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>