hk-school/src/components/Logo.vue

<template>
    <div class="logo">

        <!-- <div class="logo_s">
            <span>龍翔官立中學</span>
        </div>
        <div class="logo_h">
            <span>Lung Cheung Government Secondary School</span>

        </div> -->
        <img class="logo-cube" v-if="id == 'home'" :src="logoCube" />
    </div>
</template>
<script setup>
import logoCube from '../assets/logo.png'
defineProps({
  id: {
    type: String,
    default: 'home',
  },
});
</script>
<style lang="scss">
.logo {
    width: 463px;
    position: fixed;
    z-index: 1000;
    top: 30px;
    left: 30px;
    border-radius: 10px;


    .logo-cube {
        position: absolute;
        z-index: 1001;
        top: 10px;
        left: -15px;
        }

    .logo_s {
        width: 463px;
        height: 50px;
        background: rgba(1, 144, 64, 0.9);
        text-align: left;
        text-indent: 110px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        span {
            line-height: 50px;
            font-size: 28px;
        }
    }

    .logo_h {
        height: 30px;
        text-indent: 110px;
        background: rgba(255, 255, 255, 0.9);
        color: black;
        text-align: left;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        span {
            line-height: 30px;
            font-size: 15px;
        }
    }
}
</style>