bug fix

package-lock.json

@@ -170,6 +170,11 @@
         "negotiator": "0.6.3"
       }
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "vue": "^3.2.25",
     "vue-router": "^4.0.15"
   },

src/main.ts

@@ -1,6 +1,7 @@
 import App from './App.vue'
 import { createSSRApp } from 'vue'
 import { createRouter } from './router'
+import 'animate.css';
 
 // SSR requires a fresh app instance per request, therefore we export a function
 // that creates a fresh app instance. If using Vuex, we'd also be creating a

src/pages/index.vue

@@ -51,14 +51,14 @@
     <div class="four-screen">
         <div class="title">APPLICATION</div>
         <div class="list">
-            <div class="item"><img src="../static/img/four_img1.png" /></div>
-            <div class="item"><img src="../static/img/four_img2.png" /></div>
-            <div class="item"><img src="../static/img/four_img3.png" /></div>
+            <div class="item wow" data-animate="fadeInUp"><img src="../static/img/four_img1.png" /></div>
+            <div class="item wow" data-animate="fadeInUp" style="animation-duration: 1.2s;"><img src="../static/img/four_img2.png" /></div>
+            <div class="item wow" data-animate="fadeInUp" style="animation-duration: 1.4s;"><img src="../static/img/four_img3.png" /></div>
         </div>
     </div>
     <div class="five_screen">
         <div class="title">ROADMAP</div>
-        <img class="img" src="../static/img/five_img.png" />
+        <img class="img wow" data-animate="flipInX" src="../static/img/five_img.png" />
     </div>
     <div class="six_screen">
         <div class="title">COOPERATE</div>
@@ -81,8 +81,10 @@
                     <div class="font">Discord</div>
                 </div>
                 <div class="item">
-                    <img src="../static/img/footer_email.svg" />
-                    <div class="font">Email</div>
+                    <a href="mailto:denetdao@gmail.com">
+                        <img src="../static/img/footer_email.svg" />
+                        <div class="font">Email</div>
+                    </a>
                 </div>
             </div>
         </div>
@@ -90,6 +92,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue';
+
 function install() {
     window.open(`https://chrome.google.com/webstore/detail/denet/inlfbeejfdgkknpiodhemfcokbdgofja`);
 }
@@ -102,6 +106,33 @@ function telegram() {
 function discord() {
     window.open(`https://discord.gg/wZSz9p8ddG`);
 }
+
+onMounted(() => {
+    const el = document.querySelectorAll('.wow') || [];
+    if (el && el.length > 0) {
+        const _options = {
+            threshold: [0.5]
+        };
+
+        const observer = new IntersectionObserver((items) => {
+            const _threshold = _options.threshold;
+            items.forEach(item => {
+                if (item.intersectionRatio > _threshold[0]) {
+                    const animateType = item.target.dataset.animate || '';
+                    item.target.setAttribute(
+                        'class',
+                        item.target.getAttribute('class') + ` animate__animated animate__${animateType}`
+                    );
+                    observer.unobserve(item.target);
+                }
+            });
+        }, _options);
+
+        el.forEach(el => {
+            observer.observe(el);
+        });
+    }
+})
 </script>
 
 <style lang="less">
@@ -119,7 +150,7 @@ function discord() {
     background-color: #ffffff;
     box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
     .logo {
-        height: 28px;
+        height: 38px;
         margin-left: 26px;
     }
     .down {
@@ -416,6 +447,9 @@ function discord() {
                 margin-top: 0.078rem;
                 color: rgba(255, 255, 255, .4);
             }
+            a {
+                text-decoration: none;
+            }
         }
     }
 }