questionbankvue3/pages/exercises/beforeExam/beforeExam.vue

<template>
	<view class="content" id="beforeExam">
		<view class="topBg">
			<view class="backIcon" @click="goBack">
				<image src="@/static/images/backIcon.png" mode="aspectFill"></image>
			</view>
			<view class="txt">驾驶人科目一考试系统</view>
		</view>
		
		<view class="con">
			<view class="conBg flex">
				<view class="box">
					<view class="h6">考试须知</view>
					<view class="text">
						<view class="txt">1.遵守考场纪律，服从监考人员指挥。</view>
						<view class="txt">2.进入考场、手机关机。禁止抽烟，禁止吃零食。</view>
						<view class="txt">3.未经工作人员允许，考生禁止随意出入考场。</view>
						<view class="txt">4.考场内禁止大声喧哗，禁止随意走动。</view>
						<view class="txt">5.考试中认真答题，不准交头接耳。</view>
						<view class="txt">6.考试中不准冒名顶替，不准弄虚作假。</view>
						<view class="txt">7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。</view>
						<view class="txt">8.爱护公物及考试设备。</view>
					</view>
				</view>
				<view class="box">
					<view class="h6">理论考试01号考台</view>
					<view class="redt">身份证号：123456789123456789</view>
					<view class="redt">考生姓名：驾考学员</view>
					<view class="btn" @click="$goPage('/pages/exercises/exam/exam')">开始考试</view>
					<view class="redt">点击“确认”按钮开始考试!</view>
					<view class="text">操作提示：每题考试答案确定后，点击【下一题】，电脑立即判定所选答案，如选择错误，系统将提示正确答案提示后不允许修改答案。</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { detectOrient } from '@/utils/utils.js'
	import { ref, onMounted, nextTick } from 'vue'
	
	onMounted(()=>{
		detectOrient('#beforeExam')
	})
	
	function goBack() {
		console.log('返回吧')
		uni.navigateBack()
	}
	
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	#beforeExam {
	  .topBg {
		  width: 100%;
		  height: 146rpx;
		  background: url('../../../static/images/beforeExamebg.png') no-repeat;
		  background-size: 100% 100%;
		  position: relative;
	    .backIcon {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 40rpx;
			height: 40rpx;
	    }
	
	    .txt {
			font-weight: 500;
			font-size: 48rpx;
			color: #4298F3;
			text-stroke: 2rpx #FFFFFF;
			font-style: italic;
			-webkit-text-stroke: 2rpx #FFFFFF;
			text-align: center;
			line-height: 146rpx;
	    }
	  }
	.con {
		padding: 30rpx;
	}
	  .conBg {
		  background: #F7FBFE;
		  border-radius: 12rpx;
		  border: 1rpx solid #F0F0F0;
	    .box {
			flex: 1;
			padding: 40rpx;
			&:last-child {
				border-left: 1px solid #F0F0F0;
			}
	      .h6 {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 24rpx;
	      }
		  .redt {
			  font-size: 28rpx;
			  color: #FA2C2C;
			  margin-bottom: 28rpx;
		  }
		.btn {
			width: 300rpx;
			height: 60rpx;
			background: #3776FF;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			margin: 30rpx auto;
		}
	      .text {
			  font-size: 22rpx;
			  color: #666;
	        .txt {
				font-size: 24rpx;
				color: #333;
				margin: 4rpx 0;
	        }
	      }
	    }
	  }
	}
</style>