|
- <script lang="ts" setup>
- defineProps({
- collapse: {
- type: Boolean,
- required: true,
- },
- });
-
- const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
- </script>
-
- <template>
- <div class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
- <transition name="sidebarLogoFade">
- <router-link
- style="position: relative"
- v-if="collapse"
- key="collapse"
- class="h-full w-full flex items-center left-top-box"
- to="/"
- >
- <img
- src="../../../assets/img/left-top-logo.png"
- class="left-top-logo boxCentreImg"
- />
- </router-link>
-
- <router-link
- v-else
- style="position: relative"
- key="expand"
- class="h-full w-full flex items-center left-top-box"
- to="/"
- >
- <img
- src="../../../assets/img/left-top-logo.png"
- class="left-top-logo boxCentreImg"
- />
- </router-link>
- </transition>
- </div>
- </template>
-
- <style lang="scss" scoped>
- // https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component
-
- .left-top-box {
- height: 80px;
- // background-color: #1b213a;
- background-color: #000;
- }
-
- .left-top-logo {
- width: 180px;
- height: 40px;
- padding: 5px 0 0 10px;
- }
-
- .sidebarLogoFade-enter-active {
- transition: opacity 2s;
- }
-
- .sidebarLogoFade-leave-active,
- .sidebarLogoFade-enter-from,
- .sidebarLogoFade-leave-to {
- opacity: 0;
- }
- </style>
|