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

<template>
	<!-- <view>伴宠师认证</view> -->
	 <view>
		<view class="box">
			<view class="content bg-fff">
				<view class="">
					<view class="label size-22 level" :style="{borderRadius:'10rpx'}">
						选择题
					</view>
					<view class="">
						<view class="size-28 mt32 mb20">
							1、猫咪每天在地上走路，时不时还会打滚， 身上是很不干净的，最好每个星期洗次澡
						</view>
						<view class="size-28 color-777 p20 daan mb24">
							A、对
						</view>
						<view class="size-28 color-777 p20 daan active mb24">
							B、错
						</view>
					</view>
				</view>
				<view class="mt60">
					<view class="label size-22 level" :style="{borderRadius:'10rpx'}">
						主观题
					</view>
					<view class="">
						<view class="size-28 mt32 mb20">
							1、喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格怕生，请问您会如何进行服务?请详细描述您的全部服务流程(若服务宠物不包含猫咪可回答“略”)
						</view>
						<view class="size-28 color-777 p20 daan">
							<textarea value="" placeholder="" />
							<text :style="{color:'#FF2A2A'}">字数低于700字，不予合格</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn buttom ">
			<view class="size-22 color-777 tips-rest">
				<!-- todo -->
				剩余考试机会：<text class="highlight">{{ restTimes }}</text>次
			</view>
			<view class="btn" @click="onClick">
				重新考试
			</view>
		</view>
	</view>

</template>

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

	const restTimes = ref()

	onShow(() => {
		// todo: fetch
		restTimes.value = 3
	})

	const onClick = () => {
		uni.reLaunch({
			url: "/otherPages/authentication/examination/start"
			// todo: check
			// url: "/otherPages/authentication/list/index"
    })
	}
</script>

<style lang="scss" scoped>
	.active {
		color: #FFBF60;
		background-color: rgb(255, 241, 240);
	}

	.daan {
		background-color: #F3F3F3;
		border-radius: 50rpx;
	}

	.p20 {
		padding: 20px;
	}

	.box {
		// background-image: linear-gradient(to bottom, #ffbf60, #f2f2f2);
		padding: 16rpx;

		.step {
			width: 720rpx;
			height: 32rpx;
			border-radius: 32rpx;
			background-color: #D9D9D9;

			.in {
				width: 50%;
				height: 32rpx;
				background-color: #ffbf60;
				border-radius: 32rpx;
			}
		}
	}

	.content {
		border-radius: 20rpx;
		padding: 15rpx 20rpx;

		.label {
			width: 86rpx;
			padding: 5rpx 15rpx;
			color: #fff;
			background-color: #FFBF60;
			justify-content: center;
		}
	}

	.level {
		display: flex;
	}

	.subjectivity {
		height: auto;
	}

	.buttom {
		display: grid;
		place-items: center;
	}

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