完成加载页、首页、答题页逻辑，待处理动画

src/components/Question.vue

@@ -12,18 +12,42 @@ const userStore = useMainStore();
 
 // 当前题目
 const currentId = ref(0); //当前id 0~11
-const questionList = ref(FYShuffle(data)); //随机打乱题库
+const questionList = ref(data); //随机打乱题库
 const answerList = ref([]); // 答案库统计
 const activeId = ref(""); // 当前题目所选答案选项
 const showResultBtn = ref(false);
 // 答题事件
 const answerFn = (item, event) => {
-  console.log('current：', currentId.value);
-  let e = event.target.parentElement.parentElement;
-
+  let e = event.target.parentElement;
+  activeId.value = item.aid;  //更新选中状态
+  console.log('选项', item);
   debounceTap(e, () => {
-    activeId.value = item.aid;  //更新下一题
-    // console.log("答案库", answerList.value);
+    let cid = questionList.value[currentId.value].id;
+    let has = answerList.value.findIndex((obj) => obj.id === cid);
+    // 答案库中未存在该题的结果则新增，存在则更新最新选项
+    if (has == -1) {
+      answerList.value.push({
+        id: cid,
+        aid: item.aid,
+        answer: item.text,
+      });
+    } else {
+      answerList.value[has].aid = item.aid;
+      answerList.value[has].answer = item.text;
+    }
+
+    // 判断是否为最后一题
+    if (currentId.value < questionList.value.length - 1) {
+      currentId.value++
+      activeId.value = ''
+
+    } else {
+      Toast('答题结束')
+      gsap.set('.question-box',{pointerEvents:'none'})
+    }
+
+
+    console.log("答案库", answerList.value);
   });
 };
 
@@ -79,25 +103,6 @@ const showResult = () => {
 
 };
 
-// 上一页函数
-const prevePage = (event) => {
-  let e = event.target;
-  debounceTap(e, () => {
-    if (currentId.value == 1) {
-      gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
-    }
-    if (currentId.value >= 11) {
-      // resultBtnAni.reverse();
-      gsap.set(".answer", { pointerEvents: "initial" });
-    }
-    activeId.value = "";
-    currentId.value--;
-
-    // 查询上一题做的选择
-    console.log('当前题库：', answerList.value[currentId.value]);
-    activeId.value = answerList.value[currentId.value].aid
-  });
-};
 
 
 // 查看结果事件及动画
@@ -110,9 +115,48 @@ onMounted(() => {
 
 <template>
   <div class="QuestionPage" @touchmove.prevent>
+    <div class="question-bg">
+      <div class="bottom-fan-1"></div>
+      <div class="bottom-fan-2"></div>
+      <div class="question-bottom-bg"></div>
+    </div>
+    <div class="question-container">
+      <div class="container-fan-1"></div>
+      <div class="container-fan-2"></div>
 
-    <Progress :percentage="(currentId + 1) / 12 * 100" pivot-color="#7232dd" :show-pivot="false"
-      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" />
+      <div class="question-box">
+        <!-- 问题序号 -->
+        <div class="qa-number">{{ questionList[currentId].id }}</div>
+        <div class="qa-question-box">
+          <!-- 问题 -->
+          <div class="question">
+            <div class="question-text" v-for="item in questionList[currentId].question" :key="item">
+              {{ item }}
+            </div>
+          </div>
+          <!-- 选项 -->
+          <div class="answer-box">
+            <div class="answer" :class="activeId == item.aid ? 'answer-active' : ''"
+              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 }}
+                </div>
+              </div>
+              <!-- 可点击区域 -->
+              <div class="click-area" @click="answerFn(item, $event)"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="question-lantern-icon"></div>
+      <div class="question-gold-icon-1"></div>
+      <div class="question-gold-icon-2"></div>
+    </div>
+    <!-- 进度条 -->
+    <!-- <Progress :percentage="(currentId + 1) / 12 * 100" pivot-color="#7232dd" :show-pivot="false"
+      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" /> -->
   </div>
 </template>
 
@@ -122,135 +166,184 @@ onMounted(() => {
   overflow: hidden;
 
   .question-bg {
-    @include pos(750px, 4500px, 0px, 50%);
+    @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
-    background: linear-gradient(135deg, #f6d365, #fda085);
+    @include bg_pos('qa/bg.jpg');
+
+    .question-bottom-bg {
+      pointer-events: none;
+      @include box(750px, 393px);
+      position: absolute;
+      left: 0px;
+      bottom: 0px;
+      @include bg_pos("qa/bottom-bg.png");
+    }
+
+    .bottom-fan-1 {
+      @include pos(370px, 334px, 545px, 1022px);
+      @include bg_pos('index/fan-3.png');
+    }
+
+    .bottom-fan-2 {
+      @include pos(350px, 205px, 494px, 1128px);
+      @include bg_pos('index/fan-4.png');
+    }
   }
 
+
   .question-container {
-    @include pos(750px, 100%, 0px, 50%);
+    @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
     @include flexCen();
 
-    .question-content {
-      @include box(100%, 100%);
-      @include flexCen();
+    .question-lantern-icon {
+      pointer-events: none;
+      @include pos(349px, 443px, 489px, 49px);
+      @include bg_pos('qa/lantern-icon.png');
+    }
 
-      .question {
-        font-family: "alimama";
-        position: relative;
-        @include box(713px, 428px);
-        @include bg_pos("qa/question.png");
-        font-family: "alimama";
-        color: #c6672c;
+    .container-fan-1 {
+      pointer-events: none;
+      @include pos(235px, 574px, 0px, 60px);
+      @include bg_pos("index/fan-1.png");
+    }
 
-        .question-order {
-          @include pos(544px, 75px, 87px, 112px);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 66px;
-          font-weight: 700;
-          line-height: 80px;
-        }
+    .container-fan-2 {
+      pointer-events: none;
+      @include pos(316px, 317px, -205px, 405px);
+      @include bg_pos("index/fan-2.png");
+    }
 
-        .question-text {
-          @include pos(544px, 170px, 87px, 192px);
-          box-sizing: border-box;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 40px;
-          // font-weight: 700;
-          // line-height: 50px;
-          font-family: "alimama";
+    .question-box {
+      @include pos(656px, 913px, 47px, 339px);
+      @include bg_pos("qa/question-box.png");
 
-          .text {
-            width: 90%;
-            display: flex;
-            justify-content: center;
-            align-content: center;
-          }
-        }
+      .qa-number {
+        @include pos(100px, 56px, 278px, 89px);
+        font-size: 40px;
+        font-style: italic;
+        color: #c61a1a;
+        font-weight: 700;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      .answer-box {
-        // display: flex;
-        // flex-direction: column;
-        @include box(750px, 886px);
-        // margin-top: 10px;
-        position: relative;
+      .qa-question-box {
+        @include pos(570px, 620px, 43px, 194px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
 
-        .answer {
-          @include box(481px, 471px);
-          position: absolute;
-          //   font-family: "alimama";
-          color: #c6672c;
+        // 问题样式
+        .question {
+          display: flex;
+          flex-direction: column;
 
-          .answer-bg {
-            @include pos(481px, 471px, 0px, 0px);
-            @include bg_pos("qa/answer-box-1.png");
-            pointer-events: none;
-          }
-
-          .active {
-            @include bg_pos("qa/answer-box-2.png");
-
-            //   color: rgb(255, 255, 255);
-          }
-
-          .answer-text {
-            // @include pos(367px, 357px, 0px, 0px);
-            position: relative;
-            left: 58px;
-            top: 58px;
-            @include box(367px, 357px);
-            padding: 10px;
-            border-radius: 50%;
-            font-family: "SourceHanSansCNMedium";
+          .question-text {
+            width: 100%;
+            font-family: 'DouyinSansBold';
             font-size: 35px;
-            font-weight: 700;
-            border-radius: 50%;
+            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);
+            // -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0);
+          }
+        }
 
-            .text {
-              @include box(367px, 357px);
-              padding: 0px 20px;
-              box-sizing: border-box;
-              position: absolute;
-              text-align: center;
+        // 选项样式
+        .answer-box {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          // 选中状态
+          .answer-active {
+            border: 2px 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%);
+
+            .answer-option {
+              color: #96100f;
+            }
+
+            .answer-text-box {
+
+              color: #96100f !important;
+            }
+
+
+          }
+
+          .answer {
+            @include box(476px, 92px);
+            position: relative;
+            border-radius: 47.5px;
+            border: 2px solid rgb(255, 225, 172);
+            margin-bottom: 35px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            .click-area {
+              @include pos(476px, 92px, 0px, 0px);
+              border-radius: 47.5px;
+            }
+
+
+            .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;
-              padding-bottom: 20px;
+              color: #cc1615;
+              font-weight: 700;
+              margin-left: 5px;
+            }
+
+            .answer-text-box {
+              @include box(335px, 100%);
+              font-family: 'HarmonyOS_Sans_SC_Regular';
+              color: #ffe2ad;
+              font-size: 28px;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+
+              .answer-text {
+                width: 100%;
+              }
+
             }
           }
+
+
+
+
+
         }
 
-        .answer:nth-child(1) {
-          top: 0px;
-          left: 6px;
-        }
-
-        .answer:nth-child(2) {
-          top: 414px;
-          left: 258px;
-        }
-      }
-
-      .prev-btn {
-        @include pos(148px, 61px, 50px, 600px);
-        @include bg_pos("qa/prev-btn.png");
-        visibility: hidden;
-      }
-
-      .showResult-btn {
-        @include box(478px, 246px);
-        position: fixed;
-        left: 149px;
-        bottom: 0px;
-        @include bg_pos("qa/showResult-btn.png");
       }
     }
+
+    .question-gold-icon-1 {
+      pointer-events: none;
+      @include pos(135px, 128px, 604px, 773px);
+      @include bg_pos("qa/gold-icon.png");
+    }
+
+    .question-gold-icon-2 {
+      pointer-events: none;
+      @include pos(276px, 241px, -70px, 1089px);
+      @include bg_pos("qa/gold-icon-2.png");
+    }
+
   }
 }
 </style>