<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>