处理 答案解析在本页展示 的情况

src/views/QuestionJudge.vue

@@ -1,6 +1,9 @@
 <template>
   <div
     class="question-judge"
+    :class="{
+      isDescInline,
+    }"
   >
     <button
       class="close"
@@ -16,13 +19,47 @@
       <h1>知识问答</h1>
     </div>
     <QuestionPending
-      v-show="!isShowDesc"
+      v-show="isDescInline || !isShowDesc"
       ref="question-pending"
       @submit="onSubmit"
     />
     <AnswerDesc
+      v-if="!isDescInline"
       v-show="isShowDesc"
     />
+    <div
+      v-if="isDescInline && isShowDesc"
+      class="answer-desc-inline"
+    >
+      <p
+        v-if="questionInfo.descText"
+        class="desc"
+      >
+        {{ questionInfo.descText }}
+      </p>
+      <img
+        v-for="(item, index) in questionInfo.descImg"
+        :key="index"
+        v-viewer="{
+          button: true,
+          navbar: false,
+          title: false,
+          toolbar: false,
+          tooltip: false,
+          movable: true,
+          zoomable: true,
+          rotatable: true,
+          scalable: true,
+          transition: false,
+          fullscreen: false,
+          keyboard: true,
+          loop: false,
+        }"
+        :src="require(`@/assets/images/quiz-img/${questionInfo.id}-${item}`)"
+        alt=""
+        class="desc-img"
+      >
+    </div>
     <button
       v-show="!isSubmitted && (questionInfo?.questionType === '多选题' || questionInfo.questionType === '连线题')"
       class="submit"
@@ -31,10 +68,11 @@
       提交答案
     </button>
     <div
-      v-show="!isShowDesc && isSubmitted && $refs['question-pending']?.isCorrect"
+      v-show="(!isShowDesc || (isShowDesc && isDescInline)) && isSubmitted && $refs['question-pending']?.isCorrect"
       class="button-wrapper-correct"
     >
       <button
+        v-if="questionInfo?.descText && !isDescInline"
         class="watch-desc"
         @click="onClickWatchDesc"
       >
@@ -49,7 +87,7 @@
       </button>
     </div>
     <div
-      v-show="!isShowDesc && isSubmitted && !$refs['question-pending']?.isCorrect"
+      v-show="(!isShowDesc || (isShowDesc && isDescInline)) && isSubmitted && !$refs['question-pending']?.isCorrect"
       class="button-wrapper-wrong"
     >
       <button
@@ -66,6 +104,7 @@
         重新答题
       </button>
       <button
+        v-if="questionInfo?.descText"
         class="watch-desc"
         @click="onClickWatchDesc"
       >
@@ -73,7 +112,7 @@
       </button>
     </div>
     <button
-      v-show="isShowDesc"
+      v-show="!isDescInline && isShowDesc"
       class="return-question"
       @click="isShowDesc = false"
     >
@@ -107,7 +146,10 @@ export default {
     ]),
     remainingQuestionNumber() {
       return globalUtils.getRemainingQuestionNumber(this.questionInfo.id)
-    }
+    },
+    isDescInline() {
+      return this.questionInfo?.id === '3.1.1' || this.questionInfo?.id === '3.1.2'
+    },
   },
   watch: {
   },
@@ -131,6 +173,7 @@ export default {
           this.$refs['question-pending']?.selectedIdxList,
           this.questionInfo.badgeTypeCode,
         )
+        this.isShowDesc = true
       }
     },
     onClickWatchDesc() {
@@ -301,4 +344,57 @@ export default {
     line-height: 32px;
   }
 }
+
+.question-judge.isDescInline {
+  width: 804px;
+  height: 793px;
+  background-image: url(@/assets/images/bg-long.png);
+  > button.close {
+    top: 43px;
+    right: 38px;
+    > img {
+    }
+  }
+  > .title-wrapper {
+    margin-top: 28px;
+    > h1 {
+    }
+  }
+  > .question-pending {
+    flex: 0 0 auto;
+  }
+  > .answer-desc-inline {
+    margin-top: 10px;
+    flex: 1 0 1px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: calc(100% - 150px * 2);
+    overflow: auto;
+    > p.desc {
+      height: 74px;
+      overflow: auto;
+      flex: 0 0 auto;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #A4573F;
+      line-height: 17px;
+      letter-spacing: 1px;
+      padding-right: 10px;
+    }
+    > img.desc-img {
+      margin-top: 10px;
+      flex: 1 0 1px;
+      max-width: 100%;
+    }
+  }
+  > .button-wrapper-correct {
+    margin-bottom: 20px;
+  }
+  > .button-wrapper-wrong {
+    margin-bottom: 20px;
+  }
+}
 </style>