zhywpt-sp/subpackage/orders/components/nav-bg-car1.vue

<template>
	<view class="t-header">
		<view class="">
			<image :src="`${$imgUrl}issuance/bg-img.png`" style='height: 500rpx;width: 100%;'></image>
			<view class="progress-wrap">
				<template v-for="item in 5" :key='item'>
					<view class="item-lines" v-if='item > 1' :class="{'item-lines-on':item<=activeNum}"></view>
					<view class="item-circles" :class="{'item-circles-on':item<activeNum,'item-active':item==activeNum}"
						:style="{'--bgimg':`url(${$imgUrl}issuance/buzhou-active.png)`}">{{item}}</view>
				</template>
			</view>
		</view>
		<view class="tab">
			<view class="img-pos">
				<view class="img-flex">
					<view class="car" :style="{left:(activeNum-1)* 140 - 30  +'rpx'}">
						<image class="car-img" :src="`${$imgUrl}issuance/b-car.png`"></image>
					</view>
					<view class="flag">
						<image class="flag-img" :src="`${$imgUrl}issuance/r-qi.png`"></image>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	const props = defineProps({
		'activeNum': {
			default: 1,
			type: Number
		}
	})
</script>
<style>
	page {
		background-color: #E9EDF0 !important;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.t-header {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.item-circles {
		width: 50rpx;
		height: 50rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		// color: #25D8C9;
		color: #1F3B4C;
		font-size: 30rpx;
		font-weight: 700;

		&.item-active {
			background-color: transparent;
			font-family: Adobe Heiti Std;
			font-size: 34rpx;
			color: #443101;
			background-image: var(--bgimg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 76rpx;
			height: 76rpx;
		}
	}

	.item-circles-on {
		background: #FFFFFF;
	}


	.item-lines {
		background-color: rgba(255, 255, 255, 0.3);
		width: 66rpx;
		margin: 0 12rpx;
		border-radius: 2rpx;
		height: 2rpx;
	}

	.item-lines-on {
		background-color: rgba(255, 255, 255, 1);
	}

	.tab {
		background: #ffffff;
		border-radius: 30rpx 30rpx 0rpx 0;
		height: 0;
		position: absolute;
		width: 690rpx;
		left: 30rpx;
		top: 350rpx;

		.img-pos {
			position: absolute;
			left: 52rpx;
			top: -14rpx;
			// right: 50rpx;

			.img-flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				width: calc(100% - 52rpx);
				height: 42rpx;

				.car {
					position: absolute;
					top: 0;
					z-index: 3;
				}

				.car-img {
					width: 86rpx;
					height: 42rpx;
				}

				.flag {
					position: absolute;
					left: 617rpx;
					// top: 10rpx;
					z-index: 3;
				}

				.flag-img {
					width: 30rpx;
					height: 35rpx;
				}
			}
		}

	}
</style>