新建元宵节项目分支

src/components/Question.vue

@@ -1,6 +1,6 @@
 <script setup name="Question">
 import gsap from "gsap";
-import { Toast,Progress  } from "vant";
+import { Toast, Progress } from "vant";
 import { data } from "@/data";
 import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
 import { useMainStore } from "@/store";
@@ -18,68 +18,12 @@ const activeId = ref(""); // 当前题目所选答案选项
 const showResultBtn = ref(false);
 // 答题事件
 const answerFn = (item, event) => {
-  console.log('current：',currentId.value);
+  console.log('current：', currentId.value);
   let e = event.target.parentElement.parentElement;
-  activeId.value = item.aid;
+
   debounceTap(e, () => {
-    if (currentId.value != 0 && currentId.value != 11) {
+    activeId.value = item.aid;  //更新下一题
-      gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
+    // console.log("答案库", answerList.value);
-    }
-
-    if (currentId.value != 11) {
-      questionOut.timeScale(2);
-      questionOut.restart();
-      questionOut.eventCallback("onComplete", () => {
-        let cid = questionList.value[currentId.value].id;
-        let has = answerList.value.findIndex((obj) => obj.qid === cid);
-        if (has == -1) {
-          answerList.value.push({
-            qid: cid,
-            answer: item.secore,
-            text: item.text,
-            aid: item.aid
-          });
-        } else {
-          answerList.value[has].answer = item.secore;
-          answerList.value[has].text = item.text;
-          answerList.value[has].aid = item.aid;
-
-        }
-
-        // 更新下一题信息
-        if (currentId.value >= 11) {
-          console.log("jieshu");
-          Toast("答题结束");
-          gsap.set(".answer", { pointerEvents: "none" });
-          
-          return;
-        } else {
-          activeId.value = "";
-          currentId.value++;
-        }
-        questionEntry.timeScale(2);
-        questionEntry.restart();
-      });
-    } else {
-      let cid = questionList.value[currentId.value].id;
-      let has = answerList.value.findIndex((obj) => obj.qid === cid);
-      if (has == -1) {
-        answerList.value.push({
-          qid: cid,
-          answer: item.secore,
-          text: item.text,
-          aid: item.aid
-        });
-      } else {
-        answerList.value[has].answer = item.secore;
-        answerList.value[has].text = item.text;
-        answerList.value[has].aid = item.aid;
-      }
-      // resultBtnAni.play();
-      // 答题结束
-      showResult()
-    }
-    console.log("答案库", answerList.value);
   });
 };
 
@@ -150,152 +94,26 @@ const prevePage = (event) => {
     currentId.value--;
 
     // 查询上一题做的选择
-    console.log('当前题库：',answerList.value[currentId.value]);
+    console.log('当前题库：', answerList.value[currentId.value]);
     activeId.value = answerList.value[currentId.value].aid
   });
 };
 
-// 题目过渡动画
-const questionEntry = gsap.timeline({
-  paused: true,
-  onStart: () => {
-    gsap.set(".answer-box", { pointerEvents: "none" });
-  },
-  onComplete: () => {
-    gsap.set(".answer-box", { pointerEvents: "none" });
-  },
-});
-const questionOut = gsap.timeline({
-  paused: true,
-  onStart: () => {
-    gsap.set(".answer-box", { pointerEvents: "none" });
-  },
-  onComplete: () => {},
-});
 
 // 查看结果事件及动画
 // const resultBtnAni = gsap.timeline({ paused: true });
 onMounted(() => {
-  // 适配
-  if (!judgeBigScreen()) {
-    gsap.set(".answer-box", { scale: 0.9, marginTop: "-20px" });
-  }
 
-  // resultBtnAni.from(".showResult-btn", { y: 200, autoAlpha: 0 });
-  questionEntry
-    .from(".question", { y: 100, autoAlpha: 0 })
-    .from(".answer-0", {
-      y: 400,
-      scale: 0.3,
-      autoAlpha: 0,
-      duration: 2,
-      ease: "slow(0.7,0.7,false)",
-    })
-    .from(
-      ".answer-1",
-      {
-        y: 400,
-        scale: 0.3,
-        autoAlpha: 0,
-        duration: 2,
-        ease: "slow(0.7,0.7,false)",
-        onStart: () => {
-          gsap.to(".question-bg", {
-            backgroundPosition: "0px 0px",
-            duration: 1,
-            ease: "slow(0.7,0.7,false)",
-          });
-        },
-        onComplete: () => {
-          gsap.set(".answer-box", { pointerEvents: "initial" });
-          if (currentId.value != 0) {
-            gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
-          }
-        },
-      },
-      0.5
-    )
-    .to(".answer-0", { duration: 1, y: "-=10px", repeat: -1, yoyo: true })
-    .to(".answer-1", { duration: 1, y: "+=10px", repeat: -1, yoyo: true });
 
-  questionEntry.play();
-  questionOut
-    .to(".question", { y: -50, autoAlpha: 0, duration: 0.3 })
-    .to(".answer-0", { scale: 0.3, duration: 1 })
-    .to(".answer-1", { scale: 0.3, duration: 1 }, 0.5)
-    .to(".answer-0", {
-      y: -600,
-      scale: 0.5,
-      autoAlpha: 0,
-      duration: 1.5,
-      ease: "slow(0.7,0.7,false)",
-      onStart: () => {
-        // gsap.to(".question-bg", {
-        //   backgroundPosition: "0px 835px",
-        //   duration: 0.75,
-        //   ease: "slow(0.7,0.7,false)",
-        // });
-      },
-    })
-    .to(
-      ".answer-1",
-      {
-        y: -600,
-        scale: 0.5,
-        autoAlpha: 0,
-        duration: 1.5,
-        ease: "slow(0.7,0.7,false)",
-      },
-      1.5
-    );
 });
 </script>
 
 <template>
   <div class="QuestionPage" @touchmove.prevent>
-    <div class="question-bg"></div>
-    <div class="question-container">
-      <div class="question-content">
-        <div class="question">
-          <div class="question-order">{{ currentId + 1 }}</div>
-          <div class="question-text">
-            <div class="text">{{ questionList[currentId].question }}</div>
-          </div>
-        </div>
-        <div class="answer-box">
-          <div
-            class="answer"
-            v-for="(item, index) in questionList[currentId].answer"
-            :class="'answer-' + index"
-            :key="index"
-          >
-            <div
-              class="answer-bg"
-              :class="activeId == item.aid ? 'active' : ''"
-            ></div>
-            <div class="answer-text">
-              <div class="content-before"></div>
-              <div class="content-after"></div>
-              <div class="text" @click="answerFn(item, $event)">
-                {{ item.aid }}<br />{{ item.text }}
-              </div>
-            </div>
-          </div>
-          <!-- 查看结果 -->
-          <!-- <div class="showResult-btn" @click="showResult"></div> -->
-          <!-- 上一页 -->
-          <div class="prev-btn" @click="prevePage($event)"></div>
-        </div>
-      </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>
 
+    <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>
 
 <style lang='scss' scope>