src/views/largeDataScreen/home.vue

@@ -514,7 +514,7 @@
         <el-progress
           :text-inside="true"
           :stroke-width="20"
-          :percentage="100"
+          :percentage="80"
           style="margin-bottom: 25px"
         />
         <p class="name">复制新文件</p>
@@ -525,7 +525,7 @@
         <el-progress
           :text-inside="true"
           :stroke-width="20"
-          :percentage="100"
+          :percentage="80"
           style="margin-bottom: 25px"
         />
         <p class="name">复制新文件</p>

src/views/subjectTest/index.vue

@@ -10,7 +10,7 @@
         <div class="question-body">
             <div class="question" >
                 第<span class="question-count" >{{ currentSum }}</span>题
-                <!-- <div class="timer">{{ formattedTime  }} 秒</div> -->
+                <div class="timer">{{ formattedTime  }} 秒</div>
             </div>
             <p class="questions">共<span class="questions-count">{{questions.length}}</span>题</p>
             <!-- 遍历题目 -->
@@ -19,17 +19,13 @@
             </div>
             <!-- 遍历选项 -->
             <div class="options">
-                <button v-for="option in xnOptionsList" :key="option.id"
+                <button
-                    :class="['option', {
+                v-for="option in xnOptionsList"
-                        // 'selected': option.hasOwnProperty('isChecked') ? option.isChecked : 
+                :key="option.id"
-                        // selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid == option.id
+                :class="['option', { 'selected': selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid == option.id }]"
-                        // 'selected': option.isChecked || (selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid === option.id)
+                @click="selectOption(option.id)"
-                        'selected': 
+                class="option"
-                            complete == true 
+                >
-                              ? option.isChecked 
-                              : (selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid === option.id)
-                    }]"
-                    @click="selectOption(option.id)" class="option">
                     <span class="option-letter">{{ option.optionName }}</span>
                     {{ option.optionText  }}
                 </button>
@@ -38,9 +34,10 @@
         </div>
         <div class="submit-buttons">
         <button class="submit-btn" @click="resetAnswers">退出答题</button>
-            <button class="submit-btn" @click="submitAnswers" v-if="complete === false">提交成绩</button>
+        <button class="submit-btn" @click="submitAnswers">提交成绩</button>
         </div>
-        <el-dialog v-model="isVisible" :close-on-click-modal="false" :show-close="false">
+        <el-dialog
+        v-model="isVisible" :close-on-click-modal="false" :show-close="false">
         <resultsAnnounced  :score = "score" :formattedTime ="formattedTime "@recreate="handleRecreate"/>
         </el-dialog>
     </div>
@@ -65,9 +62,9 @@ const SubLeft = () => {
     }
     //右箭头
     const SubRight = async()=>{
-    console.log(complete.value,'11111111')
+        
-    if(complete.value == false){
         const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]);
+        // answer.value = res.result;
         console.log(selectedOption.value);
         console.log(res,'res')
         // 如果答对了，进入下一题
@@ -86,15 +83,6 @@ const SubRight = async () => {
                 ElMessage.error('回答错误')
             }
         }
-    }else{
-        if (currentSum.value < questions.value.length) {
-                currentQuestionIndex.value++; // 更新到下一题
-            }
-            else {
-                ElMessage.warning('无法下翻')
-            }
-    }
-    
     }
     const questions = ref<any[]>([]);
     const currentList = async ()=>{
@@ -129,8 +117,9 @@ const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.le
 
     //选中逻辑
     const selectOption = (option:any) => {
-    if (complete.value == false) {
+        
         if (questions.value.length > 0) {
+
             const currentQuestion = questions.value[currentQuestionIndex.value];
             selectedOption.value[currentQuestionIndex.value]= {
                 oid: option,
@@ -139,15 +128,10 @@ const selectOption = (option: any) => {
             console.log(selectedOption.value[currentQuestionIndex.value].oid,option);
         }
     }
-}
     const score = ref(0); // 初始化分数为0
     const isVisible = ref (false)     //成绩公布页的显示与否
-const complete = ref<boolean>(Boolean(localStorage.getItem("complete")));    //点击提交按钮后控制答题回显
-
-
     // 提交成绩按钮
     const submitAnswers = async() => {
-    
         console.log(selectedOption.value[currentQuestionIndex.value])
         //答完全部题才能提交成绩
         if(selectedOption.value[questions.value.length - 1] == null){
@@ -160,8 +144,13 @@ const submitAnswers = async () => {
                 stopTimer(); // 停止计时
                 score.value = 100;    // 重置分数
                 isVisible.value = true;
-            localStorage.setItem("complete", "true");;
+                // for (let i = 0; i < questions.value.length; i++) {
-            // const display = complete.value
+                //     // 如果当前题目的选中选项与正确答案一致，则加10分
+                //     if (res.result == "success") {
+                //         // score.value += 10;
+                //         score.value == 100
+                //     }
+                // }
             }
         }
     };
@@ -210,7 +199,6 @@ const handleRecreate = () => {
         stopTimer()//计时器清零
         elapsedTime.value = 0
         startTimer()
-    localStorage.setItem("complete", "false");
     };
     
 </script>
@@ -228,33 +216,24 @@ const handleRecreate = () => {
     .submit-right{
         background: url("@/assets/images/right.png") no-repeat;
         background-size: contain;
-        width: 60px;
+        width: 60px; /* 按钮宽度 */
-        /* 按钮宽度 */
+        height: 60px; /* 按钮高度 */
-        height: 60px;
-        /* 按钮高度 */
         border: none;
         cursor: pointer;
         position: absolute;
-        right: 0;
+        right: 0; /* 紧靠右部 */
-        /* 紧靠右部 */
+        top: 40%; /* 垂直居中*/
-        top: 40%;
-        /* 垂直居中*/
     }
-
     .submit-left{
         background: url("@/assets/images/left.png") no-repeat;
         background-size: contain;
-        width: 60px;
+        width: 60px; /* 按钮宽度 */
-        /* 按钮宽度 */
+        height: 60px; /* 按钮高度 */
-        height: 60px;
-        /* 按钮高度 */
         border: none;
         cursor: pointer;
         position: absolute;
-        left: 0;
+        left: 0; /* 紧靠左部 */
-        /* 紧靠左部 */
+        top: 40%; /* 垂直居中*/
-        top: 40%;
-        /* 垂直居中*/
     }
 
     .top {
@@ -273,14 +252,10 @@ const handleRecreate = () => {
     }
 
     .question-body {
-        background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center;
+        background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; /* 添加 background-position */
-        /* 添加 background-position */
+        background-size: contain; /* 确保背景图片覆盖整个元素 */
-        background-size: contain;
+        width: 1100px; /* 100% 宽度以确保背景图片完全显示 */
-        /* 确保背景图片覆盖整个元素 */
+        height: 500px; /* 固定高度 */
-        width: 1100px;
-        /* 100% 宽度以确保背景图片完全显示 */
-        height: 500px;
-        /* 固定高度 */
         margin-top: 100px;
         margin-left: auto;
         margin-right: auto;
@@ -289,161 +264,103 @@ const handleRecreate = () => {
         padding-top: 30px;
 
     .question{
-            font-size: 42px;
+        font-size: 42px; /* 字体大小 */
-            /* 字体大小 */
+        text-align: center; /* 水平居中 */
-            text-align: center;
+        letter-spacing: 3px; /* 字符间距，单位可以是 px、em 等 */
-            /* 水平居中 */
-            letter-spacing: 3px;
-            /* 字符间距，单位可以是 px、em 等 */
         // margin-top: 50px;
         color: #fff;
     }
-
     .question-count {
-            font-weight: bold;
+        font-weight: bold; /* 数字加粗 */
-            /* 数字加粗 */
+        color: rgb(165, 144, 95); /* 数字颜色为红色 */
-            color: rgb(165, 144, 95);
+        font-size: 55px; /* 数字字体大小 */
-            /* 数字颜色为红色 */
-            font-size: 55px;
-            /* 数字字体大小 */
     }
-
     .timer{
-            font-size: 18px;
+        font-size: 18px; /* 字体大小 */
-            /* 字体大小 */
+        letter-spacing: 3px; /* 字符间距 */
-            letter-spacing: 3px;
-            /* 字符间距 */
         text-align: right;
-            position: absolute;
+        position: absolute; /* 使用绝对定位 */
-            /* 使用绝对定位 */
+        top: 25%; /* 距离顶部 */
-            top: 25%;
+        left: 71.3%; /* 距离左侧 */
-            /* 距离顶部 */
-            left: 71.3%;
-            /* 距离左侧 */
     }
-
     .questions{
-            font-size: 23px;
+        font-size: 23px; /* 字体大小 */
-            /* 字体大小 */
+        letter-spacing: 3px; /* 字符间距 */
-            letter-spacing: 3px;
-            /* 字符间距 */
         text-align: right;
         color: #fff;
     }
-
     .questions-count {
-            font-weight: bold;
+        font-weight: bold; /* 数字加粗 */
-            /* 数字加粗 */
+        color: rgb(165, 144, 95); /* 数字颜色为红色 */
-            color: rgb(165, 144, 95);
+        font-size: 25px; /* 数字字体大小 */
-            /* 数字颜色为红色 */
-            font-size: 25px;
-            /* 数字字体大小 */
     }
-
     .txt {
-            margin-top: 15px;
+            margin-top: 18px;
-            font-size: 20px;
+            font-size: 22px; /* 字体大小 */
-            /* 字体大小 */
+            font-family: Consolas, sans-serif; /* 字体样式 */
-            font-family: Consolas, sans-serif;
+            letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */
-            /* 字体样式 */
+            line-height: 1.5; /* 行间距，1.5 表示字体大小的 1.5 倍 */
-            letter-spacing: 1.5px;
-            /* 字符间距，单位可以是 px、em 等 */
-            line-height: 1.5;
-            /* 行间距，1.5 表示字体大小的 1.5 倍 */
             color: #9b9a9a;
         }
-
     /* 选项容器样式 */
     .options {
         margin-top: 10px;
         color: #9b9a9a;
-            display: flex;
+        display: flex; /* 使用 Flexbox 布局 */
-            /* 使用 Flexbox 布局 */
+        flex-direction: column; /* 垂直排列按钮 */
-            flex-direction: column;
-            /* 垂直排列按钮 */
     }
 
     /* 单个选项样式 */
     .option {
-            padding: 5px 10px;
+        padding: 5px 10px; /* 内边距，让按钮看起来更舒适 */
-            /* 内边距，让按钮看起来更舒适 */
+        font-size: 20px; /* 字体大小 */
-            font-size: 19px;
+        letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */
-            /* 字体大小 */
+        text-align: left; /* 设置文字左对齐 */
-            letter-spacing: 1.5px;
-            /* 字符间距，单位可以是 px、em 等 */
-            text-align: left;
-            /* 设置文字左对齐 */
         margin-top: 5px;
-            background-color: transparent;
+        background-color: transparent; /* 背景颜色设置为透明 */
-            /* 背景颜色设置为透明 */
+        border: none; /* 移除边框 */
-            border: none;
+        cursor: pointer; /* 鼠标悬停时显示手型 */
-            /* 移除边框 */
+        transition: background-color 0.3s ease; /* 平滑过渡效果 */
-            cursor: pointer;
-            /* 鼠标悬停时显示手型 */
-            transition: background-color 0.3s ease;
-            /* 平滑过渡效果 */
     }
-
     .option:hover {
-            color: #e7e2e2;
+        color: #e7e2e2; /* 鼠标悬停时的字体颜色 */
-            /* 鼠标悬停时的字体颜色 */
     }
-
     .option.selected{
-            color: #d4cb48;
+        color: #d4cb48; /* 按钮按下或获得焦点时的背景颜色 */ 
-            /* 按钮按下或获得焦点时的背景颜色 */
     }
-
     .option-letter{
         font-size: 30px;
-            font-weight: bold;
+        font-weight: bold; /* 字母加粗 */
-            /* 字母加粗 */
+        margin-right: 5px; /* 字母与后面文字的间距 */
-            margin-right: 5px;
-            /* 字母与后面文字的间距 */
         color: rgb(165, 144, 95);
     }
     }
-
     .submit-buttons {
-        display: flex;
+        display: flex; /* 使用 Flexbox 布局 */
-        /* 使用 Flexbox 布局 */
+        flex-direction: row; /* 水平排列按钮 */
-        flex-direction: row;
+        justify-content: center; /* 水平居中 */
-        /* 水平排列按钮 */
+        gap: 450px; /* 按钮之间的间距 */
-        justify-content: center;
-        /* 水平居中 */
-        gap: 450px;
-        /* 按钮之间的间距 */
         margin-top: 50px;
     }
 
     .submit-btn {
         background: url("@/assets/images/Button.png") center;
-        background-size: contain;
+        background-size: contain; /* 确保背景图片覆盖整个元素 */
-        /* 确保背景图片覆盖整个元素 */
+        background-color: transparent; /* 背景颜色设置为透明 */
-        background-color: transparent;
+        border: none; /* 移除边框 */
-        /* 背景颜色设置为透明 */
+        cursor: pointer; /* 鼠标悬停时显示手型 */
-        border: none;
-        /* 移除边框 */
-        cursor: pointer;
-        /* 鼠标悬停时显示手型 */
         width: 300px;
         height: 41px;     
         font-size: 18px;
-        font-weight: bold;
+        font-weight: bold; /* 文字加粗 */
-        /* 文字加粗 */
         color: #fff;
     }
-
     /* 覆盖 el-dialog 的背景和边框样式 */
     :deep(.el-dialog){
-        background: transparent !important;
+        background: transparent !important; /* 设置背景为透明 */
-        /* 设置背景为透明 */
+        border: none !important; /* 移除边框 */
-        border: none !important;
+        box-shadow: none !important; /* 移除阴影 */
-        /* 移除边框 */
+        overflow: hidden; /* 防止内容溢出 */
-        box-shadow: none !important;
-        /* 移除阴影 */
-        overflow: hidden;
-        /* 防止内容溢出 */
         width: 640px;
 
     }