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

<template>
	<!-- <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	">
			剩余考试机会：<text :style="{color:'#FF8DC6'}">3</text>次
		</view>
		<view class="btn">
			重新考试
		</view>
	</view>
</template>

<script>
</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;
	}
</style>