JiangxiMiniProgram/pages/carEntry/operaAppointment/operaAppointment.vue

<template>
	<view class="pageBgImg">
		<topNavbar :title="title"></topNavbar>
		<view class="pad" style="padding-bottom: 60rpx;">
			<coachInfo/>
			<view class="h1">预约时间</view>
			<pickDateTimer/>
			<view class="h1">教练车</view>
			<view class="card">
				<view class="car">
					<view class="carTag">赣A98299学</view>
				</view>
			</view>
			<view class="h1">训练场地</view>
			<view class="card" >
				<view class="site">
					<view class="leftTxt">
						<view class="adrs">某某场地</view>
						<view class="adrsTxt">江西省江西市江西区尚坤丁兰国际1190</view>
					</view>
					<view class="icon">
						<image src="@/static/images/car/btn_daohang.png" mode=""></image>
						<!-- <image src="@/static/images/car/btn_daohang_cli.png" mode=""></image> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import coachInfo from './comp/coachInfo'
	import step2 from './comp/step2'
	import step3 from './comp/step3'
	import step4 from './comp/step4'
	export default {
		components: { coachInfo, step2, step3, step4 },
		data() {
			return {
				currentStep: 2,
				subject: 2,
				title: '实操训练预约'
			}
		},
		onLoad(options) {
			this.subject = options.subject
			if(this.subject==2) {
				this.title = '实操训练科目二预约'
				this.currentStep = 2
			}else if(this.subject==3) {
				this.title = '实操训练科目三预约'
				this.currentStep = 2
			}
		},
		methods: {
			 changeStep(num) {
				 this.currentStep = num
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.h1 {
		line-height: 100rpx;
	}
	.car {
		padding: 32rpx 28rpx;
		.carTag {
			height: 120rpx;
			background: #F8F8F8;
			padding: 0 18rpx;
			color: $themC;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: 500;
			width: fit-content;
			line-height: 120rpx;
		}
	}
	.site {
		padding: 28rpx 40rpx 28rpx 36rpx;
		display: flex;
		align-items: center;
		.leftTxt {
			width: 0;
			flex: 1;
			color: $themC;
			.adrs {
				font-size: 32rpx;
				font-weight: 550;
				margin-bottom: 10rpx;
			}
			.adrsTxt {
				font-size: 28rpx;
				font-weight: 400;
			}
		}
		.icon {
			width: 72rpx;
			height: 72rpx;
		}
	}
</style>