单选和成绩公布

src/router/index.ts

@@ -22,6 +22,11 @@ const routerList: any = [
       }
     ],
   },
+  {
+    path: '/subjectTest', // 题目测试页面
+    name: 'SubjectTest',
+    component: () => import('@/views/subjectTest/index.vue'),
+  },
   {
     path: '/login',
     name: 'Login',

src/views/resultsAnnounced/index.vue

@@ -0,0 +1,231 @@
+<template>
+    <div class="container">
+         <div class="top">总分</div>
+         <div class="header">
+            <img
+            v-if="score >= 60"
+            class="pattern"
+             src="@/assets/images/bg8.png"
+             />
+             <img
+             v-else
+            class="pattern"
+             src="@/assets/images/bg9.png"
+             />
+             <img
+            class="patternBig"
+             src="@/assets/images/bg8.png"
+             v-if="score >= 80"
+             />
+             <img
+             v-else
+            class="patternBig"
+             src="@/assets/images/bg9.png"
+             />
+             <img
+             v-if="score >= 100"
+            class="pattern"
+             src="@/assets/images/bg8.png"
+             />
+             <img
+             v-else
+            class="pattern"
+             src="@/assets/images/bg9.png"
+             />
+         </div>
+         <div class="mainContent">
+            <div class="up">{{score}}分</div>
+            <div class="down">SCORE</div>
+        </div>
+         <div class="bottoms">
+         <div class="bottom">
+            <img src="@/assets/images/bg10.png"/>
+            <div class="txt">
+            {{0}}题
+            </div>
+         </div>
+         <div class="bottom">
+            <img src="@/assets/images/bg11.png"/>
+            <div class="txt">
+            {{ formattedTime  }}
+            </div>
+         </div><div class="bottom">
+            <img src="@/assets/images/bg12.png"/>
+            <div class="txt">
+            100
+            </div>
+         </div>
+        </div>
+         <div class="footer">
+            <button class="btn1">去学习</button>
+            <button class="btn2" @click="Recreate">重做</button>
+            <button class="btn3" @click="Back">回首页</button>
+         </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import {ref,defineProps,defineEmits  } from 'vue'
+import { useRouter } from 'vue-router';
+
+
+// 定义 Props
+const Props = defineProps({
+  score: Number,
+  formattedTime :String
+});
+
+// 定义自定义事件
+const emit = defineEmits(['recreate']);
+//重做按钮
+const Recreate=()=>{
+    // 触发自定义事件，通知父组件
+    emit('recreate');
+}
+
+//回首页
+const router = useRouter();
+const Back =()=>{
+    router.push('/'); // 返回首页
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 600px;
+  height: 540px;
+  background: url("@/assets/images/bg4.png") no-repeat center center;
+  background-size: contain;
+  padding-top: 15px;
+  padding-left: 25px;
+  padding-right:25px;
+}
+.top{
+    color: #b6b3b3;
+    font-size: 18px;
+    text-align: center;
+}
+.header{
+    height: 140px;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    padding-left: 90px;
+    padding-right: 70px;
+}
+.header{
+    height: 140px;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    padding-left: 90px;
+    padding-right: 70px;
+}
+.pattern{
+    width: 100px;
+    height: 100px;
+    margin-top: 35px;
+}
+.patternBig{
+    width: 120px;
+    height: 120px;
+    margin-top: 5px;
+}
+
+.mainContent{
+    display: flex;
+    flex-direction: column; /* 垂直排列 */
+    align-items: center;    /*水平居中 */
+    margin-top: 25px;
+}
+.up{
+    color: #fff;
+    font-size: 45px;
+}
+.down{
+    color: rgb(165, 129, 45);
+    font-size: 17px;
+    font-weight: bold; /* 字母加粗 */
+    margin-top: 15px;
+}
+.bottoms{
+    display: flex;
+    height: 28px;
+    width: 100%;
+    position: absolute; /* 绝对定位 */
+    bottom: 200px;
+    gap: 90px;
+    left: 110px;
+}
+.bottom{
+    display: flex;
+    flex-direction: row;
+}
+.txt{
+    color: #b8b5b5;
+    font-size: 15px;
+    margin-left: 8px;
+    margin-top: 8px;
+}
+.footer{
+    width: 560px;
+    height: 160px;
+    position: absolute; /* 绝对定位 */
+    bottom: 0; /* 置于底部 */
+    display: flex;
+    flex-direction: row;
+    padding-left: 50px;
+    gap: 50px;
+}
+.btn1{
+    background: url("@/assets/images/bg5.png") no-repeat;
+    background-size: contain;
+    background-color: transparent; /* 背景颜色设置为透明 */
+    border: none; /* 移除边框 */
+    cursor: pointer; /* 鼠标悬停时显示手型 */
+    width: 120px;
+    height: auto;
+    font-size: 17px;
+    color:rgb(13, 58, 102);
+    /* 调整文字位置 */
+    padding: 10px 0 20px; /* 上内边距为 10px，下内边距为 20px */
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: flex-end; /* 文字对齐到底部 */
+    justify-content: center; /* 文字水平居中 */
+}
+.btn2{
+    background: url("@/assets/images/bg6.png") no-repeat;
+    background-size: contain;
+    background-color: transparent; /* 背景颜色设置为透明 */
+    border: none; /* 移除边框 */
+    cursor: pointer; /* 鼠标悬停时显示手型 */
+    width: 120px;
+    height: auto;
+    font-size: 17px;
+    color:rgb(13, 58, 102);
+    /* 调整文字位置 */
+    padding: 10px 0 20px; /* 上内边距为 10px，下内边距为 20px */
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: flex-end; /* 文字对齐到底部 */
+    justify-content: center; /* 文字水平居中 */
+}
+.btn3{
+    background: url("@/assets/images/bg7.png") no-repeat;
+    background-size: contain;
+    background-color: transparent; /* 背景颜色设置为透明 */
+    border: none; /* 移除边框 */
+    cursor: pointer; /* 鼠标悬停时显示手型 */
+    width: 120px;
+    height: auto;
+    font-size: 17px;
+    color:rgb(13, 58, 102);
+    /* 调整文字位置 */
+    padding: 10px 0 20px; /* 上内边距为 10px，下内边距为 20px */
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: flex-end; /* 文字对齐到底部 */
+    justify-content: center; /* 文字水平居中 */
+}
+</style>

src/views/subjectTest/index.vue

@@ -0,0 +1,365 @@
+<template>
+    <div class="container-bgc">
+        <div class="top">
+            <div class="title">{{ setting.title }}</div>
+        </div>
+        <!-- 右边箭头 -->
+        <button class="submit-right" @click="SubRight"></button>
+        <!-- 左边按钮 -->
+        <button class="submit-left" @click="SubLeft"></button>
+        <div class="question-body">
+            <div class="question" >
+                第<span class="question-count" >{{ currentSum }}</span>题
+                <div class="timer">{{ formattedTime  }} 秒</div>
+            </div>
+            <p class="questions">共<span class="questions-count">10</span>题</p>
+            <!-- 遍历题目 -->
+            <div v-if="currentQuestionIndex < questions.length" class="txt">
+                <span>{{ currentQuestion.question }}</span>
+            </div>
+            <!-- 遍历选项 -->
+            <div class="options">
+                <button
+                v-for="option in currentQuestion.options"
+                :key="option.option"
+                :class="{ option: true, selected: selectedOption[currentQuestionIndex] === option.option }"
+                @click="selectOption(option.option)"
+                class="option"
+                >
+                    <span class="option-letter">{{ option.option }}</span>
+                    {{ option.content  }}
+                </button>
+            </div>
+            
+        </div>
+        <div class="submit-buttons">
+        <button class="submit-btn" @click="resetAnswers">退出答题</button>
+        <button class="submit-btn" @click="submitAnswers">提交成绩</button>
+        </div>
+        <el-dialog
+        v-model="isVisible" :close-on-click-modal="false" :show-close="false">
+        <resultsAnnounced  :score = "score" :formattedTime ="formattedTime "@recreate="handleRecreate"/>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import resultsAnnounced from '@/views/resultsAnnounced/index.vue'
+import settingStore from "@/store/modules/setting";
+import { ref,computed,onMounted, onUnmounted} from "vue"
+import { ElMessage } from 'element-plus'
+    const setting = settingStore();
+    //左箭头
+    const SubLeft =()=>{
+        console.log(currentQuestionIndex.value)
+        if(currentQuestionIndex.value >= 1){
+            currentQuestionIndex.value = currentQuestionIndex.value - 1
+        }else{
+            ElMessage.warning('无法上翻')
+        }
+    }
+    //右箭头
+    const SubRight =()=>{
+        // 如果答对了，进入下一题
+        if (selectedOption.value[currentQuestionIndex.value] === currentQuestion.value.correctAnswer) {
+            if(currentSum.value < questions.length){
+                setTimeout(() => {
+                    currentQuestionIndex.value++; // 更新到下一题
+                    }, 200); // 延迟0.2秒进入下一题
+            }
+            else{
+                ElMessage.success('答题已完成，请提交')
+            }
+        }
+        else{
+            if(selectedOption.value[currentQuestionIndex.value] == null){
+                ElMessage.warning('请先答题')
+            }else{
+                ElMessage.error('回答错误')
+            }
+        }
+    }
+    const questions = [
+        {
+            //题目
+            question: "根据基尔霍夫电压定律（KVL），下列说法正确的是：",
+            //选项
+            options: [
+                { option: "A", content: "在任一瞬时，沿任一闭合回路各段电压的代数和为零。" },
+                { option: "B", content: "在任一瞬时，沿任一闭合回路各段电压的代数和不为零。" },
+                { option: "C", content: "在任一瞬时，沿任一闭合回路各段电压的代数和为正。" },
+                { option: "D", content: "在任一瞬时，沿任一闭合回路各段电压的代数和为负。" }
+            ],
+            correctAnswer: "A" // 正确答案
+        },
+        {
+            question: "根据欧姆定律，下列说法正确的是：",
+            options: [
+                { option: "A", content: "电流与电压成反比，与电阻成正比。" },
+                { option: "B", content: "电流与电压成正比，与电阻成反比。" },
+                { option: "C", content: "电流与电压和电阻无关。" },
+                { option: "D", content: "电流与电压成正比，与电阻成正比。" }
+            ],
+            correctAnswer: "B" // 正确答案
+        },
+        {
+            question: "在电路分析中，欧姆定律是一个基本而重要的原理，它描述了电流、电压和电阻之间的关系。根据欧姆定律，通过导体的电流与导体两端的电压成正比，与导体的电阻成反比。请根据这一定律，选择下列哪个选项最准确地描述了这一关系？此外，考虑到实际应用中，导体的电阻可能会受到温度、材料和几何尺寸等因素的影响，这些因素如何改变电流与电压和电阻之间的关系？",
+            options: [
+                { option: "A", content: "电流与电压成正比，与电阻成正比。" },
+                { option: "B", content: "电流与电压成正比，与电阻成反比。" },
+                { option: "C", content: "电流与电压成反比，与电阻无关。" },
+                { option: "D", content: "电流与电压和电阻均无关，仅受外部磁场影响。" }
+            ],
+            correctAnswer: "C" // 正确答案
+            }
+    ];
+    // 当前题目的索引
+    const currentQuestionIndex = ref(0);
+    //计算当前题目的序号（从1开始）
+    const currentSum = computed(() => currentQuestionIndex.value + 1);
+    // 当前题目
+    const currentQuestion = computed(() => questions[currentQuestionIndex.value]);
+    // 当前选中的按钮索引
+    const selectedOption = ref<string[]>(Array(questions.length).fill(null)); // 初始化数组，默认值为 null
+    //选中逻辑
+    const selectOption = (option: string) => {
+        selectedOption.value[currentQuestionIndex.value] = option; // 更新当前题目的选中选项
+        console.log(selectedOption.value);
+    };
+    
+    const score = ref(0); // 初始化分数为0
+    const isVisible = ref (false)     //成绩公布页的显示与否
+    // 提交成绩按钮
+    const submitAnswers = () => {
+        console.log(selectedOption.value[currentQuestionIndex.value])
+        //答完全部题才能提交成绩
+        if(selectedOption.value[questions.length - 1] == null){
+            ElMessage.warning('请先完成答题')
+        }else{
+            if (selectedOption.value[currentQuestionIndex.value] !== currentQuestion.value.correctAnswer){
+                ElMessage.error('回答错误')
+            }else{
+                stopTimer(); // 停止计时
+                score.value = 0;    // 重置分数
+                isVisible.value = true;
+                for (let i = 0; i < questions.length; i++) {
+                    // 如果当前题目的选中选项与正确答案一致，则加10分
+                    if (selectedOption.value[i] === questions[i].correctAnswer) {
+                        score.value += 10;
+                    }
+                }
+            }
+        }
+    };
+    // 退出答题
+    const resetAnswers = () => {
+        
+        isVisible.value = false;
+    };
+    // 计时器相关变量
+    const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值
+    const elapsedTime = ref(0); // 已经过去的时间（单位：秒）
+
+    // 计算属性：将秒数转换为“分：秒”格式
+    const formattedTime = computed(() => {
+        const minutes = Math.floor(elapsedTime.value / 60); // 计算分钟数
+        const seconds = elapsedTime.value % 60; // 计算剩余秒数
+        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    });
+
+    // 开始计时
+    const startTimer = () => {
+        timer.value = setInterval(() => {
+            elapsedTime.value += 1; // 每秒增加 1
+        }, 1000);
+    };
+
+    // 停止计时
+    const stopTimer = () => {
+        if (timer.value) {
+            clearInterval(timer.value);
+            timer.value = null;
+        }
+    };
+    // 页面加载时开始计时
+    onMounted(() => {startTimer();});
+
+    // 页面卸载时停止计时（防止内存泄漏）
+    onUnmounted(() => {stopTimer();});
+
+    // 处理子组件触发的重做事件
+    const handleRecreate = () => {
+        console.log(timer.value,"子组件触发了重做事件");
+        isVisible.value = false; // 隐藏子组件
+        selectedOption.value = Array(questions.length).fill(null); // 重置所有选中结果
+        currentQuestionIndex.value = 0; // 重置到第一题
+        stopTimer()//计时器清零
+        elapsedTime.value = 0
+        startTimer()
+    };
+    
+</script>
+
+<style lang="scss" scoped>
+.container-bgc {
+    position: relative;
+    width: 100%;
+    // height: 1000px;
+    min-height: 100vh;
+    // background-color: #091d22;
+    background: url("@/assets/images/bg3.png") no-repeat;
+    background-size: cover;
+
+    .submit-right{
+        background: url("@/assets/images/right.png") no-repeat;
+        background-size: contain;
+        width: 60px; /* 按钮宽度 */
+        height: 60px; /* 按钮高度 */
+        border: none;
+        cursor: pointer;
+        position: absolute;
+        right: 0; /* 紧靠右部 */
+        top: 40%; /* 垂直居中*/
+    }
+    .submit-left{
+        background: url("@/assets/images/left.png") no-repeat;
+        background-size: contain;
+        width: 60px; /* 按钮宽度 */
+        height: 60px; /* 按钮高度 */
+        border: none;
+        cursor: pointer;
+        position: absolute;
+        left: 0; /* 紧靠左部 */
+        top: 40%; /* 垂直居中*/
+    }
+
+    .top {
+        width: 100%;
+        height: 75px;
+        text-align: center;
+        font-size: 42px;
+        line-height: 75px;
+        font-style: italic;
+        background: url("@/assets/images/topbgc.png") no-repeat;
+        background-size: cover;
+
+        .title {
+            color: #fff;
+        }
+    }
+
+    .question-body {
+        background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; /* 添加 background-position */
+        background-size: contain; /* 确保背景图片覆盖整个元素 */
+        width: 1100px; /* 100% 宽度以确保背景图片完全显示 */
+        height: 500px; /* 固定高度 */
+        margin-top: 100px;
+        margin-left: auto;
+        margin-right: auto;
+        padding-left: 50px;
+        padding-right: 50px;
+        padding-top: 30px;
+
+    .question{
+        font-size: 42px; /* 字体大小 */
+        text-align: center; /* 水平居中 */
+        letter-spacing: 3px; /* 字符间距，单位可以是 px、em 等 */
+        // margin-top: 50px;
+        color: #fff;
+    }
+    .question-count {
+        font-weight: bold; /* 数字加粗 */
+        color: rgb(165, 144, 95); /* 数字颜色为红色 */
+        font-size: 55px; /* 数字字体大小 */
+    }
+    .timer{
+        font-size: 20px; /* 字体大小 */
+        letter-spacing: 3px; /* 字符间距 */
+        text-align: right;
+        position: absolute; /* 使用绝对定位 */
+        top: 24.5%; /* 距离顶部 50% */
+        left: 71%; /* 距离左侧 50% */
+    }
+    .questions{
+        font-size: 23px; /* 字体大小 */
+        letter-spacing: 3px; /* 字符间距 */
+        text-align: right;
+        color: #fff;
+    }
+    .questions-count {
+        font-weight: bold; /* 数字加粗 */
+        color: rgb(165, 144, 95); /* 数字颜色为红色 */
+        font-size: 25px; /* 数字字体大小 */
+    }
+    .txt {
+            margin-top: 18px;
+            font-size: 18px; /* 字体大小 */
+            font-family: Consolas, sans-serif; /* 字体样式 */
+            letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */
+            line-height: 1.5; /* 行间距，1.5 表示字体大小的 1.5 倍 */
+            color: #9b9a9a;
+        }
+    /* 选项容器样式 */
+    .options {
+        margin-top: 10px;
+        color: #9b9a9a;
+        display: flex; /* 使用 Flexbox 布局 */
+        flex-direction: column; /* 垂直排列按钮 */
+    }
+
+    /* 单个选项样式 */
+    .option {
+        padding: 5px 10px; /* 内边距，让按钮看起来更舒适 */
+        font-size: 18px; /* 字体大小 */
+        letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */
+        text-align: left; /* 设置文字左对齐 */
+        margin-top: 5px;
+        background-color: transparent; /* 背景颜色设置为透明 */
+        border: none; /* 移除边框 */
+        cursor: pointer; /* 鼠标悬停时显示手型 */
+        transition: background-color 0.3s ease; /* 平滑过渡效果 */
+    }
+    .option:hover {
+        color: #e7e2e2; /* 鼠标悬停时的字体颜色 */
+    }
+    .option.selected{
+        color: #d4cb48; /* 按钮按下或获得焦点时的背景颜色 */ 
+    }
+    .option-letter{
+        font-size: 30px;
+        font-weight: bold; /* 字母加粗 */
+        margin-right: 5px; /* 字母与后面文字的间距 */
+        color: rgb(165, 144, 95);
+    }
+    }
+    .submit-buttons {
+        display: flex; /* 使用 Flexbox 布局 */
+        flex-direction: row; /* 水平排列按钮 */
+        justify-content: center; /* 水平居中 */
+        gap: 450px; /* 按钮之间的间距 */
+        margin-top: 50px;
+    }
+
+    .submit-btn {
+        background: url("@/assets/images/Button.png") center;
+        background-size: contain; /* 确保背景图片覆盖整个元素 */
+        background-color: transparent; /* 背景颜色设置为透明 */
+        border: none; /* 移除边框 */
+        cursor: pointer; /* 鼠标悬停时显示手型 */
+        width: 300px;
+        height: 41px;     
+        font-size: 17px;
+        font-weight: bold; /* 文字加粗 */
+        color: #fff;
+    }
+    /* 覆盖 el-dialog 的背景和边框样式 */
+    :deep(.el-dialog){
+        background: transparent !important; /* 设置背景为透明 */
+        border: none !important; /* 移除边框 */
+        box-shadow: none !important; /* 移除阴影 */
+        overflow: hidden; /* 防止内容溢出 */
+        width: 640px;
+
+    }
+}
+</style>