zhywpt-sp/pages/index/components/flow-path-list - 副本.vue

<!-- 办理流程 -->
<template>
	<view :class="['as-layout-horizontal', index as any === 0?'active':'', 'logistics-gray']" style="overflow: visible"
		v-for="(item,index) in options" :key="index">
		<view class="logistics-layout">
			<view class="logistics-layout-top">
				<view class="title">
					{{(item as ItemType).title}}
				</view>
			</view>
			<view class="desc">
				{{(item as ItemType).desc}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { PropType } from "vue";
	interface ItemType {
		title : string,
		desc : string,
		right ?: boolean,
	}

	const emit = defineEmits(['more'])

	const props = defineProps({
		//数据列表
		options: {
			type: Array as PropType<ItemType[]>,
			default: () => ([])
		},
	})
</script>

<style lang="scss" scoped>
	.as-layout-horizontal {
		border-left: 2px solid #00B38B;
		padding-bottom: 45rpx;
		margin-top: 10rpx;
		position: relative;

		&::after {
			content: '';
			left: -8rpx;
			top: -10rpx;
			position: absolute;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			border: 2rpx solid #00B38B;
			box-sizing: border-box;
		}

		&:last-child {
			border-left: none;
			padding-bottom: 0px;

			&::after {
				left: -4.5rpx;
			}
		}

		.logistics-layout {
			padding-left: 35rpx;

			&-top {
				width: 100%;
				display: flex;
				margin-top: -20rpx;
				align-items: center;

				.more {
					display: flex;
					align-items: center;

					.label {
						font-size: 24rpx;
						color: #00B38B;
					}

					.arror {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.title {
				font-size: 28rpx;
				color: #0D0F26;
				flex: 1;
				font-weight: bold;
			}

			.desc {
				font-size: 24rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				color: #666666;
				line-height: 25px;
			}
		}
	}

	.logistics-gray {
		border-color: #DCDCDC;

		&::after {
			background-color: #DCDCDC;
			border: none;
		}
	}

	.active {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			width: 12rpx;
			height: 12rpx;
			left: -8rpx;
			border-radius: 50%;
			background-color: #00B38B;
		}
	}
</style>