de-net-website/src/components/footer.vue

<template>
    <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>
</template>

<script lang="ts" setup>
import { postRequest } from '../static/http'

const twitter = ()  => {
    window.open(`https://twitter.com/denet2022`);
}

const telegram = () => {
    window.open(`https://t.me/denetpro`);
}

const discord = () => {
    window.open(`https://discord.gg/wZSz9p8ddG`);
}
</script>

<style lang="less" scoped>
.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;
    }
    .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;
            }
            .font {
                overflow: hidden;
                font-size: 0.101rem;
                margin-top: 0.078rem;
                color: rgba(255, 255, 255, .4);
            }
            a {
                text-decoration: none;
            }
        }
    }
}

@media screen and (max-width:600px) {
    .footer {
        height: 1.8rem;
        .content {
            width: 9.5rem;
            .logo {
                width: 3rem;
            }
            .link {
                .item {
                    width: 1.1rem;
                    img {
                        width: .8rem;
                    }
                    .font {
                        font-size: 0.301rem;
                        margin-top: -0.1rem;
                    }
                }
            }
        }
        
    }
}
</style>