parent
7cdf4f5dc1
commit
e10d975969
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="layout-title" :class="{ collapse: collapseMenu }">
|
||||
<div class="title">{{ config.projectName }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import config from '@/configs';
|
||||
const store = useStore();
|
||||
const activeAsideName = computed(() => store.getters['layout/activeAsideName']);
|
||||
const collapseMenu = computed(() => store.getters['layout/collapseMenu']);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.layout-title {
|
||||
width: @layout-menu-width;
|
||||
height: 100%;
|
||||
background-color: @layout-menu-bgc;
|
||||
padding: 0 @layout-space;
|
||||
transition: width 0.3s;
|
||||
color: @layout-title-fc;
|
||||
&.collapse {
|
||||
width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
:deep(*) {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
}
|
||||
:deep(*) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: @layout-header-height;
|
||||
line-height: @layout-header-height;
|
||||
font-size: @layout-h2;
|
||||
text-align: center;
|
||||
.text-overflow();
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue