<template>
    <div class="isMo">
        <div class="box">
            <img class="logo-cube" :src="logoCube" />

            <span class="cap">請在電腦端瀏覽網站</span>
            <span class="sub">Please browse the website from your computer</span>
        </div>

    </div>
</template>
<script setup>
import logoCube from '../assets/mobile_logo.png'
</script>
<style scoped lang="scss">
.isMo {
    background: white;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .box {
        margin-top: -30vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #000;
        font-size: 14px;

        img {
            margin-bottom: 20px;
        }

        .cap {
            font-weight: bolder;
            font-size: 18px;
            line-height: 32px;

        }
    }
}
</style>