JiangxiMiniProgram/pages/carEntry/examineAppointment/comp/step3.vue

<template>
	<view class="step1">
		
		<pickDateTimer/>
		
		<view class="btn_row">
			<view class="border btn" @click="changeStep(3)">返回上一步</view>
			<view class="btn" @click="show=true">确认预约</view>
		</view>
		
		<u-popup :show="show" mode="center" :round="8">
			<view class="popupCon">
				<view class="h2">再次确认预约信息</view>
				<view class="content">
					<view class="row">
						<view class="lab">预约类型</view>
						<view class="val">xxx</view>
					</view>
					<view class="row">
						<view class="lab">预约科目</view>
						<view class="val">xxx</view>
					</view>
					<view class="row">
						<view class="lab">预约考场</view>
						<view class="val">2023/08/08 08:00—9:00</view>
					</view>
					<view class="row">
						<view class="lab">预约车型</view>
						<view class="val">xxx</view>
					</view>
					<view class="row">
						<view class="lab">预约车辆</view>
						<view class="val">xxx</view>
					</view>
					<view class="row">
						<view class="lab">预约时间</view>
						<view class="val">2023/08/08 08:00—9:00</view>
					</view>
				</view>
				<view class="btn_row">
					<view class="border btn" @click="show = false">返回修改</view>
					<view class="btn">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				show: false
			}
		},
		methods: {
			changeStep(val) {
				this.$emit('changeStep', val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 100%;
		overflow: hidden;
	  .dateBox {
		  padding: 36rpx 0 40rpx 0;
	    .month-row {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 36rpx;
	      .month {
			font-size: 32rpx;
			color: $themC;
	      }
	
	      .arrow {
	       margin-left: 6rpx;
	      }
	    }
	
	    .date_row {
			width: 100%;
			height: 100rpx;
			position: relative;
	      .icon {
			width: 40rpx;
			height: 40rpx;
			background: rgba(51,51,51,0.18);
			backdrop-filter: blur(4rpx);
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			&.left {
				left: 16rpx;
			}
			&.right {
				right: 16rpx;
			}
	      }
	    }
	  }
	}
	
	.popupCon {
			padding: 30rpx 50rpx;
		
			.h2 {
				font-weight: 600;
				color: #333333;
				line-height: 70rpx;
				font-size: 36rpx;
				text-align: center;
			}
		
			.content {
				padding-bottom: 20rpx;
		
				.row {
					padding: 22rpx 0;
					display: flex;
					font-size: 28rpx;
					align-items: center;
		
					.lab {
						width: 180rpx;
						color: #686B73;
		
					}
		
					.val {
						flex: 1;
						font-weight: 500;
					}
				}
			}
		}
		
	.btn_row {
		display: flex;
		justify-content: space-between;
	
		.btn {
			width: 47%;
			height: 72rpx;
			background: #1989FA;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
	
			&.border {
				background: rgba(25, 137, 250, 0.1);
				border: 2rpx solid $themC;
				color: $themC;
			}
		}
	}
</style>