de-net/src/view/popup/components/login.vue

<template>
    <div class="login-wrapper">
        <div class="content">
            <img :src="require('@/assets/svg/icon-login-denet-logo.svg')" class="logo">
            <div class="product-name">
                DeNet
            </div>
        </div>

        <div class="login-btn" @click="login">
            <img :src="require('@/assets/svg/icon-login-twitter-white.svg')" 
            class="login-btn-icon">
            Login with Twitter
        </div>
    </div>
</template>     

<script setup>
import {defineEmits} from 'vue';

let emits = defineEmits(['loginAction']);

const login = () => {
    emits('loginAction', {})
}
</script>

<style lang='scss' scoped>
.login-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    .content {
        text-align: center;
        margin-top: 150px;
        margin-bottom: 105px;
        .logo {
            margin-bottom: 15px;
        }
        .product-name {
            font-weight: 600;
            font-size: 34px;
        }
    }
    .login-btn {
        background: #1D9BF0;
        border-radius: 100px;
        padding: 18px 60px;
        box-sizing: border-box;
        width: fit-content;
        display: flex;
        align-items: center;
        font-weight: 500;   
        font-size: 18px;
        color: #fff;
        margin: 0 auto;
        cursor: pointer;

        .login-btn-icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }
    }
}
</style>