JiangxiMiniProgram/pages/tabbar/learnCar/comp/subject2.vue

<template>
	<view class="comp">
		<!-- 学习内容 -->
		<view class="learnCon">
			<view class="h1">学习内容</view>
			<view class="card">
				<view class="flex-b">
					<view class="lab">实操训练</view>
					<view class="btn">去预约</view>
				</view>
			</view>
			<view class="card mb0">
				<view class="flex-b">
					<view class="lab">考场模拟训练</view>
					<view class="btn disable">去预约</view>
				</view>
			</view>
		</view>
		<!-- 学习状态 -->
		<view class="learnStatus">
			<view class="flex-b">
				<view class="h1">学习状态</view>
				<view class="more">
					<view class="txt">查看全部</view>
					<view class="moreIcon">
						<u-icon name="arrow-right" color="#686B73" size="12"></u-icon>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="flex-b">
					<view class="lab">科目二考试成绩已通过</view>
					<view class="date">2023/08/09 22:52:12</view>
				</view>
				<view class="flex-b bg">
					<view class="row">
						<view class="text">考试成绩：100分</view>
						<view class="btn" @click.stop="$goPage('/pages/carEntry/evaluate/evaluate?subject=2')">去评价</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="flex-b">
					<view class="lab">科目二考试预约成功</view>
					<view class="date">2023/08/09 22:52:12</view>
				</view>
				<view class="bg">
					<view class="row">
						<view class="text">考试场地：某某科目二考场</view>
					</view>
					<view class="row">
						<view class="text">考试时间：2023/08/23 10:00:00</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="flex-b">
					<view class="lab">科目二学习进度已通过</view>
					<view class="date">2023/07/24 03:12:20</view>
				</view>
				<view class="flex-b bg">
					<view class="row">
						<view class="text">前往“12123”APP预约考试</view>
						<view class="btn">去预约</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="flex-b">
					<view class="lab">科目二模拟训练已预约</view>
					<view class="date">2023/07/24 03:12:20</view>
				</view>
				<view class="bg">
					<view class="row">
						<view class="text">预约科目：科目二</view>
					</view>
					<view class="row">
						<view class="text">预约考场：某某考场</view>
					</view>
					<view class="row">
						<view class="text">车辆编号：2号车（浙A99988）</view>
					</view>
					<view class="row">
						<view class="text">预约时间：2023/08/16 14:00</view>
					</view>
					<view class="row">
						<view class="text">核销时间：2023/08/16 14:00</view>
					</view>
				</view>
				<view class="cancel" @click="show=true">取消预约</view>
			</view>
		</view>
		<u-popup :show="show"  mode="center" :round="20" @>
			<cancelReservation @popupBtnClick="show=false"/>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './comp.scss';
</style>