91 lines
2.4 KiB
Vue
91 lines
2.4 KiB
Vue
<template>
|
|
<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange" :style="{backgroundColor: setBackgroundColor}">
|
|
<span :style="{color:setFontColor}">{{ themeConfig.globalTitle }}</span>
|
|
</div>
|
|
<div class="layout-logo-size" v-else @click="onThemeConfigChange">
|
|
<img :src="logoMini" class="layout-logo-size-img"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="layoutLogo">
|
|
import {useThemeConfig} from '/@/stores/themeConfig';
|
|
import logoMini from '/@/assets/logo-mini.svg';
|
|
|
|
// 定义变量内容
|
|
const storesThemeConfig = useThemeConfig();
|
|
const {themeConfig} = storeToRefs(storesThemeConfig);
|
|
|
|
// 设置 logo 的显示。classic 经典布局默认显示 logo
|
|
const setShowLogo = computed(() => {
|
|
let {isCollapse, layout} = themeConfig.value;
|
|
return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
|
|
});
|
|
|
|
// 设置 title 的显示颜色。使用顶栏配置，与顶部导航栏保持一致
|
|
const setFontColor = computed(() => {
|
|
// let {layout} = themeConfig.value;
|
|
// return layout === 'classic' || layout === 'transverse' ? `var(--next-bg-topBarColor)` : 'var(--el-color-primary)';
|
|
return themeConfig.value.topBarColor;
|
|
});
|
|
|
|
// 设置背景色。使用顶栏配置，与顶部导航栏保持一致
|
|
const setBackgroundColor = computed(() => {
|
|
return themeConfig.value.topBar;
|
|
});
|
|
|
|
// logo 点击实现菜单展开/收起
|
|
const onThemeConfigChange = () => {
|
|
if (themeConfig.value.layout === 'transverse') return false;
|
|
themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.layout-logo {
|
|
width: 200px;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
animation: logoAnimation 0.3s ease-in-out;
|
|
// 背景色通过内联样式动态设置，使用顶栏配置
|
|
|
|
span {
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
// 文字颜色通过内联样式动态设置，使用顶栏配置
|
|
}
|
|
|
|
&:hover {
|
|
span {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-logo-size {
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
cursor: pointer;
|
|
animation: logoAnimation 0.3s ease-in-out;
|
|
|
|
&-img {
|
|
width: 20px;
|
|
margin: auto;
|
|
}
|
|
|
|
&:hover {
|
|
img {
|
|
animation: logoAnimation 0.3s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
</style>
|