index

src/pages/index.vue

@@ -12,14 +12,85 @@
         <video class="goods" autoplay muted loop src="../static/img/goods.mp4"></video>
         <div class="install">Install Now</div>
     </div>
+    <div class="second-screen">
+        <div class="block">
+            <img class="showImg" src="../static/img/second_img1.png" />
+            <div class="showText">
+                <div class="font">
+                    <div>Grow and engage followers</div>
+                    <div>via Giveaways</div>
+                </div>
+                <div class="add">Install</div>
+            </div>
+        </div>
+        <div class="block">
+            <div class="taskText">
+                <div class="font">
+                    <div>Complete tasks</div>
+                    <div>with one click</div>
+                </div>
+                <div class="add">Install</div>
+            </div>
+            <img class="taskImg" src="../static/img/second_img2.png" />
+        </div>
+    </div>
+    <div class="three-screen">
+        <div class="article">
+            <h2 class="title">DeNet is the bridge from Web2 to Web3</h2>
+            <div class="line">starting from the Web2 platform, bringing together advertisers, users, and bloggers through the bounty task growth system and the reward mechanism of smart contracts, redefining and solving the problems of growth, advertising and user incentives.</div>
+            <div class="line">DeNet attracts users to enter web3 through rewards, and at the same time lowers the threshold of Web3 by technical means. In Denet, everyone can give full play to their own exclusive influence and earn excess bounties, thus realizing the perfect migration from Web2 to Web3.</div>
+        </div>
+        <video class="video" autoplay muted loop src="../static/img/three_video.mp4"></video>
+    </div>
+    <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>
+    </div>
+    <div class="five_screen">
+        <div class="title">ROADMAP</div>
+        <img class="img" src="../static/img/five_img.png" />
+    </div>
+    <div class="six_screen">
+        <div class="title">COOPERATE</div>
+        <img class="img" src="../static/img/six_img.png" />
+    </div>
+    <div class="footer">
+        <div class="content">
+            <img class="logo" src="../static/img/footer_logo.svg" />
+            <div class="link">
+                <div class="item">
+                    <img src="../static/img/footer_twitter.svg" />
+                    <div class="font">Twitter</div>
+                </div>
+                <div class="item">
+                    <img src="../static/img/footer_telegram.svg" />
+                    <div class="font">Telegram</div>
+                </div>
+                <div class="item">
+                    <img src="../static/img/footer_discord.svg" />
+                    <div class="font">Discord</div>
+                </div>
+                <div class="item">
+                    <img src="../static/img/footer_email.svg" />
+                    <div class="font">Email</div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
 </script>
 
 <style lang="less">
+// 1rem = 128px
 .header {
     position: fixed;
+    z-index: 2;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -27,6 +98,7 @@
     left: 0;
     width: 100%;
     height: 60px;
+    background-color: #ffffff;
     box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
     .logo {
         height: 28px;
@@ -55,6 +127,7 @@
 
 .first-screen {
     position:relative;
+    overflow: hidden;
     height: 6.171rem;
     background-color: #F9FDFF;
     .text {
@@ -93,4 +166,199 @@
         mix-blend-mode: darken;
     }
 }
+
+.second-screen {
+    overflow: hidden;
+    height: 11.718rem;
+    background-color: #fff;
+    .block {
+        clear: both;
+        display: flex;
+        justify-content: center;
+        .showImg {
+            width: 4.812rem;
+            height: 3.706rem;
+            margin-top: 1.203rem;
+        }
+        .showText {
+            width: 3.539rem;
+            margin-top: 1.812rem;
+            margin-left: 1rem;
+            .font {
+                font-size: 0.25rem;
+                font-weight: bold;
+            }
+            .add {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #1D9BF0;
+                width: 1.093rem;
+                height: 0.359rem;
+                font-size: 0.14rem;
+                margin-top: 0.296rem;
+                border-radius: 100px;
+                border: 1.5px solid #1D9BF0;
+            }
+        }
+        .taskText {
+            margin-top: 2.132rem;
+            .font {
+                font-size: 0.296rem;
+                font-weight: bold;
+            }
+            .add {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #1D9BF0;
+                width: 1.093rem;
+                height: 0.359rem;
+                font-size: 0.14rem;
+                margin-top: 0.296rem;
+                border-radius: 100px;
+                border: 1.5px solid #1D9BF0;
+            }
+        }
+        .taskImg {
+            width: 4.867rem;
+            height: 3.804rem;
+            margin-top: 1.765rem;
+            margin-left: 1.226rem;
+        }
+    }
+}
+
+.three-screen {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 6.25rem;
+    background-color: #E8F5FE;
+    .article {
+        width: 4.046rem;
+        font-size: 0.14rem;
+        .title {
+            color: #000;
+            font-size: 0.39rem;
+            margin: 0 0 0.335rem 0;
+        }
+        .line {
+            margin-top: 0.328rem;
+            color: rgba(0, 0, 0, .6);
+        }
+    }
+    .video {
+        width: 3.437rem;
+        height: 3.437rem;
+        margin-left: 0.9rem;
+        mix-blend-mode: darken;
+    }
+}
+
+.four-screen {
+    overflow: hidden;
+    height: 6.5rem;
+    background-color: #fff;
+    .title {
+        text-align: center;
+        font-size: 0.328rem;
+        font-weight: bold;
+        line-height: 0.39rem;
+        margin-top: 0.953rem;
+        margin-bottom: 0.632rem;
+    }
+    .list {
+        display: flex;
+        justify-content: space-between;
+        margin: auto;
+        width: 8.671rem;
+        .item {
+            width: 2.734rem;
+            height: 3.359rem;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.five_screen {
+    overflow: hidden;
+    height: 7.031rem;
+    background-size: 100%;
+    background-color: #000;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    background-image: url('../static/img/five_bg.jpg');
+    .title {
+        color: #fff;
+        text-align: center;
+        font-size: 0.39rem;
+        font-weight: bold;
+        line-height: 0.468rem;
+        margin-top: 1.054rem;
+        margin-bottom: 0.965rem;
+    }
+    .img {
+        display: block;
+        margin: auto;
+        width: 9.765rem;
+        height: 2.46rem;
+    }
+}
+
+.six_screen {
+    overflow: hidden;
+    height: 6.25rem;
+    background-color: #fff;
+    .title {
+        color: #000;
+        text-align: center;
+        font-size: 0.39rem;
+        font-weight: bold;
+        line-height: 0.468rem;
+        margin-top: 1.775rem;
+        margin-bottom: 0.695rem;
+    }
+    .img {
+        display: block;
+        margin: auto;
+        width: 8.75rem;
+        height: 1.875rem;
+    }
+}
+
+.footer {
+    display: flex;
+    justify-content: space-between;
+    height: 1.56rem;
+    background-color: #1D2431;
+    .content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: auto;
+        width: 8.343rem;
+    }
+    .logo {
+        width: 218px;
+        height: 74px;
+    }
+    .link {
+        display: flex;
+        .item {
+            margin: 0 12px;
+            width: 0.468rem;
+            text-align: center;
+            .font {
+                font-size: 0.101rem;
+                margin-top: 0.078rem;
+                color: rgba(255, 255, 255, .4);
+            }
+        }
+    }
+}
 </style>

src/static/img/footer_email.svg

@@ -0,0 +1,4 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.05" cx="30" cy="30" r="30" fill="white"/>
+<path d="M44 24.9612V38.6429C44 39.268 43.7397 39.8676 43.2764 40.3096C42.8131 40.7517 42.1847 41 41.5294 41H18.4706C17.8154 41 17.1869 40.7517 16.7236 40.3096C16.2603 39.8676 16 39.268 16 38.6429V24.9612L26.2719 33.2701C27.3134 34.1127 28.6345 34.5751 30 34.5751C31.3655 34.5751 32.6866 34.1127 33.7281 33.2701L44 24.9612ZM41.5294 19C41.8305 19.0003 42.129 19.0525 42.4106 19.154C42.8154 19.3011 43.1723 19.5478 43.4449 19.869C43.5927 20.0417 43.7141 20.2335 43.8056 20.4386C43.9127 20.6806 43.9786 20.9431 43.9951 21.2189L44 21.3571V22.1429L31.6034 32.2314C31.1768 32.5786 30.639 32.777 30.0785 32.794C29.5181 32.811 28.9682 32.6456 28.5193 32.3249L28.3966 32.2306L16 22.1429V21.3571C15.999 20.9208 16.1254 20.4929 16.3649 20.1213C16.6045 19.7496 16.9478 19.449 17.3564 19.253C17.7018 19.0864 18.0835 18.9997 18.4706 19H41.5294V19Z" fill="white"/>
+</svg>

src/static/img/footer_logo.svg

@@ -0,0 +1,14 @@
+<svg width="218" height="74" viewBox="0 0 218 74" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3">
+<path d="M93 24V49.627H102.519C110.321 49.627 114.909 44.8675 114.909 36.7514C114.909 28.6352 110.303 24 102.519 24H93ZM97.66 27.8716H102.031C107.233 27.8716 110.159 31.0328 110.159 36.7691C110.159 42.612 107.269 45.7555 102.031 45.7555H97.66V27.8716Z" fill="white"/>
+<path d="M127.207 33.8388C129.79 33.8388 131.524 35.7035 131.614 38.3675H122.674C122.854 35.7391 124.678 33.8388 127.207 33.8388ZM131.632 43.9973C131.145 45.5601 129.555 46.5902 127.46 46.5902C124.516 46.5902 122.637 44.5656 122.637 41.5464V41.2801H136.021V39.8415C136.021 34.1229 132.626 30.4112 127.189 30.4112C121.662 30.4112 118.158 34.3361 118.158 40.2855C118.158 46.2882 121.626 50 127.37 50C131.903 50 135.263 47.5492 135.841 43.9973H131.632Z" fill="white"/>
+<path d="M144.671 49.627V31.6544H144.833L157.784 49.627H161.794V24H157.314V41.9549H157.152L144.219 24H140.173V49.627H144.671Z" fill="white"/>
+<path d="M174.995 33.8388C177.578 33.8388 179.311 35.7035 179.402 38.3675H170.461C170.642 35.7391 172.466 33.8388 174.995 33.8388ZM179.42 43.9973C178.932 45.5601 177.343 46.5902 175.248 46.5902C172.303 46.5902 170.425 44.5656 170.425 41.5464V41.2801H183.809V39.8415C183.809 34.1229 180.413 30.4112 174.977 30.4112C169.45 30.4112 165.946 34.3361 165.946 40.2855C165.946 46.2882 169.414 50 175.157 50C179.691 50 183.05 47.5492 183.628 43.9973H179.42Z" fill="white"/>
+<path d="M188.756 26.3975V30.8019H186.01V34.2117H188.756V44.6188C188.756 48.2773 190.381 49.7158 194.517 49.7158C195.475 49.7158 196.36 49.6448 196.847 49.5382V46.1639C196.558 46.2172 195.981 46.2527 195.565 46.2527C193.976 46.2527 193.253 45.5423 193.253 43.9973V34.2117H196.866V30.8019H193.253V26.3975H188.756Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.9995 53.2812C41.9997 53.2812 41.9999 53.2812 42 53.2812C52.0965 53.2812 60.2813 45.0965 60.2813 35C60.2813 24.9035 52.0965 16.7188 42 16.7188C41.9999 16.7188 41.9997 16.7188 41.9995 16.7188V53.2812Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.3306 57.5771C48.4819 58.151 48.5625 58.7536 48.5625 59.375C48.5625 59.7383 48.5349 60.0952 48.4818 60.4436C59.8445 57.5578 68.25 47.2605 68.25 35C68.25 33.2819 68.0849 31.6023 67.7698 29.9763C66.9847 30.3895 66.1119 30.6585 65.1866 30.7482C65.4638 32.1365 65.6094 33.5587 65.6094 35C65.6094 45.3268 58.135 54.6775 48.3306 57.5771ZM34.5452 60.1764C34.5153 59.9134 34.5 59.646 34.5 59.375C34.5 58.6544 34.6084 57.959 34.8098 57.3045C25.4314 54.1262 18.3906 45.0228 18.3906 35C18.3906 33.5382 18.5404 32.0959 18.8253 30.6887C17.9036 30.538 17.0422 30.2081 16.278 29.7358C15.9318 31.4366 15.75 33.1971 15.75 35C15.75 46.9078 23.6789 56.9638 34.5452 60.1764ZM42 11.5C35.4675 11.5 29.421 14.4083 25.0827 18.9244C24.407 18.2086 23.5827 17.6346 22.6591 17.2518C27.4573 12.0258 34.3461 8.75 42 8.75C49.7262 8.75 56.6727 12.0879 61.4763 17.4003C60.5833 17.8263 59.7944 18.4351 59.1578 19.1782C54.8039 14.5176 48.6541 11.5 42 11.5Z" fill="white"/>
+<circle cx="64.5" cy="23.75" r="4.5" fill="white"/>
+<circle cx="19.9688" cy="23.75" r="4.5" fill="white"/>
+<circle cx="41.5312" cy="59.375" r="4.5" fill="white"/>
+</g>
+</svg>

src/static/img/footer_telegram.svg

@@ -0,0 +1,4 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.05" cx="30" cy="30" r="30" fill="white"/>
+<path d="M44.9031 17.549L39.7723 41.3098C39.3852 42.9868 38.3758 43.4041 36.9413 42.6141L29.1236 36.9571L25.3514 40.5198C24.9339 40.9297 24.5848 41.2725 23.7803 41.2725L24.3419 33.4541L38.8312 20.5974C39.4611 20.0459 38.6945 19.7403 37.852 20.2918L19.9397 31.3672L12.2283 28.9971C10.551 28.4829 10.5206 27.35 12.5775 26.5599L42.74 15.1491C44.1365 14.6348 45.3585 15.4547 44.9031 17.549V17.549Z" fill="white"/>
+</svg>

src/static/img/footer_twitter.svg

@@ -0,0 +1,4 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.05" cx="30" cy="30" r="30" fill="white"/>
+<path d="M47.5 21.0885C46.3048 21.5962 45.0042 21.9615 43.6645 22.1038C45.0472 21.2923 46.0978 20.0115 46.5939 18.4885C45.3167 19.2385 43.8715 19.7885 42.3678 20.0731C41.1492 18.7923 39.4189 18 37.5012 18C33.8102 18 30.8418 20.9462 30.8418 24.5615C30.8418 25.0692 30.9043 25.5769 31.0059 26.0654C25.4792 25.7808 20.5501 23.1808 17.2732 19.2C16.6951 20.1769 16.367 21.2923 16.367 22.5115C16.367 24.7885 17.5427 26.7962 19.3354 27.9769C18.2418 27.9346 17.2107 27.6308 16.3241 27.1423V27.2231C16.3241 30.4115 18.6128 33.0538 21.6633 33.6615C21.1047 33.8038 20.5072 33.8846 19.9096 33.8846C19.476 33.8846 19.0659 33.8423 18.6519 33.7846C19.4956 36.3846 21.9523 38.2731 24.8777 38.3346C22.5889 40.1 19.7221 41.1385 16.6092 41.1385C16.0507 41.1385 15.5351 41.1192 15 41.0577C17.9528 42.9231 21.4563 44 25.2292 44C37.4778 44 44.1801 34.0077 44.1801 25.3346C44.1801 25.05 44.1801 24.7654 44.1606 24.4808C45.4573 23.5462 46.5939 22.3885 47.5 21.0885Z" fill="white"/>
+</svg>