zhywpt-sp/subpackage/personal-center/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>