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

<template>
	<!-- <view>培训考核</view> -->
	<view>
		<view class="box">
			<view class="">
				<view class="color-fff size-28">
					答题进度 2/5
				</view>
				<view class="step mt20 mb32">
					<view class="in">

					</view>
				</view>
				<view class="content bg-fff">
					<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="请输入您的答案，不得低于700个字" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn buttom ">
			<view class="btn" @click="toNext">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>

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

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

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

	.p20 {
		padding: 20px;
	}

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

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

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

	.content {
		border-radius: 20rpx;
		padding: 15rpx 20rpx;
		position: relative;
		bottom: 0;
		left: 0;

		.label {
			width: 80rpx;
			justify-content: center;
			padding: 5rpx 15rpx;
			color: #fff;
			background-color: #FFBF60;
		}
	}
	
	.level{
		display: flex;
	}
</style>