| | |
| | | <template>
|
| | | <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
| | | <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
|
| | | <transition name="sidebarLogoFade">
|
| | | <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
| | | <img v-if="logo" :src="logo" class="sidebar-logo" />
|
| | | <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
|
| | | <h1 v-else class="sidebar-title">{{ title }}</h1>
|
| | | </router-link>
|
| | | <router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
| | | <img v-if="logo" :src="logo" class="sidebar-logo" />
|
| | | <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
|
| | | <h1 class="sidebar-title">{{ title }}</h1>
|
| | | </router-link>
|
| | | </transition>
|
| | | </div>
|
| | | </template>
|
| | |
|
| | | <script setup>
|
| | | import variables from '@/assets/styles/variables.module.scss'
|
| | | import logo from '@/assets/logo/logo.png'
|
| | | import useSettingsStore from '@/store/modules/settings'
|
| | | import variables from '@/assets/styles/variables.module.scss'
|
| | |
|
| | | defineProps({
|
| | | collapse: {
|
| | |
| | | }
|
| | | })
|
| | |
|
| | | const title = ref('若依管理系统');
|
| | | const settingsStore = useSettingsStore();
|
| | | const sideTheme = computed(() => settingsStore.sideTheme);
|
| | | const title = import.meta.env.VITE_APP_TITLE
|
| | | const settingsStore = useSettingsStore()
|
| | | const sideTheme = computed(() => settingsStore.sideTheme)
|
| | |
|
| | | // 获取Logo背景色
|
| | | const getLogoBackground = computed(() => {
|
| | | if (settingsStore.isDark) {
|
| | | return 'var(--sidebar-bg)'
|
| | | }
|
| | | return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
|
| | | })
|
| | |
|
| | | // 获取Logo文字颜色
|
| | | const getLogoTextColor = computed(() => {
|
| | | if (settingsStore.isDark) {
|
| | | return 'var(--sidebar-text)'
|
| | | }
|
| | | return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText
|
| | | })
|
| | | </script>
|
| | |
|
| | | <style lang="scss" scoped>
|
| | | @import '@/assets/styles/variables.module.scss';
|
| | |
|
| | | .sidebarLogoFade-enter-active {
|
| | | transition: opacity 1.5s;
|
| | | }
|
| | |
| | | width: 100%;
|
| | | height: 50px;
|
| | | line-height: 50px;
|
| | | background: #2b2f3a;
|
| | | background: v-bind(getLogoBackground);
|
| | | text-align: center;
|
| | | overflow: hidden;
|
| | |
|
| | |
| | | & .sidebar-title {
|
| | | display: inline-block;
|
| | | margin: 0;
|
| | | color: #fff;
|
| | | color: v-bind(getLogoTextColor);
|
| | | font-weight: 600;
|
| | | line-height: 50px;
|
| | | font-size: 14px;
|