'update'

src/components/Question.vue

@@ -18,6 +18,7 @@ const questionList = ref(data); //随机打乱题库
 const isChecked = ref(false);
 const checkedOption = ref("");
 const QaResult = ref(1); //当前答题结果
+const correctObj = ref({}); //当前正确选项
 
 // 答题事件
 const answerFn = (item, event) => {
@@ -29,6 +30,13 @@ const answerFn = (item, event) => {
     checkedOption.value = item;
     console.log("checkedOption", checkedOption.value);
     QaResult.value = item.result;
+
+    // 设置正确选项
+    correctObj.value = questionList.value[currentId.value].answer.find(
+      (item) => item.result == 1
+    );
+    console.log("correctObj", correctObj.value);
+
     gsap.to(".qp-result ", { duration: 0.5, autoAlpha: 1, delay: 1 });
   });
 };
@@ -176,14 +184,22 @@ const getClass = (item) => {
     </div>
   </div>
   <div class="qp-result">
-    <div class="qp-result-box">
+    <div
+      class="qp-result-box"
+      :class="!QaResult ? 'qp-result-box-0' : 'qp-result-box-1'"
+    >
       <div
         class="qp-result-icon"
         :class="!QaResult ? 'is-incorrect' : ''"
       ></div>
+
+      <div class="qp-result-content">
         <div class="qp-result-text">{{ QaResult ? "答对啦" : "答错啦" }}</div>
+        <div class="qp-tips" v-if="!QaResult">
+          答案:{{ correctObj.aid }}.{{ correctObj.text }}
+        </div>
         <div class="qp-tips-text">{{ questionList[currentId].tips[0] }}</div>
-      <div class="qp-result-btn"></div>
+      </div>
     </div>
     <div
       class="next-btn"
@@ -355,7 +371,7 @@ const getClass = (item) => {
   visibility: hidden;
   .qp-result-box {
     @include box(569px, 399px);
-    @include bg_pos("qa/result-box.png");
+
     position: relative;
     .qp-result-icon {
       @include pos(112px, 112px, 222px, -28px);
@@ -364,15 +380,30 @@ const getClass = (item) => {
     .is-incorrect {
       @include bg_pos("qa/incorrect-icon.png");
     }
+
+    .qp-result-content{
+      @include pos(569px, 290px, 0px, 94px);
+    
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
       .qp-result-text {
-      @include pos(569px, 50px, 0px, 104px);
-      @include flexCen();
+      text-align: center;
+      width: 100%;
       font-size: 35px;
       color: #ffffff;
+      margin: 20px auto;
+    }
+    .qp-tips {
+      font-size: 25px;
+      color: #ff0000;
+      
     }
     .qp-tips-text {
-      @include pos(569px, 220px, 0px, 150px);
-      padding: 20px;
+      width: 100%;
+      padding: 10px 20px;
       font-size: 25px;
       line-height: 35px;
       text-align: justify;
@@ -380,6 +411,15 @@ const getClass = (item) => {
     }
     }
 
+  }
+
+  .qp-result-box-1 {
+    @include bg_pos("qa/result-box.png");
+  }
+  .qp-result-box-0 {
+    @include bg_pos("qa/result-box-2.png");
+  }
+
   .next-btn {
     @include box(190px, 65px);
     border: 1px solid #ffffff;