zc_saas_h5/pages2/appointment/appointment_success.vue

<template>
	<view class="safeArea">
		<view style="padding: 8rpx;">
			<view class="box1">
				<view>您所报考的【XXXXX】专业</view>
				<view class="status">
					<u-icon name="checkmark-circle" color="#34C759" size="32"></u-icon><text style="margin-left: 8rpx;">考试预约成功</text>
				</view>
			</view>
			<view class="box2">
				<view class="title2">报考学员信息</view>
				<u-line color="#D6D6DB" />
				<view class="boxMain">
					<view class="list_item">
						<view class="txt_left">姓名</view>
						<view class="txt_right">倪虹洁</view>
					</view>
					<view class="list_item">
						<view class="txt_left">身份证</view>
						<view class="txt_right">44046354687236685698</view>
					</view>
					<view class="list_item">
						<view class="txt_left">考试身份</view>
						<view class="txt_right">非补考学员</view>
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="title2">考试预约信息</view>
				<u-line color="#D6D6DB" />
				<view class="boxMain">
					<view class="list_item">
						<view class="txt_left">考试标题</view>
						<view class="txt_right txt_right1">2020年二建建筑工程管理与实补考标题</view>
					</view>
					<view class="list_item">
						<view class="txt_left">报名开放时间</view>
						<view class="txt_right">2021/10/23 ~ 2021/10/29</view>
					</view>
					<view class="list_item">
						<view class="txt_left">报考专业</view>
						<view class="txt_right">XXXXX专业</view>
					</view>
					<view class="list_item">
						<view class="txt_left">考试地点</view>
						<view class="txt_right">广州市天河区燕岭路建设大厦3楼</view>
					</view>
					<view class="list_item">
						<view class="txt_left">考试时间</view>
						<view class="txt_right">2021/10/23  10:00 ~ 11:00</view>
					</view>
					<view class="list_item">
						<view class="txt_left">考前培训地点</view>
						<view class="txt_right">广州市天河区燕岭路建设大厦3楼</view>
					</view>
					<view class="list_item">
						<view class="txt_left">考前培训时间</view>
						<view class="txt_right">2021/10/23  10:00:00</view>
					</view>
					<view class="tip">*您可在“我的＞我的考试预约”中查询</view>
				</view>
			</view>
			<view style="height: 120rpx;"></view>
			<view class="foot safeArea">
				<view class="btn return">返回我的网课</view>
				<view class="btn view">查看【我的考试预约】</view>
			</view>
		</view>
	</view>
	
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
		};
	},
	onShow() {
	},
	methods: {
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style >
	::-webkit-scrollbar{
	 width: 0;
	 height: 0;
	 color: transparent
	}
	page{
		background-color: #EAEEF1;
	}
</style>
<style scoped lang="scss">
	.tip{
		font-size: 24rpx;
		color: #999999;
		height: 40rpx;
		line-height: 40rpx;
	}
	.title2{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		height: 90rpx;
		line-height: 90rpx;
		margin-left: 30rpx;
	}
	.box2{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 16rpx;
		.boxMain{
			padding: 30rpx;
		}
		.list_item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 1;
			&:not(:last-child){
				margin-bottom: 57rpx;
			}
			.txt_left{
				font-size: 24rpx;
				color: #666666;
			}
			.txt_right{
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
				width: 75%;
				text-align: right;
				&.txt_right1{
					width:370rpx;
					text-align: left;
					line-height: 1.4;
				}
			}
		}
	}
	.box1{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 15rpx;
		text-align: center;
		.status{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #34C759;
			margin: 19rpx 0;
		}
	}
	.foot{
		height: 98rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.98);
		box-sizing: unset;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			text-align: center;
		}
		.return{
			width: 264rpx;
			background: #F5F5F5;
			color: #007AFF;
		}
		.view{
			width: 374rpx;
			background: #007AFF;
			color: #FFFFFF;
			margin-left:24rpx;
		}
	}
</style>