提交 556afe94 authored 作者: lidongxu's avatar lidongxu

style(layout/sidebar/logo.vue): 内容页 logo 修改

去掉标题,只用 logo 图片,并调整宽高样式包括折叠后的样式
上级 f5623fb0
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title">{{ title }}</h1> <!-- <h1 v-else class="sidebar-title">{{ title }}</h1> -->
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title">{{ title }}</h1> <!-- <h1 class="sidebar-title">{{ title }}</h1> -->
</router-link> </router-link>
</transition> </transition>
</div> </div>
...@@ -25,7 +25,7 @@ defineProps({ ...@@ -25,7 +25,7 @@ defineProps({
} }
}) })
const title = import.meta.env.VITE_APP_TITLE; // const title = import.meta.env.VITE_APP_TITLE;
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme); const sideTheme = computed(() => settingsStore.sideTheme);
...@@ -61,21 +61,25 @@ const getLogoTextColor = computed(() => { ...@@ -61,21 +61,25 @@ const getLogoTextColor = computed(() => {
.sidebar-logo-container { .sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 50px; // height: 50px;
line-height: 50px; // line-height: 50px;
height: 80px;
line-height: 80px;
background: v-bind(getLogoBackground); background: v-bind(getLogoBackground);
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
& .sidebar-logo-link { & .sidebar-logo-link {
height: 100%; // height: 100%;
width: 100%; width: 100%;
& .sidebar-logo { & .sidebar-logo {
width: 32px; // width: 32px;
height: 32px; // height: 32px;
width: 90px;
height: 60px;
vertical-align: middle; vertical-align: middle;
margin-right: 12px; // margin-right: 12px;
} }
& .sidebar-title { & .sidebar-title {
...@@ -92,6 +96,8 @@ const getLogoTextColor = computed(() => { ...@@ -92,6 +96,8 @@ const getLogoTextColor = computed(() => {
&.collapse { &.collapse {
.sidebar-logo { .sidebar-logo {
width: 42px;
height: 28px;
margin-right: 0px; margin-right: 0px;
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论