更改答题页页面

src/components/Question.vue

@@ -16,6 +16,8 @@ const questionList = ref(data); //随机打乱题库
 const answerList = ref([]); // 答案库统计
 const activeId = ref(""); // 当前题目所选答案选项
 const showResultBtn = ref(false);
+const isChecked = ref(false)
+
 // 答题事件
 const answerFn = (item, event) => {
   let e = event.target.parentElement;
@@ -37,39 +39,49 @@ const answerFn = (item, event) => {
     }
 
     // 判断是否为最后一题
-    if (currentId.value < questionList.value.length - 1) {
-      currentId.value++
-      activeId.value = ''
+    gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
+    gsap.set('.question-box', { pointerEvents: 'none' })
+    isChecked.value = true
+  })
 
-    } else {
-      // 随机生成海报id
-      userStore.updatePosterId(getRandomNumber([1, 2, 3]))
-      gsap.set('.question-box', { pointerEvents: 'none' })
-      Toast('答题结束')
-      Toast.loading({
-        message: '结果生成中',
-        duration: 0,
-        forbidClick: true,
-      })
+}
 
-      if (import.meta.env.VITE_MODE != "dev") {
-        // 提交完成记录
-        subAnswer({}, userStore.token).then((res) => {
-          console.log("key:", res);
-          if (res.code == 0) {
-            userStore.updateDrawKey(res.data);
-          }
 
-          setTimeout(() => {
-            Toast.clear()
-            gsap.to('.QuestionPage', {
-              duration: 0.5, autoAlpha: 0, onComplete: () => {
-                emit("QuestionPage", { action: "showResult" });
-              }
-            })
-          }, 1000)
-        });
-      } else {
+// 下一题
+const nextQuestion = (event) => {
+  let e = event.target;
+  debounceTap(e, () => {
+    isChecked.value = false
+    gsap.set('.option-tips,.analysis', { autoAlpha: 0 })
+    currentId.value++
+    activeId.value = ''
+    gsap.set('.question-box', { pointerEvents: 'initial' })
+  })
+
+}
+
+// 查看结果事件
+const viewResult = (event) => {
+  let e = event.target;
+  debounceTap(e, () => {
+    // 随机生成海报id
+    userStore.updatePosterId(getRandomNumber([1, 2, 3]))
+    gsap.set('.question-box', { pointerEvents: 'none' })
+    Toast('答题结束')
+    Toast.loading({
+      message: '结果生成中',
+      duration: 0,
+      forbidClick: true,
+    })
+
+    if (import.meta.env.VITE_MODE != "dev") {
+      // 提交完成记录
+      subAnswer({}, userStore.token).then((res) => {
+        console.log("key:", res);
+        if (res.code == 0) {
+          userStore.updateDrawKey(res.data);
+        }
+
         setTimeout(() => {
           Toast.clear()
           gsap.to('.QuestionPage', {
@@ -78,13 +90,19 @@ const answerFn = (item, event) => {
             }
           })
         }, 1000)
-      }
-
+      });
+    } else {
+      setTimeout(() => {
+        Toast.clear()
+        gsap.to('.QuestionPage', {
+          duration: 0.5, autoAlpha: 0, onComplete: () => {
+            emit("QuestionPage", { action: "showResult" });
+          }
+        })
+      }, 1000)
     }
-    console.log("答案库", answerList.value);
-  });
-};
-
+  })
+}
 
 // 从数组中随机生成一个数字
 const getRandomNumber = (arr) => {
@@ -92,8 +110,7 @@ const getRandomNumber = (arr) => {
   return arr[randomIndex];
 }
 
-// 查看结果事件及动画
-// const resultBtnAni = gsap.timeline({ paused: true });
+
 onMounted(() => {
   gsap.from('.question-bg', { duration: 0.5, autoAlpha: 0, })
   gsap.from('.question-box', { duration: 0.5, scale: 0.4, autoAlpha: 0, })
@@ -123,21 +140,28 @@ onMounted(() => {
             <div class="question-text" v-for="item in questionList[currentId].question" :key="item">
               {{ item }}
             </div>
+            <div class="question-tips">打一系列产品</div>
           </div>
           <!-- 选项 -->
           <div class="answer-box">
-            <div class="answer" :class="activeId == item.aid ? 'answer-active' : ''"
+            <div class="answer" :class="isChecked ? item.result + '-bg' : ''"
               v-for="item in questionList[currentId].answer" :key="item.aid">
-              <div class="answer-option">{{ item.aid }}</div>
               <div class="answer-text-box">
                 <div class="answer-text" v-for="a in item.text" :key="a">
-                  {{ a }}
+                  {{ item.aid }}.{{ a }}
                 </div>
               </div>
+              <div class="option-tips">
+                <div :class="item.result"></div>
+              </div>
               <!-- 可点击区域 -->
               <div class="click-area" @click="answerFn(item, $event)"></div>
             </div>
           </div>
+          <!-- 解析 -->
+          <div class="analysis">{{ questionList[currentId].analysis }}</div>
+          <div class="next-btn" @click="nextQuestion($event)"></div>
+          <div class="next-btn" @click="nextQuestion($event)"></div>
         </div>
       </div>
       <div class="question-lantern-icon"></div>
@@ -187,7 +211,7 @@ onMounted(() => {
     @include flexCen();
 
     .question-lantern-icon {
-      pointer-events: none;
+      // pointer-events: none;
       @include pos(349px, 443px, 489px, 49px);
       @include bg_pos('qa/lantern-icon.png');
     }
@@ -220,7 +244,7 @@ onMounted(() => {
       }
 
       .qa-question-box {
-        @include pos(570px, 620px, 43px, 194px);
+        @include pos(570px, 700px, 43px, 194px);
         display: flex;
         flex-direction: column;
         justify-content: space-around;
@@ -240,6 +264,16 @@ onMounted(() => {
             text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
             // -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0);
           }
+
+          .question-tips {
+            font-size: 25px;
+            width: 100%;
+            font-family: 'DouyinSansBold';
+            color: rgb(255, 255, 255);
+            text-align: center;
+            padding: 10px;
+            text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
+          }
         }
 
         // 选项样式
@@ -249,8 +283,8 @@ onMounted(() => {
           align-items: center;
 
           // 选中状态
-          .answer-active {
-            border: 2px solid rgb(255, 238, 186) !important;
+          .correct-bg {
+            border: 1px solid rgb(255, 238, 186) !important;
             background-image: linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
             background-image: -webkit-linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
 
@@ -259,13 +293,27 @@ onMounted(() => {
             }
 
             .answer-text-box {
-
               color: #96100f !important;
             }
 
+          }
+
+          .incorrect-bg {
+            background-image: -webkit-linear-gradient(177deg, rgb(195, 59, 22) 0%, rgb(209, 84, 51) 100%);
+            box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85), inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
+
+            .answer-option {
+              color: #ffe2ad;
+            }
+
+            .answer-text-box {
+              color: #ffe2ad !important;
+            }
 
           }
 
+
+
           .answer {
             @include box(476px, 92px);
             position: relative;
@@ -274,7 +322,7 @@ onMounted(() => {
             margin-bottom: 35px;
             display: flex;
             flex-direction: row;
-            justify-content: space-between;
+            justify-content: space-around;
             align-items: center;
 
             .click-area {
@@ -283,19 +331,23 @@ onMounted(() => {
             }
 
 
-            .answer-option {
-              @include box(92px, 77px);
-              border-radius: 38.5px;
-              background-color: rgb(233, 197, 143);
-              font-size: 52px;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              color: #cc1615;
-              font-weight: 700;
-              margin-left: 5px;
+            .option-tips {
+              @include box(60px, 60px);
+              visibility: hidden;
+
+              .correct {
+                @include box(100%, 100%);
+                @include bg_pos("qa/correct.png");
+              }
+
+              .incorrect {
+                @include box(100%, 100%);
+                @include bg_pos("qa/incorrect.png");
+              }
             }
 
+
+
             .answer-text-box {
               @include box(335px, 100%);
               font-family: 'HarmonyOS_Sans_SC_Regular';
@@ -307,6 +359,8 @@ onMounted(() => {
 
               .answer-text {
                 width: 100%;
+                // text-align: center;
+                padding-left: 40px;
               }
 
             }
@@ -316,6 +370,28 @@ onMounted(() => {
 
 
 
+        }
+
+        // 解析样式
+        .analysis {
+          width: 100%;
+          font-family: 'HarmonyOS_Sans_SC_Regular';
+          font-size: 25px;
+          color: #ffe2ad;
+          text-align: center;
+          padding: 10px;
+          height: 150px;
+          line-height: 40px;
+        }
+
+        .next-btn{
+          @include box(234px,65px);
+          @include bg_pos("qa/next-btn.png");
+
+        }
+        .create-btn{
+          @include box(234px,65px);
+          @include bg_pos("qa/create-btn.png");
         }
 
       }