pet-front/otherPages/authentication/examination/start.vue

<template>
	<view class="po-r">
		<image class="bg" src="" mode=""></image>
		<view class="po-a content w-100">
			<view class="top bg-fff">
				<view class="com-title size-32 fw700 flex-rowl">
					您选择的宠物类型
				</view>
				<image class="mt32" v-if="petType === 'cat'" src="../static/list/cat-active.png" mode="widthFix"></image>
				<image class="mt32" v-else-if="petType === 'dog'" src="../static/list/dog-active.png" mode="widthFix"></image>
				<image class="mt32" v-else-if="petType === 'special-pet'" src="../static/list/special-pet-active.png" mode="widthFix"></image>
			</view>

			<view class="text po-r bg-fff">
				<text
					class="size-28">即将开始基础养宠经验考核，该环节是对喂养员科学养宠经验及理念的基础考核，考核题目均为选择判断题，题目较为简单;大多为科学养宠所涉及的常识题，以客观事实判定标准答案;小部分题目为平台对喂养员的要求，以平台自行判定标准答案!</text>
				<view class="po-a flex-rowl tips">
					<image class="ml16" src="@/static/images/ydd/icon1.png" mode="widthFix"></image>
					<text class="size-28 ml16">养宠考试说明</text>
				</view>
			</view>

			<view class="text po-r bg-fff mb150">
				<text
					class="size-28">即将开始基础养宠经验考核，该环节是对喂养员科学养宠经验及理念的基础考核，考核题目均为选择判断题，题目较为简单;大多为科学养宠所涉及的常识题，以客观事实判定标准答案;小部分题目为平台对喂养员的要求，以平台自行判定标准答案!</text>
				<view class="po-a flex-rowl tips">
					<image class="ml16" src="@/static/images/ydd/icon2.png" mode="widthFix"></image>
					<text class="size-28 ml16">考试注意事项</text>
				</view>
			</view>


		</view>
		<view class="footer-btn flex-colc">
			<view class="size-22 color-777 tips-rest">
				<!-- todo -->
				剩余考试机会：<text class="highlight">{{ restTimes }}</text>次
			</view>
			<view class="btn" @click="toNext">
				开始考试
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { onShow } from '@dcloudio/uni-app'

	const petType = ref()
	const restTimes = ref()
	
	onShow(() => {
		// todo: fetch
		petType.value = 'cat'
		restTimes.value = 3
	})

	const content =
		`即将开始基础养宠经验考核，该环节是对喂养员科学养宠经验及理念的基础考核，考核题目均为选择判断题，题目较为简单;大多为科学养宠所涉及的常识题，以客观事实判定标准答案;小部分题目为平台对喂养员的要求，以平台自行判定标准答案!`

	const toNext = () => {
		uni.navigateTo({
			url: "/otherPages/authentication/examination/base"
		})
	}
</script>

<style lang="scss" scoped>
	.mb150 {
		margin-bottom: 150rpx;
	}

	.text {
		padding: 50rpx 37rpx;
		border-radius: 20rpx;
		margin-top: 43px;
	}

	.tips {
		width: 302rpx;
		height: 67rpx;
		background-color: #FFEBCE;
		top: -28rpx;
		left: 20rpx;
		border-radius: 0 90rpx 0 0;

		image {
			width: 40rpx;
		}
	}

	.content {
		padding: 16rpx;
		width: 718rpx;
		left: 0;
		top: 0;
	}

	.bg {
		width: 750rpx;
		height: 432px;
		background-image: linear-gradient(to bottom, #FFBF60, #f5f5f5);
	}

	.top {
		padding: 46rpx 17rpx 17rpx;
		margin: 16rpx;
		border-radius: 20rpx;

		image {
			width: 198rpx;
		}
	}

	.tips {
		&-rest {
			color: #707070;
			font-size: 22rpx;
			margin: 9rpx 0 13rpx 0;
			.highlight {
				color: #FF8DC6;
			}
		}
	}

	.footer-btn {
		height: 163rpx;
		box-sizing: border-box;
		padding-bottom: 18rpx;
	}
</style>