91 lines
3.5 KiB
Vue
91 lines
3.5 KiB
Vue
<template>
|
||
<div class="min-h-screen flex flex-col bg-gray-50">
|
||
<!-- 顶部标题栏 -->
|
||
<header class="bg-primary text-white py-4 px-6 shadow-md">
|
||
<div class="container mx-auto">
|
||
<h1 class="text-2xl font-bold text-center flex items-center justify-center gap-2">
|
||
<FontAwesomeIcon icon="fa-solid fa-user-graduate" /> 考试系统 - 考生首页
|
||
</h1>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 中间内容区 -->
|
||
<main class="flex-grow flex items-center justify-center p-6">
|
||
<div class="container mx-auto">
|
||
<div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden border-2 border-primary/20">
|
||
<div class="p-8">
|
||
<div class="flex items-center justify-center mb-6">
|
||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-3">
|
||
<FontAwesomeIcon icon="fa-solid fa-file-question" class="text-primary" />
|
||
</div>
|
||
<h2 class="text-xl font-semibold text-gray-800">考试须知</h2>
|
||
</div>
|
||
<div class="prose max-w-none mb-6 bg-gray-50 p-4 rounded-lg border border-gray-100">
|
||
<ol class="list-decimal pl-5 space-y-3 text-gray-600">
|
||
<li class="flex items-start gap-2">
|
||
<span class="text-primary font-medium">•</span>
|
||
<span>请确保网络连接稳定，避免考试过程中断网。</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<span class="text-primary font-medium">•</span>
|
||
<span>考试时间为60分钟，超时系统将自动提交。</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<span class="text-primary font-medium">•</span>
|
||
<span>请独立完成考试，严禁作弊行为。</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<span class="text-primary font-medium">•</span>
|
||
<span>考试过程中请勿刷新页面，否则可能导致答案丢失。</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<span class="text-primary font-medium">•</span>
|
||
<span>遇到技术问题，请及时联系监考老师。</span>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<div class="flex justify-center mt-6">
|
||
<el-button type="primary" size="large" @click="startExam" class="flex items-center justify-center gap-2 w-full md:w-auto">
|
||
<FontAwesomeIcon icon="fa-solid fa-calendar-check" /> 开始考试
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 底部页脚 -->
|
||
<footer class="bg-gray-800 text-white py-4 px-6 text-center text-sm">
|
||
<div class="container mx-auto">
|
||
<p>© 2023 考试系统. 版权所有. 版本 v1.0.0</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useRouter } from 'vue-router'
|
||
import { ElButton } from 'element-plus'
|
||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||
|
||
const router = useRouter()
|
||
|
||
const startExam = () => {
|
||
// 这里可以添加开始考试的逻辑
|
||
alert('即将开始考试！')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 使用Bootstrap样式并自定义 */
|
||
@import 'bootstrap/dist/css/bootstrap.min.css';
|
||
|
||
/* 自定义样式 */
|
||
.bg-primary {
|
||
background-color: var(--primary-color) !important;
|
||
}
|
||
|
||
.text-primary {
|
||
color: var(--primary-color) !important;
|
||
}
|
||
</style> |