admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复顶部模式时 Logo 组件动态高度失效

Browse Source
This commit is contained in:
pany 2023-07-18 13:36:22 +08:00
parent 8a0b8c5b3a
commit 310ab846fa
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/layouts/components/Logo/index.vue
View File

@ -23,16 +23,10 @@ const bgCloor = computed(() => {
? getCssVariableValue("--v3-header-bg-color") ? getCssVariableValue("--v3-header-bg-color")
: getCssVariableValue("--v3-sidebar-menu-bg-color") : getCssVariableValue("--v3-sidebar-menu-bg-color")
}) })
const logoHeight = computed(() => {
return layoutMode.value !== "top"
? getCssVariableValue("--v3-header-height")
: getCssVariableValue("--v3-navigationbar-height")
})
</script> </script>
<template> <template>
<div class="layout-logo-container" :class="{ collapse: props.collapse }"> <div class="layout-logo-container" :class="{ collapse: props.collapse, 'layout-mode-top': layoutMode === 'top' }">
<transition name="layout-logo-fade"> <transition name="layout-logo-fade">
<router-link v-if="props.collapse" key="collapse" to="/"> <router-link v-if="props.collapse" key="collapse" to="/">
<img :src="logo" class="layout-logo" /> <img :src="logo" class="layout-logo" />
@ -48,8 +42,8 @@ const logoHeight = computed(() => {
.layout-logo-container { .layout-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: v-bind(logoHeight); height: var(--v3-header-height);
line-height: v-bind(logoHeight); line-height: var(--v3-header-height);
background-color: v-bind(bgCloor); background-color: v-bind(bgCloor);
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@ -62,6 +56,11 @@ const logoHeight = computed(() => {
} }
} }
.layout-mode-top {
height: var(--v3-navigationbar-height);
line-height: var(--v3-navigationbar-height);
}
.collapse { .collapse {
.layout-logo { .layout-logo {
width: 32px; width: 32px;