搞搞搞搞这么多都没用

src/views/AnswerDesc.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="answer-desc">
+    <div class="type">
+      {{ questionInfo.questionType }}
+    </div>
+    <p class="question">
+      {{ questionInfo.question }}
+    </p>
+    <div class="answer">
+      正确答案：{{ rightAnswersForShow }}
+    </div>
+    <p class="desc">
+      {{ questionInfo.descText }}
+    </p>
+  </div>
+</template>
+
+<script>
+const alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+
+export default {
+  computed: {
+    ...globalMapState([
+      'questionInfo',
+    ]),
+    rightAnswersForShow() {
+      return this.questionInfo.rightOptionIdx.map((idx) => {
+        return alphabet[idx]
+      }).join('')
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.answer-desc {
+  flex: 1 0 1px;
+  width: calc(100% - 170px * 2);
+  margin-top: 10px;
+  overflow: auto;
+  > .type {
+    font-size: 24px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #8F4831;
+  }
+  > p.question {
+    margin-top: 10px;
+    font-size: 20px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #693D2F;
+  }
+  > .answer {
+    margin-top: 14px;
+    font-size: 20px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #693D2F;
+    line-height: 25px;
+  }
+  > p.desc {
+    margin-top: 10px;
+    font-size: 20px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #693D2F;
+    line-height: 25px;
+  }
+}
+</style>

src/views/QuestionJudge.vue

@@ -16,28 +16,74 @@
       <h1>知识问答</h1>
     </div>
     <QuestionPending
-      v-if="!isShowDesc"
+      v-show="!isShowDesc"
       ref="question-pending"
       :is-submitted="isSubmitted"
       @submit="onSubmit"
     />
+    <AnswerDesc
+      v-show="isShowDesc"
+    />
     <button
-      v-if="!isSubmitted && (questionInfo?.questionType === '多选题' || questionInfo.questionType === '连线题')"
+      v-show="!isSubmitted && (questionInfo?.questionType === '多选题' || questionInfo.questionType === '连线题')"
       class="submit"
       @click="onSubmit"
     >
       提交答案
     </button>
+    <div
+      v-show="!isShowDesc && isSubmitted && $refs['question-pending']?.isCorrect"
+      class="button-wrapper-correct"
+    >
+      <button
+        class="watch-desc"
+        @click="onClickWatchDesc"
+      >
+        答案解析
+      </button>
+      <button class="next">
+        下一题（2）
+      </button>
+    </div>
+    <div
+      v-show="!isShowDesc && isSubmitted && !$refs['question-pending']?.isCorrect"
+      class="button-wrapper-wrong"
+    >
+      <button class="next">
+        下一题（2）
+      </button>
+      <button
+        class="retry"
+        @click="onClickRetry"
+      >
+        重新答题
+      </button>
+      <button
+        class="watch-desc"
+        @click="onClickWatchDesc"
+      >
+        答案解析
+      </button>
+    </div>
+    <button
+      v-show="isShowDesc"
+      class="return-question"
+      @click="isShowDesc = false"
+    >
+      返回题目
+    </button>
   </div>
 </template>
 
 <script>
 // import browser from "@/utils/browser";
 import QuestionPending from "@/views/QuestionPending.vue"
+import AnswerDesc from "@/views/AnswerDesc.vue"
 
 export default {
   components: {
-    QuestionPending
+    QuestionPending,
+    AnswerDesc,
   },
   data() {
     return {
@@ -59,14 +105,18 @@ export default {
       window.parent.document.getElementById('closepop').click()
     },
     onSubmit() {
-      const selectedIdxList = this.$refs['question-pending'].selectedIdxList
-      const selectedCount = selectedIdxList.reduce((accumulator, currentValue) => {
-        return accumulator + currentValue
-      })
-      if (selectedCount > 0) {
+      if (this.$refs['question-pending'].canSubmit > 0) {
         this.isSubmitted = true
         console.log('submit!')
       }
+    },
+    onClickWatchDesc() {
+      this.isShowDesc = true
+    },
+    onClickRetry() {
+      this.isSubmitted = false
+      this.isShowDesc = false
+      this.$refs['question-pending'].selectedIdxList = []
     }
   }
 }
@@ -133,5 +183,86 @@ export default {
     font-weight: 400;
     color: #FFFFFF;
   }
+  > .button-wrapper-correct {
+    margin-top: 10px;
+    margin-bottom: 70px;
+    > button {
+      width: 149px;
+      height: 40px;
+      &.watch-desc {
+        background-image: url(@/assets/images/btn-normal-bg.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        margin-right: 15px;
+      }
+      &.next {
+        background-image: url(@/assets/images/btn-main-bg.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+    }
+  }
+  > .button-wrapper-wrong {
+    margin-top: 10px;
+    margin-bottom: 70px;
+    > button.next {
+      display: block;
+      width: 313px;
+      height: 40px;
+      background-image: url(@/assets/images/btn-main-long-bg.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      font-size: 20px;
+      font-family: LiSu-Regular, LiSu;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 32px;
+      margin-bottom: 8px;
+    }
+    > button.retry {
+      width: 149px;
+      height: 40px;
+      background-image: url(@/assets/images/btn-normal-bg.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      font-size: 20px;
+      font-family: LiSu-Regular, LiSu;
+      font-weight: 400;
+      color: #8F4831;
+      margin-right: 15px;
+    }
+    > button.watch-desc {
+      width: 149px;
+      height: 40px;
+      background-image: url(@/assets/images/btn-normal-bg.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      font-size: 20px;
+      font-family: LiSu-Regular, LiSu;
+      font-weight: 400;
+      color: #8F4831;
+    }
+  }
+  > button.return-question {
+    margin-top: 10px;
+    margin-bottom: 70px;
+    display: block;
+    width: 313px;
+    height: 40px;
+    background-image: url(@/assets/images/btn-main-long-bg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    font-size: 20px;
+    font-family: LiSu-Regular, LiSu;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 32px;
+  }
 }
 </style>

src/views/QuestionPending.vue

@@ -24,7 +24,7 @@
         {{ option }}
       </div>
       <div
-        v-if="isSubmitted && selectedIdxList[index] && questionInfo.rightOptionIdx.includes(index)"
+        v-show="isSubmitted && selectedIdxList[index] && questionInfo.rightOptionIdx.includes(index)"
         class="result-tip"
       >
         <img
@@ -36,7 +36,7 @@
         <span class="right-tip-text">恭喜你，回答正确</span>
       </div>
       <div
-        v-if="isSubmitted && selectedIdxList[index] && !questionInfo.rightOptionIdx.includes(index)"
+        v-show="isSubmitted && selectedIdxList[index] && !questionInfo.rightOptionIdx.includes(index)"
         class="result-tip"
       >
         <img
@@ -56,7 +56,7 @@
 
 export default {
   props: [
-    'isSubmitted'
+    'isSubmitted',
   ],
   data() {
     return {
@@ -66,7 +66,27 @@ export default {
   computed: {
     ...globalMapState([
       'questionInfo',
-    ])
+    ]),
+    canSubmit() {
+      const selectedCount = this.selectedIdxList.reduce((accumulator, currentValue) => {
+        return accumulator + currentValue
+      })
+      return selectedCount > 0
+    },
+    isCorrect() {
+      const selectedCount = this.selectedIdxList.reduce((accumulator, currentValue) => {
+        return accumulator + currentValue
+      })
+      if (!this.questionInfo.rightOptionIdx.length === selectedCount) {
+        return false
+      }
+      for (const iterator of this.questionInfo.rightOptionIdx) {
+        if (!this.selectedIdxList[iterator]) {
+          return false
+        }
+      }
+      return true
+    }
   },
   watch: {
   },
@@ -97,7 +117,6 @@ export default {
   width: calc(100% - 150px * 2);
   margin-top: 10px;
   counter-reset: count;
-
   > .type {
     padding-left: 10px;
     padding-right: 10px;
@@ -141,6 +160,9 @@ export default {
       background-position: center center;
       color: #5f9533;
     }
+    &.submitted {
+      pointer-events: none;
+    }
     &.submitted.selected.rightOption {
       background-image: url(@/assets/images/option-correct-bg.png);
       background-size: cover;