|
|
@@ -1,11 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="header">
|
|
|
- <img class="logo" src="../static/img/logo.svg" alt="DeNet" />
|
|
|
- <div class="down">
|
|
|
- <div class="text" @click="install">Install</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="header-place"></div>
|
|
|
+ <header-layer></header-layer>
|
|
|
<div class="first-screen">
|
|
|
<img class="text" src="../static/img/first_font.svg" alt="DeNet BRIDGE FROM WEB2 TO WEB3" />
|
|
|
<img class="www" src="../static/img/first_www.png" alt="DeNet" />
|
|
|
@@ -16,7 +10,10 @@
|
|
|
<div class="block">
|
|
|
<div class="showImg">
|
|
|
<img class="img" src="../static/img/second_img1.png" />
|
|
|
- <video class="video" autoplay muted loop src="../static/img/second_redbag.mp4"></video>
|
|
|
+ <div class="redBag animate__animated animate__infinite animate__bounceIn animate__slower" style="">
|
|
|
+ <img class="gif" src="../static/img/second_redbag.gif" />
|
|
|
+ <img class="bg" src="../static/img/second_redbag.png" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="showText">
|
|
|
<div class="font">
|
|
|
@@ -70,48 +67,17 @@
|
|
|
<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" @click="twitter">
|
|
|
- <img src="../static/img/footer_twitter.svg" />
|
|
|
- <div class="font">Twitter</div>
|
|
|
- </div>
|
|
|
- <div class="item" @click="telegram">
|
|
|
- <img src="../static/img/footer_telegram.svg" />
|
|
|
- <div class="font">Telegram</div>
|
|
|
- </div>
|
|
|
- <div class="item" @click="discord">
|
|
|
- <img src="../static/img/footer_discord.svg" />
|
|
|
- <div class="font">Discord</div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <a href="mailto:denet.web3@gmail.com">
|
|
|
- <img src="../static/img/footer_email.svg" />
|
|
|
- <div class="font">Email</div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <footer-layer></footer-layer>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { onMounted } from 'vue';
|
|
|
+import headerLayer from '../components/header.vue';
|
|
|
+import footerLayer from '../components/footer.vue';
|
|
|
|
|
|
function install() {
|
|
|
window.open(`https://chrome.google.com/webstore/detail/denet/inlfbeejfdgkknpiodhemfcokbdgofja`);
|
|
|
}
|
|
|
-function twitter() {
|
|
|
- window.open(`https://twitter.com/denet2022`);
|
|
|
-}
|
|
|
-function telegram() {
|
|
|
- window.open(`https://t.me/denetpro`);
|
|
|
-}
|
|
|
-function discord() {
|
|
|
- window.open(`https://discord.gg/wZSz9p8ddG`);
|
|
|
-}
|
|
|
|
|
|
onMounted(() => {
|
|
|
const el = document.querySelectorAll('.wow') || [];
|
|
|
@@ -143,43 +109,6 @@ onMounted(() => {
|
|
|
|
|
|
<style lang="less">
|
|
|
// 1rem = 128px
|
|
|
-.header {
|
|
|
- position: fixed;
|
|
|
- z-index: 3;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- background-color: #ffffff;
|
|
|
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
|
|
|
- .logo {
|
|
|
- height: 38px;
|
|
|
- margin-left: 26px;
|
|
|
- }
|
|
|
- .down {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 120px;
|
|
|
- height: 38px;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 26px;
|
|
|
- border-radius: 100px;
|
|
|
- background: #1D9BF0;
|
|
|
- .text {
|
|
|
- color: #fff;
|
|
|
- font-size: 15px;
|
|
|
- margin-top: -2px;
|
|
|
- }
|
|
|
- }
|
|
|
- &-place {
|
|
|
- height: 60px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
.first-screen {
|
|
|
position:relative;
|
|
|
overflow: hidden;
|
|
|
@@ -241,13 +170,24 @@ onMounted(() => {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
- .video {
|
|
|
+ .redBag {
|
|
|
position: absolute;
|
|
|
top: 0.83rem;
|
|
|
left: 1.75rem;
|
|
|
z-index: 2;
|
|
|
width: 1.5rem;
|
|
|
height: 2rem;
|
|
|
+ .gif {
|
|
|
+ position: absolute;
|
|
|
+ top: 0.9rem;
|
|
|
+ left: 0.4rem;
|
|
|
+ width: 0.781rem;
|
|
|
+ height: 0.781rem;
|
|
|
+ }
|
|
|
+ .bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.showText {
|
|
|
@@ -421,45 +361,69 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.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: 1.703rem;
|
|
|
- height: 0.578rem;
|
|
|
+@media screen and (max-width:600px) {
|
|
|
+ .first-screen {
|
|
|
+ .text {
|
|
|
+ width: 5.6rem;
|
|
|
+ top: 1rem;
|
|
|
+ }
|
|
|
+ .install {
|
|
|
+ top: 2.7rem;
|
|
|
+ width: 3rem;
|
|
|
+ height: 0.8rem;
|
|
|
+ font-size: 0.4rem;
|
|
|
+ }
|
|
|
}
|
|
|
- .link {
|
|
|
- display: flex;
|
|
|
- .item {
|
|
|
- margin: 0 0.093rem;
|
|
|
- width: 0.468rem;
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- img {
|
|
|
- width: 0.468rem;
|
|
|
- margin: auto;
|
|
|
- text-align: center;
|
|
|
+ .second-screen {
|
|
|
+ .block {
|
|
|
+ .showText {
|
|
|
+ margin-top: 1.6rem;
|
|
|
+ .font {
|
|
|
+ font-size: 0.4rem;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ font-size: 0.4rem;
|
|
|
+ width: 2rem;
|
|
|
+ height: 0.6rem;
|
|
|
+ }
|
|
|
}
|
|
|
- .font {
|
|
|
+ .taskText {
|
|
|
+ .font {
|
|
|
+ font-size: 0.4rem;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ font-size: 0.4rem;
|
|
|
+ width: 2rem;
|
|
|
+ height: 0.6rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .three-screen {
|
|
|
+ .article {
|
|
|
+ font-size: 0.4rem;
|
|
|
+ .title {
|
|
|
+ font-size: 0.5rem;
|
|
|
overflow: hidden;
|
|
|
- font-size: 0.101rem;
|
|
|
- margin-top: 0.078rem;
|
|
|
- color: rgba(255, 255, 255, .4);
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
}
|
|
|
- a {
|
|
|
- text-decoration: none;
|
|
|
+ .line {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .four-screen, .five_screen, .six_screen {
|
|
|
+ .title {
|
|
|
+ font-size: 0.6rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
@keyframes rotate {
|
