zx_flk_app/component/useGuidance/useGuidance.vue

<template>
	<view class="tip-view">
		<view class="tip-title-view flex-row align-center">
			<!-- <image style="width: 144rpx;height: 40rpx;" src="https://qiniu.bms16.com/FjUW1kuRvXWTEftyn9nH1AbGWuxK"
				mode='aspectFit'></image> -->
			<text class="txt-guide">{{ $t('使用指导') }}</text>
			<image style="width: 86rpx;height: 80rpx;" src="https://qiniu.bms16.com/FibAaPERzqi6m95EP2jREUKixjUi"
				mode='aspectFill'></image>
			<view class="w-bg flex-row"></view>
		</view>
		<view class="step-view flex-row  align-center">
			<view class="icon-list-view">
				<image class="img1" src="https://qiniu.bms16.com/Fp0BE27Q0VTD8qUJRHUVhWO6VEbO" mode='aspectFit'></image>
			</view>
			<view class="dashed-line"></view>
			<view class="icon-list-view">
				<image class="img1" src="https://qiniu.bms16.com/FqDzYwAbnSEgf3yv9SAb92Vq4ZEB" mode='aspectFit'></image>
			</view>
			<view class="dashed-line"></view>
			<view class="icon-list-view">
				<image class="img1" src="https://qiniu.bms16.com/FlFMHzco6j9XOpMI21tSnR9500Un" mode='aspectFit'></image>
			</view>
		</view>
		<view class="step-tip-view flex-row  align-center">
			<view class="step-tip-text">
				<image class="step-num-1" src="https://qiniu.bms16.com/Fm4gMRmW6UOwLcU-eW8LDLNfiUJe" mode='aspectFill'>
				</image>{{$t('线上选择用车方案生成待支付订单')}}
			</view>
			<view class="step-tip-text">
				<image class="step-num-2" src="https://qiniu.bms16.com/FvYN7SxOYIhXEqSAJZrQIBQuTx79" mode='aspectFill'>
				</image>{{$t('导航到店向商家支付订单金额')}}
			</view>
			<view class="step-tip-text">
				<image class="step-num-3" src="https://qiniu.bms16.com/FhZ7w0X8iVuxFPdetEF9C3YYkJ7Z" mode='aspectFill'>
				</image>{{$t('支付完成后直接现场取车')}}
			</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; */
	}

	.txt-guide {
		font-family: PingFangSC, PingFang SC;
		height: 40rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 600;
	}

	.tip-title-view {
		padding-left: 24rpx;
		/* border-radius: 40rpx; */
	}

	.w-bg {

		flex: 1;
		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 .img1 {
		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>