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

<template>
	<view class="box">
		<view class="">
			<view class="color-fff size-28">
				答题进度 10/23
			</view>
			<view class="step mt20 mb32">
				<view class="in">

				</view>
			</view>
		</view>

		<view class="content bg-fff">
			<view class="label size-22">
				选择题
			</view>
			<view class="">
				<view class="size-28 mt32 mb20">
					1、猫咪每天在地上走路，时不时还会打滚， 身上是很不干净的，最好每个星期洗次澡
				</view>
				<view class="size-28 color-777 p20 daan">
					A、对
				</view>
				<view class="size-28 color-777 p20 daan active mt24">
					B、错
				</view>
			</view>
		</view>
	</view>
	<view class="footer-btn">
		<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 {
			padding: 5rpx 15rpx;
			color: #fff;
			background-color: #FFBF60;
		}
	}
</style>