- <template>
- <div
- class="sidebar-logo-container"
- :class="{ collapse: collapse }"
- :style="{
- backgroundColor: sideTheme === 'theme-dark' ? variables.menuLogoBackground : variables.menuLightBackground,
- }"
- >
- <transition name="sidebarLogoFade">
- <a v-if="collapse" key="collapse" class="sidebar-logo-link" @click="gotoMain">
- <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
- 开封海绵城市综合管理平台
- </h1>
- </a>
- <a v-else key="expand" class="sidebar-logo-link" @click="gotoMain">
- <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
- 开封海绵城市综合管理平台
- </h1>
- </a>
- </transition>
- </div>
- </template>
-
- <script setup>
- import variables from '@/assets/styles/variables.module.scss';
- import useSettingsStore from '@/store/modules/settings';
-
- defineProps({
- collapse: {
- type: Boolean,
- required: true,
- },
- });
-
- const settingsStore = useSettingsStore();
- const sideTheme = computed(() => settingsStore.sideTheme);
- const router = useRouter();
-
- function gotoMain() {
- router.push('/door');
- }
- </script>
-
- <style lang="scss" scoped>
- .sidebarLogoFade-enter-active {
- transition: opacity 1.5s;
- }
-
- .sidebarLogoFade-enter,
- .sidebarLogoFade-leave-to {
- opacity: 0;
- }
-
- .sidebar-logo-container {
- position: relative;
- width: 100%;
- height: 60px;
- line-height: 60px;
- background: #2b2f3a;
- text-align: center;
- overflow: hidden;
-
- & .sidebar-logo-link {
- height: 100%;
- width: 100%;
-
- & .sidebar-logo {
- width: 32px;
- height: 32px;
- vertical-align: middle;
- margin-right: 12px;
- }
-
- & .sidebar-title {
- display: inline-block;
- margin: 0;
- color: #fff;
- line-height: 50px;
- vertical-align: middle;
- font-size: 22px;
- font-family: Source Han Sans CN;
- font-weight: bold;
- color: #ffffff;
- }
- }
-
- &.collapse {
- .sidebar-logo {
- margin-right: 0px;
- }
- }
- }
- </style>