JiangxiMiniProgram/pages/carEntry/operaAppointment/operaAppointment.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="实操训练预约"></topNavbar>
		<view class="pad">
			<view class="top_row">
				<view class="step_row">
					<view class="dian"  @click="changeStep(1)">
						<view class="num" :class="{active: currentStep==1}">1</view>
					</view>
					<view class="line"></view>
					<view class="dian"  @click="changeStep(2)">
						<view class="num" :class="{active: currentStep==2}">2</view>
					</view>
					<view class="line"></view>
					<view class="dian"  @click="changeStep(3)">
						<view class="num" :class="{active: currentStep==3}">3</view>
					</view>
					<view class="line"></view>
					<view class="dian"  @click="changeStep(4)">
						<view class="num" :class="{active: currentStep==4}">4</view>
					</view>
				</view>
				<view class="step_text">
					<view class="txt">选择科目</view>
					<view class="txt">选择场地</view>
					<view class="txt">选择车辆</view>
					<view class="txt">预约时间</view>
				</view>
			</view>
			
			<step1 v-if="currentStep==1" @changeStep="changeStep"></step1>
			<step2 v-if="currentStep==2" @changeStep="changeStep"></step2>
			<step3 v-if="currentStep==3" @changeStep="changeStep"></step3>
			<step4 v-if="currentStep==4" @changeStep="changeStep"></step4>
		</view>
	</view>
</template>

<script>
	import step1 from './comp/step1'
	import step2 from './comp/step2'
	import step3 from './comp/step3'
	import step4 from './comp/step4'
	export default {
		components: { step1, step2, step3, step4 },
		data() {
			return {
				currentStep: 1
			}
		},
		methods: {
			 changeStep(num) {
				 this.currentStep = num
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.top_row {
		width: 100%;
		padding-bottom: 36rpx;
	  .step_row {
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  width: 100%;
		  padding: 0 32rpx;
		  .dian {
			  width: 180rpx;
			  height: 100rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  position: relative;
			  // background: red;
		  }
	    .num {
			width: 46rpx;
			height: 46rpx;
			background: #D1E7FE;
			line-height: 46rpx;
			border-radius: 50%;
			text-align: center;
			color: $themC;
			font-size: 24rpx;
			position: absolute;
			z-index: 9;
			&.active {
				border:2rpx solid $themC;
				&::before {
					content: '';
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					position: absolute;
					z-index: -1;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					background: rgba(255,255,255,0.6);
					filter: blur(6rpx);
				}
			}
	    }
	
	    .line {
			width: 60rpx;
			height: 4rpx;
			background: rgba(255,255,255,0.4);
	    }
	  }
	
	  .step_text {
		  display: flex;
	    .txt {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
	    }
	  }
	}
</style>