zx_flk_app/component/useGuidance/useGuidance.vue

<template>
	<view class="tip-view">
		<view class="tip-title-view flex-row align-center">
			<img style="width: 144rpx;height: 40rpx;" src="https://qiniu.bms16.com/FjUW1kuRvXWTEftyn9nH1AbGWuxK" alt="">
			<img style="width: 86rpx;height: 80rpx;" src="https://qiniu.bms16.com/FibAaPERzqi6m95EP2jREUKixjUi" alt="">
			<view class="w-bg flex-row"></view>
		</view>
		<view class="step-view flex-row  align-center">
			<view class="icon-list-view"><img src="https://qiniu.bms16.com/Fp0BE27Q0VTD8qUJRHUVhWO6VEbO" alt=""></view>
			<view class="dashed-line"></view>
			<view class="icon-list-view"><img src="https://qiniu.bms16.com/FqDzYwAbnSEgf3yv9SAb92Vq4ZEB" alt=""></view>
			<view class="dashed-line"></view>
			<view class="icon-list-view"><img src="https://qiniu.bms16.com/FlFMHzco6j9XOpMI21tSnR9500Un" alt=""></view>
		</view>
		<view class="step-tip-view flex-row  align-center">
			<view class="step-tip-text"><img class="step-num-1" src="https://qiniu.bms16.com/Fm4gMRmW6UOwLcU-eW8LDLNfiUJe" alt="">线上选择用车方案生成待支付订单</view>
			<view class="step-tip-text"><img class="step-num-2" src="https://qiniu.bms16.com/FvYN7SxOYIhXEqSAJZrQIBQuTx79" alt="">导航到店向商家支付订单金额</view>
			<view class="step-tip-text"><img class="step-num-3" src="https://qiniu.bms16.com/FhZ7w0X8iVuxFPdetEF9C3YYkJ7Z" alt="">支付完成后直接现场取车</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
		}
	};
</script>
<style scoped>
	.tip-view{
		background: #0A59F7;
		border-radius: 50rpx;
		margin-bottom: 20rpx;
		/* height: 80rpx; */
	}
	.tip-title-view{
		padding-left:24rpx ;
		/* border-radius: 40rpx; */
	}
	.w-bg{
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 0rpx 40rpx 0rpx 0rpx;
	}
	.step-view{
		justify-content: space-around;
		background: #FFFFFF;
		padding: 32rpx 80rpx 0;
		border-top-left-radius: 32rpx;
	}
	.icon-list-view>img{
		width: 80rpx;
		height: 72rpx;
	}
	.dashed-line{
		/* border: 3rpx solid #F1F3F4; */
		border-style: dashed;
		border-width: 3rpx; /* 定义边框粗细 */
		border-color: #F1F3F4; /* 定义边框颜色 */
		width: 136rpx;
		height: 2rpx;
		display: flex;
		flex-grow: 1;
		padding: 0 80rpx;
	}
	.step-tip-view{
		justify-content: space-around;
		background-color: #FFF;
		padding: 22rpx 24rpx 40rpx;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
	.step-tip-text{
		font-weight: 400;
		font-size: 24rpx;
		color: #060809;
		opacity: 0.8;
		
	}
	.step-tip-text:nth-child(2){
		margin: 0 38rpx 0 40rpx;
	}
	.step-num-1{
		width: 14rpx;
		height: 22rpx;
		margin-right: 4rpx;
	}
	.step-num-2{
		width: 20rpx;
		height: 22rpx;
		margin-right: 4rpx;
	}
	.step-num-3{
		width: 20rpx;
		height: 24rpx;
		margin-right: 4rpx;
	}
</style>