zhywpt-sp/subpackage/after-sale/rescind-carId/rescind-carId-select-direction.vue

<template>
	<view class="top-hint">
		<view class="txt">
			<image :src="`${$imgUrl}common/icon-tips.png`" mode="aspectFill" class="imgs"></image>
			<view>
				<text>使用场景：</text>
				<view class="grey-txt">车牌号被上任车主办理的黔通智联发行的ETC设备占用，无法新办ETC。</view>
			</view>
		</view>
		
	</view>
	
	<view class="have-gradient" style="margin-top: -20rpx;">
		<view class="have-gradient-inside">
			<view class="title"> 需要准备的材料 </view>
			<view class="cailiao">
				<view class="list" v-for="(item,index) in list">
					<view>{{item.name}}</view>
					<image class="icon" :src="`${$imgUrl}${item.img}`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
				</view>
			</view>
		</view>
	</view>
	<view class="bg">
		<view class="title"> 办理流程 </view>
		<view class="dot_wrap">
			<view class="dot_wrap_left">
				<text class="dot"></text>
				<text class="line"></text>
				<text class="dot"></text>
				<text class="line"></text>
				<text class="dot"></text>
			</view>
			<view class="dot_wrap_right">
				<view class="item">
					<image :src="`${$imgUrl}issuance/direction1.png`"></image>
					<view class="destion">
						<view class="destion1">解除车牌占用申请</view>
						<view class="destion2">业务员提交申请。</view>
					</view>
					<image :src="`${$imgUrl}issuance/direction4.png`"></image>
				</view>
				<view class="item">
					<image :src="`${$imgUrl}issuance/direction2.png`"></image>
					<view class="destion">
						<view class="destion1">资料审核</view>
						<view class="destion2">辅助说明</view>
					</view>
				</view>
				<view class="item" style="margin-bottom: 0;">
					<image :src="`${$imgUrl}issuance/direction3.png`"></image>
					<view class="destion">
						<view class="destion1">解除车牌占用</view>
						<view class="destion2">辅助说明</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="bottom-box">
		<button type="default" class="ui-btn" style="margin-bottom: 12rpx;" @click="savaHandle()">
			解除车牌占用申请
		</button>
	</view>
	
</template>

<script setup lang="ts">
	import {navTo} from "@/utils/utils";
	import {
		ref
	} from "vue";
    const list=ref([
		{'name':"申请人身份证正面",'img':"issuance/sfz.png"},
		{'name':"申请人身份证反面",'img':"issuance/sff.png"},
		{'name':"车辆行驶证主页",'img':"issuance/xz.png"},
		{'name':"车辆行驶证副页",'img':"issuance/xf.png"},
		{'name':"营业执照（单位必传）",'img':"applyCard/zhizhao.png"},
	])
	const savaHandle = () => {
       navTo(`/subpackage/after-sale/rescind-carId/rescind-carId-select`)
	}
	const progressQuery = () => {
	   navTo(`/subpackage/after-sale/rescind-carId/rescind-carId-select-list`)
	}
	
</script>

<style lang="scss" scoped>
	.bg {
		background-color: white;
		margin: 20rpx 30rpx 0;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
		overflow: hidden;
	}
	.title {
		font-weight: 400;
		font-size: 30rpx;
		color: #01243A;
	}

	.dot_wrap {
		display: flex;
		margin: 30rpx 0;

		.dot_wrap_left {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 20rpx;
			margin-top: 20rpx;

			.dot {
				width: 24rpx;
				height: 24rpx;
				background: #01243A;
				border-radius: 50%;
			}

			.line {
				height: 126rpx;
				background-color: transparent;
				border-left: 2rpx dashed #01243A;
			}
		}

		.dot_wrap_right {
			.item {
				background: #F7F7F7;
				border-radius: 12rpx;
				height: 120rpx;
				display: flex;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				width: 600rpx;
				margin-bottom: 30rpx;

				.destion {
					margin: 0 60rpx 0 20rpx;
					font-weight: 400;

					.destion1 {
						font-size: 28rpx;
						color: #01243A;
					}

					.destion2 {
						font-size: 22rpx;
						color: #999999;
						line-height: 50rpx;
					}
				}

				image {
					width: 46rpx;
					height: 47rpx;
				}
			}
		}
	}

	.des {
		font-weight: 400;
		font-size: 28rpx;
		color: #01243A;
		line-height: 56rpx;
		margin-top: 10rpx;
		text-indent: 1rem;
	}

	.cailiao {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.list {
			width: 48%;
			margin-top: 30rpx;

			view {
				text-align: center;
				margin-bottom: 15rpx;
				font-size: 28rpx;
				color: #01243A;
			}

			.icon {
				width: 100%;
				height: 190rpx;
				background-image: var(--bgimg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
	}

	.action {
		position: absolute;
		left: 0;
		height: 270rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
		margin-top: 20rpx;
	}
</style>