diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 42f22ec..05cbfc3 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -18,8 +18,14 @@ export default {
   methods:{
     async jumpPage(){
       const submissionData={
+        // jwcode:91000001,//有成绩的
+        // jwcode:90098888,//有成绩的
         // jwcode:90098889,//有成绩的
-        jwcode:90098892,//没有成绩的
+        // jwcode:90098890,//有成绩的
+        jwcode:90098891,//没有成绩的
+        // jwcode:90098892,//没有成绩的
+        // jwcode:90098893,//没有成绩的
+        // jwcode:90098894,//没有成绩的
       };
       localStorage.setItem('submissionData', JSON.stringify(submissionData));
       console.log('存储的数据:', localStorage.getItem('submissionData'));
@@ -73,14 +79,7 @@ div {
 }
 
 .center:hover .image {
-  transform: scale(1.2); /* 鼠标悬停时放大 */
+  transform: scale(1.2);
   filter: brightness(1.1);
 }
-/* 
-.text {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-} */
 </style>
\ No newline at end of file
diff --git a/src/views/ProblemView.vue b/src/views/ProblemView.vue
index afab833..35bf8ae 100644
--- a/src/views/ProblemView.vue
+++ b/src/views/ProblemView.vue
@@ -7,10 +7,14 @@ export default {
             showDialog: false,
             currentPage: 1,
             answers:{},
+            page:1,
         }
     },
     computed:{
         currentProblem() {
+            if (!this.problems || !this.problems.slice) {
+                return null;
+            }
             const startIndex = (this.currentPage - 1) * 2;
             return this.problems.slice(startIndex, startIndex + 2);
         },
@@ -56,6 +60,39 @@ export default {
         getAnswer(id) {
             return this.answers[id];
         },
+        rightBefore(){
+            this.page=1;
+        },
+        rightNext(){
+            this.page=2;
+        },
+        toQuestion(index){
+            this.currentPage = Math.ceil(index/2);
+        },
+        getOption(problem,option) {
+            const userAnswer = problem.userAnswer;
+            const correctAnswer = problem.correctAnswer;
+            if(userAnswer === option){
+                if(correctAnswer !== option){
+                    return 'red';
+                }
+            }
+            if (correctAnswer === option) {
+                return 'green';
+            }
+        },
+        getNumber(problem) {
+            if (!problem) return;
+            const userAnswer = problem.userAnswer;
+            const correctAnswer = problem.correctAnswer;
+
+            if (correctAnswer !== userAnswer) {
+                return 'red';
+            }
+            if (correctAnswer === userAnswer) {
+                return 'answered';
+            }
+        }
     },
     async mounted(){
         await this.problemAnswers();
@@ -73,8 +110,7 @@ export default {
             </span>
             <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
         </div>
-        <div class="popup-all" v-if="showDialog">
-            <div class="popup-top" @click="closeDialog"></div>
+        <div class="popup-all popup-background" v-if="showDialog">
             <div class="popup-content">
                 <h3>确认提示</h3>
                 <p>确定返回报告吗？</p>
@@ -85,37 +121,58 @@ export default {
             </div>
         </div>
         <div class="content">
-            <div class="question-all" v-if="currentProblem.length">
-                <div v-for="problem in currentProblem" :key="problem.id" class="question-card">
+            <div class="block"></div>
+            <div class="question-all">
+                <div v-for="problem in currentProblem" :key="problem.id" class="left-question-card">
                     <div class="question">
                         <span class="text">{{problem.question.id}}、</span>{{ problem.question.stem }}
                     </div>
                     <div class="options">
-                        <label class="option" @click="setAnswer(problem.question.id, 'A')" :class="{ 'selected': getAnswer(problem.question.id) === 'A' }">
-                            <input type="radio" :name="'answer' + problem.question.id" value="A"><span class="label">C. {{ problem.question.A }}</span>
+                        <label class="option" :class="[{ 'selected': getAnswer(problem.question.id) === 'A' }, getOption(problem, 'A')]">
+                            <input type="radio" :name="'answer' + problem.question.id" value="A"><span class="label">A. {{ problem.question.A }}</span>
                         </label>
-                        <label class="option" @click="setAnswer(problem.question.id, 'B')" :class="{ 'selected': getAnswer(problem.question.id) === 'B' }">
-                            <input type="radio" :name="'answer' + problem.question.id" value="B"><span class="label">D. {{ problem.question.B }}</span>
+                        <label class="option" :class="[{ 'selected': getAnswer(problem.question.id) === 'B' }, getOption(problem, 'B')]">
+                            <input type="radio" :name="'answer' + problem.question.id" value="B"><span class="label">B. {{ problem.question.B }}</span>
                         </label>
-                        <label class="option" @click="setAnswer(problem.question.id, 'C')" :class="{ 'selected': getAnswer(problem.question.id) === 'C' }">
-                            <input type="radio" :name="'answer' + problem.question.id" value="C"><span class="label">E. {{ problem.question.C }}</span>
+                        <label class="option" :class="[{ 'selected': getAnswer(problem.question.id) === 'C' }, getOption(problem, 'C')]">
+                            <input type="radio" :name="'answer' + problem.question.id" value="C"><span class="label">C. {{ problem.question.C }}</span>
                         </label>
-                        <label class="option" @click="setAnswer(problem.question.id, 'D')" :class="{ 'selected': getAnswer(problem.question.id) === 'D' }">
-                            <input type="radio" :name="'answer' + problem.question.id" value="D"><span class="label">F. {{ problem.question.D }}</span>
+                        <label class="option" :class="[{ 'selected': getAnswer(problem.question.id) === 'D' }, getOption(problem, 'D')]">
+                            <input type="radio" :name="'answer' + problem.question.id" value="D"><span class="label">D. {{ problem.question.D }}</span>
                         </label>
                     </div>
                 </div>
             </div>
             <div class="buttons-left">
-                <button class="before-btn" @click="before" >
+                <button class="before-btn" @click="before" :disabled="currentPage === 1">
                     ← 上一页
                 </button>
                 <span class="page">第 {{ currentPage }} 页 / 共 25 页</span>
-                <button class="next-btn" @click="next" >
+                <button class="next-btn" @click="next" :disabled="currentPage === 25">
                     下一页 →
                 </button>
             </div>
         </div>
+        <div class="right">
+            <h3>📝 题目导航</h3>
+            <div class="right-question-card" v-show="page===1">
+                <div class="question-number normal" v-for="i in 25" :key="i" @click="toQuestion(i)" :class="getNumber(problems[i - 1])"> 
+                    <span class="question-text">{{ i }}</span>
+                </div>
+            </div>
+            <div class="right-question-card" v-show="page===2">
+                <div class="question-number normal" v-for="i in 25" :key="i+25" @click="toQuestion(i+25)" :class="getNumber(problems[i + 24])"> 
+                    <span class="question-text">{{ i+25 }}</span>
+                </div>
+            </div>
+            <div class="button-right">
+                <button class="right-before-btn" @click="rightBefore">上一页</button>
+                <button class="right-next-btn" @click="rightNext">下一页</button>
+            </div>
+        </div>
+        <div class="button-right-bottom">
+            <button class="right-bottom-btn" @click="jump">退出</button>
+        </div>
     </div>
 </template>
 
@@ -146,9 +203,9 @@ export default {
     transform: scale(1.1);
 }
 .img1{
-  width: 30px;
-  height: 50px;
-  float: left;
+    width: 30px;
+    height: 50px;
+    float: left;
 }
 h1{
     margin-bottom: 10px;
@@ -171,7 +228,7 @@ p{
     align-items: center;
     z-index: 1000;
 }
-.popup-top{
+.popup-background{
     position: absolute;
     top: 0;
     left: 0;
@@ -182,48 +239,66 @@ p{
 }
 .popup-content{
     background-color: #f1f5f9;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.3);
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+    width: 90%;
+    text-align: center;
 }
 .popup-buttons{
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
 }
-.cancel-btn{
-    background-color: #f1f5f9;
-    color: #24293c;
+.cancel-btn,.confirm-btn{
     border-radius: 10px;
     border: transparent 0px ;
     margin: 5px;
-    padding: 5px 10px;
+    padding: 12px 30px;
+    font-size: 1em;
+    font-weight: bold;
+}
+.cancel-btn{
+    background: #f1f1f1;
+    color: #666;
 }
 .confirm-btn{
-    background-color: #22608b;
-    color: #f1f5f9;
-    border-radius: 10px;
-    border: transparent 0px ;
-    margin: 5px;
-    padding: 5px 10px;
+    background: #ff4757;
+    color: white;
 }
 .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;
+    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;
+}
+.block {
+    background: #38bdf8;
+    width: 90%;
+    height: 10px;
+    border-radius: 5px;
+    margin: 0 auto 30px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
 }
 .question-all{
     display: flex;
     flex-direction: column;
     gap: 30px;
 }
-.question{
+.left-question-card{
+  border: #274779 solid 2px;
+  border-radius: 10px;
+  padding: 20px 40px;
+  background-color: #2f374d;
+}
+.question {
     font-size: 1.3em;
     line-height: 1.8;
     margin-bottom: 25px;
@@ -231,48 +306,126 @@ p{
     font-weight: 500;
 }
 .options {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
 }
 .option {
-  border: #183954 solid 2px;
-  border-radius: 10px;
-  padding: 12px 15px;
+    border: #183954 solid 2px;
+    border-radius: 10px;
+    padding: 12px 15px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background-color: #374151;
+}
+.option.red{
+    background-color: #ff4757;
+}
+.option.green{
+    background-color: #10b981;
+}
+.option input {
+    margin-right: 15px;
+    width: 18px;
+    height: 18px;
+}
+.option .label {
+    font-size: 1.1em;
+    color: #e5e7eb;
+}
+.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;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  background-color: #374151;
+  gap: 5px;
 }
-.option:hover {
-  border-color: #3b82f6;
+.buttons-left:disabled,.next-btn:disabled {
   background-color: #4b5563;
+  cursor: not-allowed;
 }
-.option input {
-  margin-right: 15px;
-  width: 18px;
-  height: 18px;
-  accent-color: #3b82f6;
+.right {
+    float: right;
+    width: calc(35% - 20px);
+    border: #274779 solid 2px;
+    border-radius: 30px;
+    padding: 15px 0 15px 19px ;
+    margin-bottom: 20px;
+    background-color: #2f374d;
+    color: white;
 }
-.option .label {
-  font-size: 1.1em;
-  color: #e5e7eb;
+.right h3{
+    font-size: xx-large;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    border-bottom: 2px solid #274779;
 }
-.option.selected {
-  border-color: #3b82f6;
-  background-color: rgba(59, 130, 246, 0.2);
+.right-question-card {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 10px;
+    margin: auto 30px;
 }
-.buttons-left{
-    text-align: center;
-    margin: auto;
+.question-number {
+    width: 60px;
+    height: 50px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    cursor: pointer;
+    position: relative;
 }
-.before-btn{
-    padding: 12px 30px;
-    border: none;
+.right-question-card .question-number.red {
+    background-color: #ff4757;
+    border: 1px solid #991b1b;
+    color: white;
+}
+.question-number.normal {
+    background-color: #374151;
+    border: 1px solid #4b5563;
+    color: #e5e7eb;
+}
+
+.button-right{
+    display: flex;
+    margin: 30px 200px 5px;
+    gap: 20px;
+}
+.right-before-btn,.right-next-btn{
+    padding: 8px 15px;
     border-radius: 8px;
-    font-size: 1em;
+    border: none;
+    background-color: #3b82f6;
+    color: white;
     font-weight: bold;
-    min-width: 100px;
+    cursor: pointer;
+    margin: auto 20px;
 }
+.right-bottom-btn{
+    float: right;
+    height: 40px;
+    width: 100px;
+    border-radius: 8px;
+    background-color: #3b82f6;
+    color: white;
+    text-align: center;
+    line-height: 40px;
+    position:relative;
+    top: 350px;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/views/TextView.vue b/src/views/TextView.vue
index e8d79cb..dd1da80 100644
--- a/src/views/TextView.vue
+++ b/src/views/TextView.vue
@@ -8,8 +8,7 @@
       <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
     </div>
     
-    <div class="confirm-dialog" v-if="showDialog">
-      <div class="dialog-overlay" @click="closeDialog"></div>
+    <div class="confirm-dialog dialog-overlay" v-if="showDialog">
       <div class="dialog-content">
         <h3>确认提示</h3>
         <p>您还未提交，确定要退出吗？</p>
@@ -19,7 +18,16 @@
         </div>
       </div>
     </div>
-    
+    <div class="confirm-dialog dialog-overlay" v-if="showTeam">
+      <div class="dialog-content">
+        <h3>确认提示</h3>
+        <p>您确定要提交吗？</p>
+        <div class="dialog-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">
@@ -94,16 +102,6 @@
             </div>
           </div>
         </div>
-        <div class="team-prompt" v-if="showTeam">
-          <div class="prompt-title" @click="closeTeamPrompt">提示</div>
-            <div class="prompt-content">
-              <h3>确认提示</h3>
-              <p>您还未做题</p>
-            </div>
-          <div class="prompt-buttons">
-            <button class="confirm-btn" @click="closeDialog">确定</button>
-          </div>
-        </div>
         <div class="nav-buttons">
           <button 
             class="nav-btn prev" 
@@ -179,7 +177,7 @@
           </div>
         </div>
         
-        <button class="submit-btn" @click="submitAnswers">🚀 提交试卷</button>
+        <button class="submit-btn" @click="closeTeamPrompt">🚀 提交试卷</button>
       </div>
     </div>
   </div>
@@ -297,7 +295,13 @@ export default {
     closeTeamPrompt() {
       this.showTeam = true;
     },
-    
+    closeSubmit() {
+      this.showTeam = false;
+    },
+    // submitAnswers() {
+    //   this.showTeam = false;
+    // },
+
     // 获取题目的答案
     getAnswer(questionId) {
       return this.answers[questionId] || '';
@@ -611,7 +615,6 @@ body {
   margin-right: 15px;
   width: 18px;
   height: 18px;
-  accent-color: #3b82f6;
 }
 .option .label {
   font-size: 1.1em;
@@ -683,7 +686,6 @@ body {
 }
 .pagination-btn:disabled {
   background-color: #4b5563;
-  cursor: not-allowed;
 }
 .nav-buttons {
   display: flex;
@@ -706,10 +708,10 @@ body {
   background-color: #2563eb;
 }
 .nav-btn.prev {
-  background-color: #4b5563;
+  background-color:  #3b82f6;;
 }
 .nav-btn.prev:hover {
-  background-color: #374151;
+  background-color: #2563eb;
 }
 .nav-btn:disabled {
   background-color: #4b5563;
@@ -777,16 +779,6 @@ body {
   z-index: 1000;
 }
 
-.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 {
   position: relative;
   background: white;
@@ -798,16 +790,14 @@ body {
   text-align: center;
   z-index: 1001;
 }
-.team-prompt {
-  position: fixed;
+.dialog-overlay {
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
 }
 
 .dialog-content h3 {