更新首页信息

src/components/Question.vue

@@ -12,6 +12,8 @@
                 </div>
                 <!-- 查看结果 -->
                 <Button v-if="showResultBtn" @click="showResult">查看结果</Button>
+                <!-- 下一页 -->
+                <Button @click="nextPage">下一页</Button>
             </div>
         </div>
     </div>
@@ -64,22 +66,24 @@ const mbtiArr = ref([[], [], [], []])  //四组数组分别存放 E&I，S&T，T&
 const showResult = (event) => {
     let e = event.target
     debounceTap(e, () => {
-        console.log('答题结果：', answerList.value);
-
+        // console.log('答题结果：', answerList.value);
         answerList.value.forEach(element => {
             if (element.answer == "E" || element.answer == "I") mbtiArr.value[0].push(element.answer)
             if (element.answer == "S" || element.answer == "N") mbtiArr.value[1].push(element.answer)
             if (element.answer == "T" || element.answer == "F") mbtiArr.value[2].push(element.answer)
             if (element.answer == "J" || element.answer == "P") mbtiArr.value[3].push(element.answer)
         });
-
-        console.log('mbtiArr', mbtiArr.value);
+        // console.log('mbtiArr', mbtiArr.value);
         let mbti = mostValue(mbtiArr.value[0]).value + mostValue(mbtiArr.value[1]).value + mostValue(mbtiArr.value[2]).value + mostValue(mbtiArr.value[3]).value
         console.log('MBTI:', mbti);
         Toast('你的MBTI测试结果:' + mbti)
     })
 }
 
+const nextPage = () => {
+
+}
+
 </script>
 
 <style lang='scss' scope>

src/data/index.js

@@ -87,7 +87,6 @@ export default [
     {
         id: 6,
         type: 'lc',
-        type: 'lc',
         question: '当评估一项投资机会时，你更倾向于？',
         answer: [
             {

src/page/Home/App.vue

@@ -4,9 +4,16 @@
     <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
     <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
   </div>
+  <div id="transition" class="transition">
+    <div class="t-i" v-for="i in 8">
+      <div class="i" :class="'i-' + i % 2">LOADING</div>
+      <div class="i" :class="'i-' + i % 2">LOADING</div>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import gsap from 'gsap'
 import Loading from "@/components/Loading";
 import Index from "@/components/Index";
 import Question from "@/components/Question";
@@ -34,7 +41,10 @@ const questionFn = (item) => {
 };
 
 
-onMounted(() => { });
+onMounted(() => {
+  gsap.to('.i-0', { duration: 5, x: "100%", repeat: -1 })
+  gsap.to('.i-1', { duration: 5, x: "-100%", repeat: -1 })
+});
 </script>
 
 <style lang="scss" >
@@ -49,4 +59,43 @@ onMounted(() => { });
   overflow: hidden;
   margin: 0 auto;
 }
+
+#transition {
+  @include fixed();
+  background-color: rgba($color: #000000, $alpha: .7);
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  // transform: rotate(-45deg);
+  // transform: translateX(-25%) translateY(15%) rotate(-45deg);
+
+  .t-i {
+    width: 100%;
+    height: calc(100% / 8);
+    text-align: center;
+    font-size: 120px;
+    display: flex;
+    align-items: center;
+    font-weight: 700;
+
+    .i {
+      width: 750px;
+      margin-left: 5%;
+    }
+  }
+
+  .t-i:nth-child(odd) {
+    background-color: #feed01;
+    color: #07b8ba;
+  }
+
+  .t-i:nth-child(even) {
+    background-color: #07b8ba;
+    color: #feed01;
+
+    .i {
+      transform: translateX(-80%);
+    }
+  }
+}
 </style>

src/plugins/index.js

@@ -327,7 +327,7 @@ export function getAstro(month, day) {
     return s.substr(month * 2 - (day < arr[month - 1] ? 2 : 0), 2);
 }
 
-// 洗牌算法
+// 洗牌算法：打乱数组顺序
 export function FYShuffle(arr) {
     let len = arr.length;