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

<!-- 办理流程 -->
<template>
	<view class='flow-con'>
		<view class="item" v-for="(item,index) in options" :key="index">
			<view class="b-icon" v-if='+index > 0'>
				<image :src="`${fileURL}image/newHome/xiaosan.png`" mode="aspectFill" class="img"></image>
			</view>
			<view class="item-box">
				<view class="l-img">
					<image :src="item.imgUrl" mode="aspectFit" class="img"></image>
				</view>
				<view class="r-info">
					<view class="title">
						{{(item as ItemType).title}}
					</view>
					<view class="desc">
						{{(item as ItemType).desc}}
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script setup lang="ts">
	import {
		fileURL,
	} from "@/datas/fileURL.js";
	import { PropType } from "vue";
	interface ItemType {
		title : string,
		imgUrl : string,
		desc : string,
		right ?: boolean,
	}

	const emit = defineEmits(['more'])

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

<style lang="scss" scoped>
	.img {
		height: 100%;
		width: 100%;
	}

	.b-icon {
		width: 80rpx;
		height: 9rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.img {
			height: 100%;
			width: 14rpx;
		}
	}

	.item-box {
		padding: 16rpx 0;
		display: flex;

		.l-img {
			background: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/banli-ju.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 80rpx;
			height: 80rpx;
			padding: 22rpx;
			box-sizing: border-box;


		}

		.r-info {
			margin-left: 15rpx;
			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.desc {
				margin-top: 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-size: 26rpx;
				color: #999999;
			}
		}
	}
</style>