zhywpt-sp/service/process/process.vue

<template>
	<view class="wrapper">
		<view class="flow-path">
		
			<view >
				<view class="flow-list">
					<flow-path-list :options="state.flowList"></flow-path-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {reactive} from "vue";
	import flowPathList from "./components/flow-path-list.vue";
	const state = reactive({
		flowPathTabList: ["办理流程", "办理条件", "常见问题"],
		flowList: [
			//办理流程数据
			{
				title: "第一步：信息校验：",
				desc: "提交车牌号、车牌颜色、收货地址相关信息",
			},
			{
				title: "第二步：证件上传：",
				desc: "上传身份证、行驶证等相关信息",
			},
			{
				title: "第三步：签约代扣：",
				desc: "选择签约账户并关联",
			},
			{
				title: "第四步：产品选择：",
				desc: "选择购买的发行产品",
			},
			{
				title: "第五步：订单完成：",
				desc: "支付完成订单",
			},
		],
	});
	

	
</script>

<style lang="scss">
	page{
		background: #eef7f7;
	}
	.flow-path {
			padding: 20rpx 0rpx 20rpx;
	
			.scroll-view {
				white-space: nowrap;
				// position: sticky;
				top: 0;
			}
	
			.top-menu {
				display: flex;
			}
	
			.top-menu .tab {
				font-size: 28rpx;
				padding: 38rpx 30rpx;
				color: #666666;
				position: relative;
			}
	
			.top-menu .active .border {
				position: absolute;
				width: 70%;
				height: 16rpx;
				background: #00b38b;
				opacity: 0.3;
				bottom: 40rpx;
				z-index: -99;
				left: 15%;
				border-radius: 6rpx;
			}
	
			.top-menu .active {
				font-weight: bold;
				font-size: 32rpx;
				color: #0d0f26;
			}
	
			.top-menu .active::before {
				width: 100%;
				height: 16rpx;
				background: #00b38b;
				opacity: 0.3;
			}
	
			.flow-list {
				margin: 0rpx 30rpx;
				min-height: 700rpx;
				background: #ffffff;
				box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
				border-radius: 20rpx;
				padding: 55rpx 30rpx 30rpx;
			}
		}
	
</style>