From 86ea21b18b97113482183a9d95f78558462e9e82 Mon Sep 17 00:00:00 2001
From: chenzhen <19553350107@163.com>
Date: Sun, 16 Nov 2025 10:03:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E8=BF=9B=E8=A1=8C=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HomeView.vue |   6 +-
 src/views/TextView.vue | 840 ++++++++++++++++++++++---------------------------
 vue.config.js          |   2 +-
 3 files changed, 379 insertions(+), 469 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 5c846b1..151c516 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -21,9 +21,9 @@ export default {
         // jwcode:90098889,//有成绩的
         // jwcode:90098890,//有成绩的
         // jwcode:90098891,//有成绩的
-        jwcode:90098892,//有成绩的
+        // jwcode:90098892,//有成绩的
         // jwcode:90098893,//没有成绩的
-        // jwcode:90098894,//没有成绩的
+        jwcode:90098894,//没有成绩的
       };
       localStorage.setItem('submissionData', JSON.stringify(submissionData));
       console.log('存储的数据:', localStorage.getItem('submissionData'));
@@ -65,7 +65,7 @@ export default {
 }
 
 .image {
-  position: absolute;
+  position: fixed;
   width: 200px;
   min-height: 160px;
   max-height: 160px;
diff --git a/src/views/TextView.vue b/src/views/TextView.vue
index dd1da80..4138bb7 100644
--- a/src/views/TextView.vue
+++ b/src/views/TextView.vue
@@ -1,183 +1,183 @@
 <template>
   <div class="home">
     <div class="top">
-      <div @click="showConfirmDialog" class="ret-container">
-        <img src="../assets/return.jpg" alt="返回" class="ret">
+      <div class="img-top" @click="showConfirmDialog">
+        <img src="../assets/return.jpg" alt="返回" class="img1">
       </div>
       <h1>📈股票知识评测系统</h1>
       <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
     </div>
     
-    <div class="confirm-dialog dialog-overlay" v-if="showDialog">
-      <div class="dialog-content">
+    <div class="popup-all popup-background" v-if="showDialog">
+      <div class="popup-content">
         <h3>确认提示</h3>
         <p>您还未提交，确定要退出吗？</p>
-        <div class="dialog-buttons">
+        <div class="popup-buttons">
           <button class="cancel-btn" @click="closeDialog">取消</button>
           <button class="confirm-btn" @click="confirmExit">确定</button>
         </div>
       </div>
     </div>
-    <div class="confirm-dialog dialog-overlay" v-if="showTeam">
-      <div class="dialog-content">
+    
+    <div class="popup-all popup-background" v-if="showTeam">
+      <div class="popup-content">
         <h3>确认提示</h3>
         <p>您确定要提交吗？</p>
-        <div class="dialog-buttons">
+        <div class="popup-buttons">
           <button class="cancel-btn" @click="closeSubmit">取消</button>
           <button class="confirm-btn" @click="submitAnswers">确定</button>
         </div>
       </div>
     </div>
-    <div class="clearfix">
-      <div class="content">
-        <div class="block">
-          <div class="schedule" :style="{ width: progress + '%' }"></div>
-        </div>
-        
-        <div class="questions-container">
-          <div v-for="question in currentQuestions" :key="question.id" class="question-card">
-            <div class="question-header">
-              <div class="question">
-                <span class="text-lg font-bold mr-2">{{ question.id }}、</span>
-                {{ question.stem }}
-              </div>
-            </div>
-            <div class="options">
-              <label 
-                class="option" 
-                :class="{ 'selected': getAnswer(question.id) === 'A' }" 
-                @click="setAnswer(question.id, 'A')"
+    
+    <div class="content">
+      <div class="block">
+        <div class="schedule" :style="{ width: progress + '%' }"></div>
+      </div>
+      
+      <div class="question-all">
+        <div v-for="question in currentQuestions" :key="question.id" class="left-question-card">
+          <div class="question">
+            <span class="text">{{ question.id }}、</span>
+            {{ question.stem }}
+          </div>
+          <div class="options">
+            <label 
+              class="option" 
+              :class="{ 'selected': getAnswer(question.id) === 'A' }" 
+              @click="setAnswer(question.id, 'A')"
+            >
+              <input 
+                type="radio" 
+                :name="'answer' + question.id" 
+                value="A" 
+                :checked="getAnswer(question.id) === 'A'"
+                @change="setAnswer(question.id, 'A')"
               >
-                <input 
-                  type="radio" 
-                  :name="'answer' + question.id" 
-                  value="A" 
-                  :checked="getAnswer(question.id) === 'A'"
-                  @change="setAnswer(question.id, 'A')"
-                >
-                <span class="label">A. {{ question.A }}</span>
-              </label>
-              <label 
-                class="option" 
-                :class="{ 'selected': getAnswer(question.id) === 'B' }" 
-                @click="setAnswer(question.id, 'B')"
+              <span class="label">A. {{ question.A }}</span>
+            </label>
+            <label 
+              class="option" 
+              :class="{ 'selected': getAnswer(question.id) === 'B' }" 
+              @click="setAnswer(question.id, 'B')"
+            >
+              <input 
+                type="radio" 
+                :name="'answer' + question.id" 
+                value="B" 
+                :checked="getAnswer(question.id) === 'B'"
+                @change="setAnswer(question.id, 'B')"
               >
-                <input 
-                  type="radio" 
-                  :name="'answer' + question.id" 
-                  value="B" 
-                  :checked="getAnswer(question.id) === 'B'"
-                  @change="setAnswer(question.id, 'B')"
-                >
-                <span class="label">B. {{ question.B }}</span>
-              </label>
-              <label 
-                class="option" 
-                :class="{ 'selected': getAnswer(question.id) === 'C' }" 
-                @click="setAnswer(question.id, 'C')"
+              <span class="label">B. {{ question.B }}</span>
+            </label>
+            <label 
+              class="option" 
+              :class="{ 'selected': getAnswer(question.id) === 'C' }" 
+              @click="setAnswer(question.id, 'C')"
+            >
+              <input 
+                type="radio" 
+                :name="'answer' + question.id" 
+                value="C" 
+                :checked="getAnswer(question.id) === 'C'"
+                @change="setAnswer(question.id, 'C')"
               >
-                <input 
-                  type="radio" 
-                  :name="'answer' + question.id" 
-                  value="C" 
-                  :checked="getAnswer(question.id) === 'C'"
-                  @change="setAnswer(question.id, 'C')"
-                >
-                <span class="label">C. {{ question.C }}</span>
-              </label>
-              <label 
-                class="option" 
-                :class="{ 'selected': getAnswer(question.id) === 'D' }" 
-                @click="setAnswer(question.id, 'D')"
+              <span class="label">C. {{ question.C }}</span>
+            </label>
+            <label 
+              class="option" 
+              :class="{ 'selected': getAnswer(question.id) === 'D' }" 
+              @click="setAnswer(question.id, 'D')"
+            >
+              <input 
+                type="radio" 
+                :name="'answer' + question.id" 
+                value="D" 
+                :checked="getAnswer(question.id) === 'D'"
+                @change="setAnswer(question.id, 'D')"
               >
-                <input 
-                  type="radio" 
-                  :name="'answer' + question.id" 
-                  value="D" 
-                  :checked="getAnswer(question.id) === 'D'"
-                  @change="setAnswer(question.id, 'D')"
-                >
-                <span class="label">D. {{ question.D }}</span>
-              </label>
-            </div>
+              <span class="label">D. {{ question.D }}</span>
+            </label>
           </div>
         </div>
-        <div class="nav-buttons">
-          <button 
-            class="nav-btn prev" 
-            @click="prevPage" 
-            :disabled="currentPage === 1"
-          >
-            ← 上一页
-          </button>
-          <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
-          <button 
-            class="nav-btn next" 
-            @click="nextPage" 
-            :disabled="currentPage === totalPages"
-          >
-            下一页 →
-          </button>
-        </div>
       </div>
       
-      <div class="right">
-        <div class="time-module">
-          <div class="countdown">⏰ {{ countdown }}</div>
+      <div class="buttons-left">
+        <button 
+          class="before-btn" 
+          @click="before" 
+          :disabled="currentPage === 1"
+        >
+          ← 上一页
+        </button>
+        <span class="page">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
+        <button 
+          class="next-btn" 
+          @click="next" 
+          :disabled="currentPage === totalPages"
+        >
+          下一页 →
+        </button>
+      </div>
+    </div>
+    
+    <div class="right">
+      <h3>⏰ 倒计时</h3>
+      <div class="time-module">
+        <div class="countdown">{{ countdown }}</div>
+      </div>
+      
+      <h3>📝 题目导航</h3>
+      <div class="right-question-card" v-show="page === 1">
+        <div 
+          class="question-number normal" 
+          :class="getQuestionStatusClass(i)"
+          @click="goToPageByQuestion(i)"
+          v-for="i in 25" 
+          :key="i"
+        >
+          <span class="question-text">{{ i }}</span>
         </div>
-        
-        <div class="question-nav">
-          <h3>📝 题目导航</h3>
-          <div class="question-grid" v-show="page === 1">
-            <div 
-              class="question-number" 
-              :class="getQuestionStatusClass(i)"
-              @click="goToPageByQuestion(i)"
-              v-for="i in 25" 
-              :key="i"
-            >
-              <span class="question-text">{{ i }}</span>
-            </div>
-          </div>
-          <div class="question-grid" v-show="page === 2">
-            <div 
-              class="question-number" 
-              :class="getQuestionStatusClass(i + 25)"
-              @click="goToPageByQuestion(i + 25)"
-              v-for="i in 25" 
-              :key="i + 25"
-            >
-              <span class="question-text">{{ i + 25 }}</span>
-            </div>
-          </div>
-          
-          <div class="pagination">
-            <button 
-              class="pagination-btn" 
-              @click="changeNavPage(1)" 
-              :class="{ active: page === 1 }"
-            >
-              上一页
-            </button>
-            <button 
-              class="pagination-btn" 
-              @click="changeNavPage(2)" 
-              :class="{ active: page === 2 }"
-            >
-              下一页
-            </button>
-          </div>
+      </div>
+      <div class="right-question-card" v-show="page === 2">
+        <div 
+          class="question-number normal" 
+          :class="getQuestionStatusClass(i + 25)"
+          @click="goToPageByQuestion(i + 25)"
+          v-for="i in 25" 
+          :key="i + 25"
+        >
+          <span class="question-text">{{ i + 25 }}</span>
         </div>
-        
-        <div class="statistics">
-          <h3>📊 答题统计</h3>
-          <div class="statistics-item">
-            <span class="statistics-label">答题进度:</span>
-            <span class="statistics-value">{{ answeredCount }}/{{ totalQuestions }}</span>
-          </div>
+      </div>
+      
+      <div class="button-right">
+        <button 
+          class="right-before-btn" 
+          @click="changeNavPage(1)" 
+          :class="{ active: page === 1 }"
+        >
+          上一页
+        </button>
+        <button 
+          class="right-next-btn" 
+          @click="changeNavPage(2)" 
+          :class="{ active: page === 2 }"
+        >
+          下一页
+        </button>
+      </div>
+      
+      <h3>📊 答题统计</h3>
+      <div class="statistics">
+        <div class="statistics-item">
+          <span class="statistics-label">答题进度:</span>
+          <span class="statistics-value">{{ answeredCount }}/{{ totalQuestions }}</span>
         </div>
-        
-        <button class="submit-btn" @click="closeTeamPrompt">🚀 提交试卷</button>
+      </div>
+      
+      <div class="button-right-bottom">
+        <button class="right-bottom-btn" @click="closeTeamPrompt">🚀 提交试卷</button>
       </div>
     </div>
   </div>
@@ -189,17 +189,17 @@ export default {
   name: 'TextView',
   data() {
     return {
-      questions: [], // 从后端获取的题目
+      questions: [],
       currentPage: 1,
       page: 1,
-      questionsPerPage: 2, // 每页显示2个题目
+      questionsPerPage: 2,
       answers: {},
       startTime: new Date(),
       countdownMinutes: 30,
       countdown: '',
       timer: null,
       isSubmitted: false,
-      totalQuestions: 50, // 后端固定50题
+      totalQuestions: 50,
       questionStates: {},
       showDialog: false,
       showTeam: false,
@@ -211,7 +211,6 @@ export default {
     }
   },
   computed: {
-    // 当前页显示的两个题目
     currentQuestions() {
       const startIndex = (this.currentPage - 1) * this.questionsPerPage;
       return [
@@ -233,13 +232,11 @@ export default {
     progress() {
       return this.completionRate;
     },
-    // 当前显示的题目ID
     currentQuestionIds() {
       return this.currentQuestions.map(q => q ? q.id : null).filter(Boolean);
     }
   },
   methods: {
-    // 从后端获取题目
     async fetchQuestions() {
       try {
         const response = await axios.post('http://192.168.40.41:8000/api/knowledge/questions');
@@ -249,70 +246,35 @@ export default {
       }
     },
     
-    // 默认题目数据（备用）- 生成50个题目
-    getDefaultQuestions() {
-      // 这里创建一个示例数组，您可以根据实际需要替换为真实数据
-      const defaultQuestions = [];
-      
-      for (let i = 1; i <= 50; i++) {
-        defaultQuestions.push({
-          id: i,
-          stem: `这是第${i}个股票知识测试题目`,
-          A: `选项A - 第${i}题`,
-          B: `选项B - 第${i}题`,
-          C: `选项C - 第${i}题`,
-          D: `选项D - 第${i}题`
-        });
-      }
-      
-      return defaultQuestions;
-    },
-    
-    // 获取题目在当前试卷中的序号
-    getQuestionIndex(questionId) {
-      // 查找题目在questions数组中的位置并返回序号
-      const index = this.questions.findIndex(q => q.id === questionId);
-      return index !== -1 ? index + 1 : questionId;
-    },
-    
-    // 显示确认弹框
     showConfirmDialog() {
       this.showDialog = true;
     },
     
-    // 关闭弹框
     closeDialog() {
       this.showDialog = false;
     },
     
-    // 确认退出
     confirmExit() {
       this.showDialog = false;
-      // 跳转到首页
       this.$router.push('/');
     },
-    //显示警告弹框
+    
     closeTeamPrompt() {
       this.showTeam = true;
     },
+    
     closeSubmit() {
       this.showTeam = false;
     },
-    // submitAnswers() {
-    //   this.showTeam = false;
-    // },
-
-    // 获取题目的答案
+    
     getAnswer(questionId) {
       return this.answers[questionId] || '';
     },
     
-    // 设置题目的答案
     setAnswer(questionId, answer) {
       this.$set(this.answers, questionId, answer);
     },
     
-    // 获取题目状态样式
     getQuestionStatusClass(questionNumber) {
       const isCurrent = this.currentQuestionIds.includes(questionNumber);
       const isAnswered = !!this.answers[questionNumber];
@@ -326,46 +288,42 @@ export default {
       }
     },
     
-    // 修改导航页面切换方法
     changeNavPage(newPage) {
       this.page = newPage;
     },
     
-    // 修改题目页面切换方法
     changePage(newPage) {
       if (newPage >= 1 && newPage <= this.totalPages) {
         this.currentPage = newPage;
-        
-        // 自动更新导航页（每25题一页）
         const startQuestion = (newPage - 1) * this.questionsPerPage + 1;
         this.page = Math.ceil(startQuestion / 25);
       }
     },
     
-    // 修改通过题目跳转的方法
     goToPageByQuestion(questionNumber) {
       const page = Math.ceil(questionNumber / this.questionsPerPage);
       this.changePage(page);
-      
-      // 自动切换到对应的导航页
       this.page = Math.ceil(questionNumber / 25);
     },
     
-    // 上一页
-    prevPage() {
+    before() {
       if (this.currentPage > 1) {
         this.currentPage--;
       }
+      if(this.currentPage < 13){
+        this.page=1;
+      }
     },
     
-    // 下一页
-    nextPage() {
-      if (this.currentPage < this.totalPages) {
+    next() {
+      if (this.currentPage < 25) {
         this.currentPage++;
       }
+      if(this.currentPage > 13){
+        this.page=2;
+      }
     },
     
-    // 更新倒计时
     updateCountdown() {
       const now = new Date();
       const elapsedMinutes = (now - this.startTime) / (1000 * 60);
@@ -376,35 +334,30 @@ export default {
       
       this.countdown = `${minutes}:${seconds}`;
       
-      // 如果倒计时结束，自动提交试卷
       if (remainingMinutes <= 0 && !this.isSubmitted) {
         this.isSubmitted = true;
         this.submitAnswers();
       }
     },
-    // 提交答案到后端
+    
     async submitAnswers() {
       try {
         if (Object.keys(this.answers).length === 0) {
           this.showTeam=false;
           return;
         }
-        // 将答案格式转换为要求的格式
         const formattedAnswers = Object.keys(this.answers).map(questionId => ({
           questionId: parseInt(questionId),
           userAnswer: this.answers[questionId]
         }));
         const savedData = JSON.parse(localStorage.getItem('submissionData'));
-        console.log('第一个，存储的数据:', localStorage.getItem('submissionData'));
         const submission = {
           jwcode: savedData.jwcode,
           answers: formattedAnswers
         };
-        console.log(submission);
-        // 调用后端提交接口
+        
         const response = await axios.post('http://192.168.40.41:8000/api/knowledge/submit', submission);
-        console.log(submission);
-        // 跳转到结果页面
+        
         this.$router.push({
           name: 'ResultView',
           query: {
@@ -420,7 +373,6 @@ export default {
       }
     },
     
-    // 获取已用时间
     getTimeUsed() {
       const now = new Date();
       const elapsedMinutes = (now - this.startTime) / (1000 * 60);
@@ -428,10 +380,7 @@ export default {
     }
   },
   async mounted() {
-    // 从后端获取题目
     await this.fetchQuestions();
-    
-    // 设置定时器，每秒更新一次倒计时
     this.timer = setInterval(() => {
       this.updateCountdown();
     }, 1000);
@@ -445,109 +394,122 @@ export default {
 </script>
 
 <style scoped>
-.questions-container {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.home {
+  min-height: 100vh;
+  width: 100%;
+  background-color: #24293c;
+  overflow: auto;
+  padding: 10px;
 }
-.ret{
+
+.top {
+  background: #0c4a6e;
+  color: white;
+  padding: 30px;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.img-top {
+  float: left;
+  cursor: pointer;
+}
+
+.img-top:hover {
+  transform: scale(1.1);
+}
+
+.img1 {
   width: 30px;
   height: 50px;
   float: left;
 }
-.page-info {
-  color: #e5e7eb;
-  font-weight: bold;
-  padding: 0 20px;
+
+h1 {
+  margin-bottom: 10px;
+  background: none;
+  font-size: 2.2em;
 }
 
-.question-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
-  margin: auto 30px;
+p {
+  font-size: 1.2em;
+  margin-bottom: 10px;
+  background: none;
 }
 
-.question-number {
-  width: 60px;
-  height: 50px;
-  border-radius: 8px;
+.popup-all {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
-  align-items: center;
   justify-content: center;
-  font-weight: bold;
-  cursor: pointer;
-  position: relative;
+  align-items: center;
+  z-index: 1000;
 }
 
-.question-number.normal {
-  background-color: #374151;
-  border: 1px solid #4b5563;
-  color: #e5e7eb;
+.popup-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 125%;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
 }
 
-.question-number.answered {
-  background-color: #10b981;
-  border: 1px solid #059669;
-  color: white;
+.popup-content {
+  background-color: #f1f5f9;
+  padding: 30px;
+  border-radius: 15px;
+  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+  width: 90%;
+  text-align: center;
 }
 
-.question-number.current {
-  background-color: #3b82f6;
-  border: 2px solid #2563eb;
-  color: white;
-  transform: scale(1.1);
+.popup-buttons {
+  margin-top: 20px;
+  justify-content: center;
 }
 
-.question-number:hover {
-  transform: scale(1.05);
+.cancel-btn, .confirm-btn {
+  border-radius: 10px;
+  border: transparent 0px ;
+  margin: 5px;
+  padding: 12px 30px;
+  font-size: 1em;
+  font-weight: bold;
 }
 
-.question-text {
-  z-index: 1;
+.cancel-btn {
+  background: #f1f1f1;
+  color: #666;
 }
 
-.pagination-btn.active {
-  background-color: #2563eb;
-  transform: scale(1.05);
+.confirm-btn {
+  background: #ff4757;
+  color: white;
 }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-body {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f5f7fa;
-}
-.home {
-  min-height: 100vh;
-  width: 100%;
-  background-color: #24293c;
-  overflow: auto;
-  padding: 20px;
-}
-.top {
-  background: linear-gradient(135deg, #0c4a6e 100%);
-  color: white;
-  padding: 30px;
-  margin-bottom: 30px;
+.content {
+  float: left;
+  width: calc(65% - 20px);
+  min-height: 920px;
+  border: #274779 solid 2px;
   border-radius: 10px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-  position: relative;
-  overflow: hidden;
-}
-.top h1 {
-  font-size: 2.2em;
-  margin-bottom: 10px;
-  background: none;
-}
-.top p {
-  font-size: 1.1em;
-  opacity: 0.9;
-  background: none;
+  color: #f1f5f9;
+  padding: 20px 40px 50px;
+  margin-right: 20px;
+  background-color: #2a3147;
 }
+
 .block {
   background: rgba(139, 141, 145, 0.7);
   width: 90%;
@@ -558,6 +520,7 @@ body {
   position: relative;
   box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
 }
+
 .schedule {
   background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%);
   height: 100%;
@@ -565,26 +528,20 @@ body {
   transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   position: relative;
 }
-.content {
-  float: left;
-  width: calc(65% - 20px);
-  min-height: 920px;
-  border: #274779 solid 2px;
-  border-radius: 10px;
-  color: #f1f5f9;
-  padding: 20px 40px 50px;
-  margin-right: 20px;
-  background-color: #2a3147;
+
+.question-all {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
 }
-.question-card {
+
+.left-question-card {
   border: #274779 solid 2px;
   border-radius: 10px;
   padding: 20px 40px;
   background-color: #2f374d;
 }
-.question-header {
-  margin-bottom: 20px;
-}
+
 .question {
   font-size: 1.3em;
   line-height: 1.8;
@@ -592,11 +549,13 @@ body {
   color: #f1f5f9;
   font-weight: 500;
 }
+
 .options {
   display: flex;
   flex-direction: column;
   gap: 15px;
 }
+
 .option {
   border: #183954 solid 2px;
   border-radius: 10px;
@@ -607,116 +566,157 @@ body {
   transition: all 0.3s ease;
   background-color: #374151;
 }
+
 .option:hover {
   border-color: #3b82f6;
   background-color: #4b5563;
 }
+
 .option input {
   margin-right: 15px;
   width: 18px;
   height: 18px;
 }
+
 .option .label {
   font-size: 1.1em;
   color: #e5e7eb;
 }
+
 .option.selected {
   border-color: #3b82f6;
   background-color: rgba(59, 130, 246, 0.2);
 }
+
+.buttons-left {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 30px;
+}
+
+.before-btn, .next-btn {
+  padding: 10px 20px;
+  border-radius: 8px;
+  border: none;
+  background-color: #3b82f6;
+  color: white;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.before-btn:hover, .next-btn:hover {
+  background-color: #2563eb;
+}
+
+.before-btn:disabled, .next-btn:disabled {
+  background-color: #4b5563;
+  cursor: not-allowed;
+}
+
 .right {
   float: right;
   width: calc(35% - 20px);
-  color: #f1f5f9;
-  padding: 20px;
-}
-.time-module {
-  border: #274779 solid 2px;
-  border-radius: 30px;
-  padding: 15px;
-  margin-bottom: 20px;
-  background-color: #2f374d;
-}
-.question-nav {
   border: #274779 solid 2px;
   border-radius: 30px;
   padding: 15px 0 15px 19px ;
   margin-bottom: 20px;
   background-color: #2f374d;
+  color: white;
 }
-.statistics {
-  height: 150px;
-  border: #274779 solid 2px;
-  border-radius: 30px;
-  padding: 15px;
-  margin-bottom: 20px;
-  background-color: #2f374d;
-}
-.time-module h3, .question-nav h3, .statistics h3 {
-  margin-bottom: 15px;
-  color: #f1f5f9;
+
+.right h3 {
   font-size: 1.2em;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
   border-bottom: 2px solid #274779;
-  padding-bottom: 10px;
 }
+
+.time-module {
+  margin-bottom: 20px;
+}
+
 .countdown {
   font-size: 1.5em;
   color: #f59e0b;
   text-align: center;
+  margin-bottom: 20px;
 }
-.pagination {
-  display: flex;
-  /* justify-content: center; */
-  margin: 30px 148px 5px;
-  gap: 20px;
+
+.right-question-card {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+  margin: auto 30px;
 }
-.pagination-btn {
-  padding: 8px 15px;
+
+.question-number {
+  width: 60px;
+  height: 50px;
   border-radius: 8px;
-  border: none;
-  background-color: #3b82f6;
-  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-weight: bold;
   cursor: pointer;
-  transition: all 0.3s ease;
-  margin: auto 20px;
+  position: relative;
 }
-.pagination-btn:hover {
-  background-color: #2563eb;
+
+.question-number.normal {
+  background-color: #374151;
+  border: 1px solid #4b5563;
+  color: #e5e7eb;
 }
-.pagination-btn:disabled {
-  background-color: #4b5563;
+
+.question-number.answered {
+  background-color: #10b981;
+  border: 1px solid #059669;
+  color: white;
 }
-.nav-buttons {
+
+.question-number.current {
+  background-color: #3b82f6;
+  border: 2px solid #2563eb;
+  color: white;
+  transform: scale(1.1);
+}
+
+.question-number:hover {
+  transform: scale(1.05);
+}
+
+.button-right {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 30px;
+  margin: 30px 180px 5px;
+  gap: 20px;
 }
-.nav-btn {
-  padding: 10px 20px;
+
+.right-before-btn, .right-next-btn {
+  padding: 8px 15px;
   border-radius: 8px;
   border: none;
   background-color: #3b82f6;
   color: white;
   font-weight: bold;
-  display: flex;
-  align-items: center;
-  gap: 5px;
+  cursor: pointer;
+  margin: auto 20px;
 }
-.nav-btn:hover {
+
+.right-before-btn:hover, .right-next-btn:hover {
   background-color: #2563eb;
 }
-.nav-btn.prev {
-  background-color:  #3b82f6;;
-}
-.nav-btn.prev:hover {
+
+.right-before-btn.active, .right-next-btn.active {
   background-color: #2563eb;
+  transform: scale(1.05);
 }
-.nav-btn:disabled {
-  background-color: #4b5563;
-  cursor: not-allowed;
+
+.statistics {
+  margin-bottom: 20px;
 }
+
 .statistics-item {
   display: flex;
   font-size: larger;
@@ -726,126 +726,36 @@ body {
   padding-bottom: 2px;
   border-bottom: 2px solid #274779;
 }
+
 .statistics-label {
   color: #e5e7eb;
 }
+
 .statistics-value {
   font-weight: bold;
   color: #3b82f6;
 }
-.submit-btn {
-  width: 100%;
-  padding: 15px;
-  border-radius: 10px;
-  border: none;
-  background-color: #10b981;
-  color: white;
-  font-size: 1.2em;
-  font-weight: bold;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  margin-top: 20px;
-  display: block;
-  text-align: center;
-  text-decoration: none;
-}
-.submit-btn:hover {
-  background-color: #059669;
-}
-.clearfix::after {
-  content: "";
-  clear: both;
-  display: table;
-}
 
-.ret-container {
-  float: left;
-  cursor: pointer;
-  transition: transform 0.3s ease;
+.button-right-bottom {
+  margin-top: 20px;
 }
 
-.ret-container:hover {
-  transform: scale(1.1);
-}
-.confirm-dialog {
-  position: fixed;
-  top: 0;
-  left: 0;
+.right-bottom-btn {
   width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.dialog-content {
-  position: relative;
-  background: white;
-  padding: 30px;
-  border-radius: 15px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-  max-width: 400px;
-  width: 90%;
+  height: 40px;
+  border-radius: 8px;
+  background-color: #10b981;
+  color: white;
   text-align: center;
-  z-index: 1001;
-}
-.dialog-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(5px);
-}
-
-.dialog-content h3 {
-  color: #333;
-  margin-bottom: 15px;
-  font-size: 1.4em;
-}
-
-.dialog-content p {
-  color: #666;
-  margin-bottom: 25px;
-  font-size: 1.1em;
-  line-height: 1.5;
-}
-
-.dialog-buttons {
-  display: flex;
-  gap: 15px;
-  justify-content: center;
-}
-
-.cancel-btn, .confirm-btn {
-  padding: 12px 30px;
+  line-height: 40px;
   border: none;
-  border-radius: 8px;
-  font-size: 1em;
+  font-size: 1.2em;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.3s ease;
-  min-width: 100px;
 }
 
-.cancel-btn {
-  background: #f1f1f1;
-  color: #666;
-}
-
-.cancel-btn:hover {
-  background: #e0e0e0;
-}
-
-.confirm-btn {
-  background: #ff4757;
-  color: white;
-}
-
-.confirm-btn:hover {
-  background: #ff3742;
-  transform: translateY(-2px);
+.right-bottom-btn:hover {
+  background-color: #059669;
 }
 </style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 099f448..7c0d1ff 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -9,7 +9,7 @@ module.exports = defineConfig({
     proxy: {
       // 代理所有以 /api 开头的请求
       '/api': {
-        target: 'http://192.168.40.41:8000', // 你的后端地址
+        target: 'http://192.168.40.48:8081', // 你的后端地址
         changeOrigin: true, // 允许跨域
         pathRewrite: {
           '^/api': '' // 重写路径，去掉 /api 前缀