<template>
	<!-- <view>基本考核完成</view> -->
	<view class="containers po-r">
		<image src="" mode="" class="mainBg"></image>
		<view class="w-100 po-a content">
			<view class="flex-rowl">
				<image src="@/static/images/ydd/logo.png" mode="" class="logo"></image>
				<view class="size-36 fw700 color-fff">
					伴宠师认证
				</view>
			</view>
			<view class="renz flex-rowl mt10">
				<text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text>
				<image src="@/static/images/ydd/more.png" mode=""></image>
			</view>
			<view class="neir bg-fff mt24">
				<view class="steps flex-between">
					<view class="step flex-colc">
						<view class="num mb6 flex-rowc size-26 color-fff">
							1
						</view>
						<text class="size-22">基本考核</text>
					</view>
					<view class="line"></view>
					<view class="step flex-colc">
						<view class="num mb6 flex-rowc size-26 color-fff">
							2
						</view>
						<text class="size-22">培训考核</text>
					</view>
					<view class="line"></view>
					<view class="step flex-colc">
						<view class="num mb6 flex-rowc size-26 color-fff">
							3
						</view>
						<text class="size-22">最终准备</text>
					</view>
				</view>
				<view class="color-ffb size-22 mt32">
					为保证喂养员认证顺利进行，请认真填写并确保信息的真实性
				</view>
			</view>

		</view>
		<view class="content_ box-size" :style="{borderRadius:'16rpx'}">
			<view class="top box-size" :style="{borderRadius:'16rpx'}">
				<view class="level">
					<view class="img">
						<image src="" mode=""></image>
					</view>
					基本考核答题已完成
				</view>
				<view class="level">
					<view class="text">
						!
					</view>
					进行培训考核的答题前请认真观看下面的视频和资料！
				</view>
			</view>
			<view class="">
				<view class="form-title">
					平台&服务介绍
				</view>
				<view class="level veo">
					<view class="veo_">
						<video src=""></video>
						猫妈狗爸平台介绍
					</view>
					<view class="">
						<video src=""></video>
						喂养学习视频
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
.bt120 {
		margin-bottom: 120rpx;
		width: 716rpx;
		box-sizing: border-box;
	}

	.footer-btn {
		width: 100vw;
		height: 144rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		align-items: center;

		.btn {
			font-size: 30rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 574rpx;
			height: 94rpx;
			border-radius: 94rpx;
			background-color: #FFBF60;
		}
	}

	.type {
		width: 190rpx;
		margin-bottom: 74rpx;
	}

	.form {
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		width: 716rpx;
	}

	.title {
		&::before {
			content: "";
			display: block;
			width: 9rpx;
			height: 33rpx;
			background-color: #FFBF60;
			margin-right: 7rpx;
		}
	}

	.mb6 {
		margin-bottom: 6rpx;
	}

	.containers {
		position: relative;
		.neir {
			padding: 47rpx 27rpx 36rpx 27rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			width: 716rpx;

			.steps {
				.line {
					width: 163rpx;
					height: 3rpx;
					background-color: #BDBDBD;
					margin-bottom: 30rpx;
				}

				.num {
					width: 50rpx;
					height: 50rpx;
					background-color: #FFBF60;
					border-radius: 50%;
				}

			}
		}


		.mainBg {
			width: 100vw;
			height: 442rpx;
			background-image: linear-gradient(to bottom, #FFBF60, #f5f5f5);
		}

		.content {
			top: 0;
			left: 0;
			padding: 16rpx;

			.logo {
				width: 194rpx;
				height: 70rpx;
			}

			.renz {

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}
	
	.content_{
		width: 675rpx;
		height: auto;
		background-color: pink;
		position: absolute;
		top: 410rpx;
		left: 15rpx;
		padding: 1% 3%;
		
		.top{
			width: 625rpx;
			height: 132rpx;
			background-color: #FFFCF1;
			padding: 16rpx 26rpx;
			font-size: 28rpx;
			
			.img image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				background-color: red;
				margin:3rpx 10rpx 0 0;
			}
			
			.text{
				width: 40rpx;
				height: 40rpx;
				border: 1rpx solid gray;
				border-radius: 100%;
				// background-color: red;
				margin:3rpx 10rpx 0 0;
				display: grid;
				place-items: center;
			}
			
			.veo{
				justify-content: space-between;
				
				.veo_ video{
					width: 100rpx;
					height: 150rpx;
					background-color: red;
				}
			}
			
			
		}
	}
	
	.level{
		display: flex;
	}
</style>