- <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" :href='hrefUrlHome'>
- <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
- <h1
- class="sidebar-title"
- :style="{
- color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor,
- }"
- >
- {{ title }}
- </h1>
- </a>
- <a v-else key="expand" class="sidebar-logo-link" :href='hrefUrlHome'>
- <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
- <h1
- class="sidebar-title"
- :style="{
- color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor,
- }"
- >
- {{ title }}
- </h1>
- </a>
- </transition>
- </div>
- </template>
- <script setup>
- import variables from '@/assets/styles/variables.module.scss';
- // import logo from "@/assets/images/login/logo.png";
- import useSettingsStore from '@/store/modules/settings';
- defineProps({
- collapse: {
- type: Boolean,
- required: true,
- },
- });
- const title = ref('智慧外呼');
- const settingsStore = useSettingsStore();
- const sideTheme = computed(() => settingsStore.sideTheme);
- const hrefUrlHome=`${window.location.origin}/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-weight: bold;
- color: #ffffff;
- }
- }
- &.collapse {
- .sidebar-logo {
- margin-right: 0px;
- }
- }
- }
- </style>