de-net-website/src/pages/index.vue

<template>
    <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" />
        <div class="goods"></div>
        <div class="install" @click="install">Install Now</div>
    </div>
    <div class="second-screen">
        <div class="block">
            <div class="showImg">
                <img class="img" src="../static/img/second_img1.png" />
                <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">
                    <div>Grow and engage followers</div>
                    <div>via Giveaways</div>
                </div>
                <div class="add" @click="install">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" @click="install">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>
        <div class="flash">
            <img class="middle" src="../static/img/three_img01.svg" />
            <img class="rotate" src="../static/img/three_img02.svg" />
        </div>
    </div>
    <div class="four-screen">
        <div class="title">APPLICATION</div>
        <div class="list">
            <div class="item wow" data-animate="fadeInUp" style="animation-duration: 1s;">
                <img src="../static/img/four_img1.png" alt="Marketing Growth" />
            </div>
            <div class="item wow" data-animate="fadeInUp" style="animation-duration: 1.2s;">
                <img src="../static/img/four_img2.png" alt="Active Conversions" />
            </div>
            <div class="item wow" data-animate="fadeInUp" style="animation-duration: 1.4s;">
                <img src="../static/img/four_img3.png" alt="Airdrop" />
            </div>
        </div>
    </div>
    <div class="five_screen">
        <div class="title">ROADMAP</div>
        <img class="img wow" data-animate="flipInX" 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>
    <footer-layer></footer-layer>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRoute } from 'vue-router'
import { setStorage, storageKey } from '../static/utils/storage'
import headerLayer from '../components/header.vue';
import footerLayer from '../components/footer.vue';

const route = useRoute()

const install = () => {
    window.open(`https://chrome.google.com/webstore/detail/denet/inlfbeejfdgkknpiodhemfcokbdgofja`);
}

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);
        });
    }

    let str = route.query && route.query.params || ''
    if (str) {
        // @ts-ignore
        let params = JSON.parse(atob(str));
        setStorage(storageKey.userInfo, params)
        location.href = `/nft/list`;
    }
})
</script>

<style lang="less">
// 1rem = 128px
.first-screen {
    position:relative;
    overflow: hidden;
    height: 6.171rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F7FE 94.31%);
    .text {
        position: absolute;
        width: 4.0625rem;
        top: 1.8671rem;
        left: 0.703rem;
    }
    .www {
        position: absolute;
        right: 0.703rem;
        bottom: 1.218rem;
        width: 6.921rem;
    }
    .install {
        position: absolute;
        top: 3.093rem;
        left: 0.703rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.406rem;
        height: 0.4062rem;
        cursor: pointer;
        color: #fff;
        font-size: 0.156rem;
        border-radius: 52px;
        background: #1D9BF0;
    }
    .goods {
        position: absolute;
        top: 0;
        right: 2.595rem;
        width: 3.203rem;
        height: 3.945rem;
        animation: scroll 25s linear infinite;
        background-size: 100% auto;
        background-image: url('../static/img/goods.png');
    }
}

.second-screen {
    overflow: hidden;
    height: 11.718rem;
    background-color: #fff;
    .block {
        clear: both;
        display: flex;
        justify-content: center;
        .showImg {
            position: relative;
            width: 4.812rem;
            height: 3.706rem;
            margin-top: 1.203rem;
            .img {
                width: 100%;
                height: 100%;
            }
            .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 {
            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;
                cursor: pointer;
                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;
                cursor: pointer;
                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;
    }
    .flash {
        position: relative;
        width: 3.437rem;
        height: 3.437rem;
        margin-left: 0.9rem;
        .middle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .rotate {
            width: 100%;
            height: 100%;
            animation: rotate 3s linear infinite;
        }
    }
}

.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;
    }
}

@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;
        }
        .goods {
            right: 0.895rem;
        }
        .www {
            right: 0;
        }
    }
    .second-screen {
        .block {
            .showText {
                margin-top: 1.6rem;
                .font {
                    font-size: 0.4rem;
                }
                .add {
                    font-size: 0.4rem;
                    width: 2rem;
                    height: 0.6rem;
                }
            }
            .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;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .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 {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}
@keyframes scroll {
    0% {
        background-position: 0 37.765rem;
    }
    100% {
        background-position: 0 0;
    }
}
</style>