更新首页信息

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>