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

<template>
	<view>
		<view class="containers po-r">
			<image src="" mode="" class="mainBg"></image>
			<view class="w-100 po-a content">
				
				<stepProgress :step="3"></stepProgress>

				<view class="step mt24">
					<view class="li flex-rowl">
						<view class="num flex-rowc">
							1
						</view>
						<view class="item">
							<view class="flex-between mb10">
								<view class="flex-rowl">
									<image class="img" src="@/static/images/ydd/end12.png" mode=""></image>
									<text class="size-30 color-000 fw700">实名认证</text>
								</view>
								<view class="size-22 color-ffb">
									已完成
								</view>
							</view>
							<view class="info">
								<view class="size-22 color-777">
									真实姓名：刘思恩
								</view>
								<view class="size-22 color-777">
									身份证号码：48234792837458923
								</view>
							</view>
						</view>
					</view>

					<view class="li flex-rowl po-r">
						<view class="line po-a">
						</view>
						<view class="num flex-rowc">
							2
						</view>
						<view class="item">
							<view class="flex-between mb10">
								<view class="flex-rowl">
									<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
									<text class="size-30 color-000 fw700">履约保证金缴纳</text>
								</view>
								<view class="size-22 color-ffb jiao">
									去缴纳
								</view>
							</view>
							<view class="info color-777 size-22">
								请缴纳履约保证金，保证金注销时可申请退还
							</view>
						</view>
					</view>

					<view class="li flex-rowl po-r">
						<view class="line po-a" style="height: 150rpx;">
						</view>
						<view class="num flex-rowc">
							3
						</view>
						<view class="item">
							<view class="flex-between mb10">
								<view class="flex-rowl">
									<image class="img" src="@/static/images/ydd/end1(4).png" mode="widthFix"></image>
									<text class="size-30 color-000 fw700">添加客服微信</text>
								</view>
								<view class="size-22 color-ffb jiao">
									去缴纳
								</view>
							</view>
							<view class="info color-777 size-22 flex-rowc">
								<text class="size-22 color-777">微信二维码</text>
								<image src="" mode="" style="width: 150rpx;height: 150rpx;"></image>
							</view>
						</view>
					</view>

					<view class="li flex-rowl po-r">
						<view class="line po-a" style="height: 150rpx;">
						</view>
						<view class="num flex-rowc">
							4
						</view>
						<view class="item">
							<view class="flex-between mb10">
								<view class="flex-rowl">
									<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
									<text class="size-30 color-000 fw700">服务工具准备</text>
								</view>
								<view class="size-22">
									查看工具包
								</view>
							</view>
							<view class="info color-777 size-22">
								<view class="flex-between">
									<text class="size-22">所在地区:</text>
									<input type="text" placeholder="请选择" />
								</view>
							</view>
							<view class="info color-777 size-22 mt20">
								<view class="flex-between">
									<text class="size-22">详细地址:</text>
									<input type="text" placeholder="请输入道路、小区、门牌号等" />
								</view>
							</view>
						</view>


					</view>
				</view>

				<view class="footer-btn" @click="onClick">
					<view class="btn">
						提交审核
					</view>
				</view>
			</view>

		</view>
		<image src="@/static/images/ydd/chat.png" mode="widthFix" class="chat"></image>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	import stepProgress from '../components/stepProgress.vue';


	const state = reactive({
		list: [{
				type: "input",
				label: "姓名",
				key: "name",
				placeholder: "请输入您的真实姓名",
			},
			{
				type: "input",
				label: "身份证号",
				key: "idCard",
				placeholder: "请输入您的真实身份证号",
			},
			{
				type: "radio",
				label: "性别",
				key: "sex",
				options: [{
						name: "男"
					},
					{
						name: "女"
					}
				]
			},
			{
				type: "input",
				label: "年龄",
				key: "gender",
				placeholder: "请输入您的年龄",
			},
			{
				type: "input",
				label: "养宠经验",
				key: "shij",
				placeholder: "请输入您的养宠年限",
				unit: "年"
			},
			{
				type: "select",
				label: "是否有专业执照",
				key: "shij",
				placeholder: "请选择",
				options: [{
					name: "是"
				}, {
					name: "没有"
				}]
			},
		]
	})

	const onClick = () => {
		// todo
	}
</script>

<style lang="scss" scoped>
	.chat {
		width: 96rpx;
		position: fixed;
		right: 20rpx;
		bottom: 400rpx;
		z-index: 9999;
		background-color: #fff;
	}

	.line {
		width: 3rpx;
		height: 100rpx;
		background-color: #BDBDBD;
		left: 25rpx;
		top: -50rpx;
	}

	.jiao {
		padding: 5px 20rpx;
		border-radius: 30rpx;
		background-color: #FFBF60;
		color: #fff;
	}

	.li {
		width: 710rpx;

		.num {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background-color: #FFBF60;
			color: #fff;
			font-weight: 700;
			font-size: 26rpx;
			margin-right: 20rpx;
		}
	}

	.item {
		padding: 26rpx 36rpx;
		border-radius: 24rpx;
		background-color: #fff;
		margin-bottom: 24rpx;
		width: 590rpx;

		.info {
			padding: 16rpx;
			background-color: #f3f3f3;
			border-radius: 16rpx;
		}
	}

	.img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
	}

	.bt120 {
		margin-bottom: 120rpx;
		width: 716rpx;
		box-sizing: border-box;
	}

	.footer-btn {
		z-index: 9999;
		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 {
		.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;
			padding-bottom: 200rpx;

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

			.renz {

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}
</style>