feats

src/pages/loading/LoadingTxt.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="loading-txt-wrapper">
+    <div class="loading-text">
+      <span class="txt-shine">L</span>
+      <span class="txt-shine">o</span>
+      <span class="txt-shine">a</span>
+      <span class="txt-shine">d</span>
+      <span class="txt-shine">i</span>
+      <span class="txt-shine">n</span>
+      <span class="txt-shine">g</span>
+      <span class="txt-shine">..</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.loading-txt-wrapper {
+  
+  .loading-text {
+    margin-left: 24px;
+    flex: none;
+    display: inline-block;
+    font-size: 24px;
+
+    span {
+      display: inline-block;
+      padding: 0 2px;
+      color: #434444;
+      opacity: 1;
+
+      &:nth-child(1) {
+        transform: rotate(-10deg);
+        animation-delay: 0;
+      }
+      &:nth-child(2) {
+        transform: rotate(-5deg) translateY(-2px);
+        animation-delay: 600ms;
+      }
+      &:nth-child(3) {
+        transform: rotate(5deg) translateY(-2px);
+        animation-delay: 1200ms;
+      }
+      &:nth-child(4) {
+        transform: rotate(10deg);
+        animation-delay: 1800ms;
+      }
+      &:nth-child(5) {
+        transform: rotate(5deg) translateY(2px);
+        animation-delay: 2400ms;
+      }
+      &:nth-child(6) {
+        transform: rotate(0) translateY(2px);
+        animation-delay: 3000ms;
+      }
+      &:nth-child(7) {
+        transform: rotate(-10deg) translateY(2px);
+        animation-delay: 3600ms;
+      }
+      &:nth-child(8) {
+        transform: rotate(-10deg) translateY(2px);
+        animation-delay: 4200ms;
+      }
+    }
+
+    .txt-shine {
+      // animation: txt-shine 1.2s ease-in-out infinite alternate;
+    }
+
+    @keyframes txt-shine {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+  }
+}
+</style>

src/pages/loading/index.vue

@@ -9,17 +9,8 @@
           <div class="img-cover">
           </div>
         </div>
-        <div class="txt loading-text">
-          <div>
-            <span class="txt-shine">L</span>
-            <span class="txt-shine">o</span>
-            <span class="txt-shine">a</span>
-            <span class="txt-shine">d</span>
-            <span class="txt-shine">i</span>
-            <span class="txt-shine">n</span>
-            <span class="txt-shine">g</span>
-            <span class="txt-shine">..</span>
-          </div>
+        <div class="txt">
+          <LoadingTxt />
           <div>{{percent}}</div>
         </div>
       </div>
@@ -35,6 +26,7 @@
   import { computed, onMounted, ref } from 'vue';
   import Bell from '@/components/Bell.vue';
   import DownArrow from '@/components/DownArrow.vue';
+  import LoadingTxt from './LoadingTxt.vue';
   import { preload } from '@/utils/preload';
   import throttle from '@/utils/throttle';
 
@@ -44,9 +36,8 @@
   const finished = ref(false);
 
   const onClick = () => {
-    // if (!finished.value) return;
-
-    // emit('ready');
+    if (!finished.value) return;
+    emit('ready');
   }
 
   const callback = (val) => {
@@ -57,6 +48,7 @@
 
   onMounted(() => {
     preload(throttle(callback, 100)).then(() => {
+      percent.value = `${100}%`
       finished.value = true;
       // emit('ready');
     });
@@ -119,66 +111,6 @@
 
       }
 
-      .loading-text {
-        margin-left: 24px;
-        flex: none;
-        display: inline-block;
-        font-size: 24px;
-
-        span {
-          display: inline-block;
-          padding: 0 2px;
-          color: #434444;
-          opacity: 1;
-
-          &:nth-child(1) {
-            transform: rotate(-10deg);
-            animation-delay: 0;
-          }
-          &:nth-child(2) {
-            transform: rotate(-5deg) translateY(-2px);
-            animation-delay: 600ms;
-          }
-          &:nth-child(3) {
-            transform: rotate(5deg) translateY(-2px);
-            animation-delay: 1200ms;
-          }
-          &:nth-child(4) {
-            transform: rotate(10deg);
-            animation-delay: 1800ms;
-          }
-          &:nth-child(5) {
-            transform: rotate(5deg) translateY(2px);
-            animation-delay: 2400ms;
-          }
-          &:nth-child(6) {
-            transform: rotate(0) translateY(2px);
-            animation-delay: 3000ms;
-          }
-          &:nth-child(7) {
-            transform: rotate(-10deg) translateY(2px);
-            animation-delay: 3600ms;
-          }
-          &:nth-child(8) {
-            transform: rotate(-10deg) translateY(2px);
-            animation-delay: 4200ms;
-          }
-        }
-
-        .txt-shine {
-          // animation: txt-shine 1.2s ease-in-out infinite alternate;
-        }
-
-        @keyframes txt-shine {
-          from {
-            opacity: 0;
-          }
-          to {
-            opacity: 1;
-          }
-        }
-
-      }
 
     }
   }

src/pages/pg1/InMap.vue

@@ -9,8 +9,8 @@
       >
         <div>
           <img
-            class="flower"
-            :style="{}"
+            class="flower animate__animated animate__fadeIn animate__infinite"
+            :style="{animationDelay: `${2000}ms`, animationDuration: `${2 + inx * 10 % 7}s`}"
             src="/images/logo.png" alt="">
           <!-- <img class="shine" src="/images/pg1/shine.png" alt=""> -->
           <div class="country" :style="getTxtStyle(item)">{{item.name}}</div>