102 lines
2.2 KiB
Vue
102 lines
2.2 KiB
Vue
<template>
|
|
<div class="layout-header-placeholder" :style="stylePlaceholder()"></div>
|
|
<div
|
|
class="layout-header"
|
|
:class="{
|
|
'fixed-header': themeConfig.fixedHeader,
|
|
collapse: themeConfig.fixedHeader && isCollapse,
|
|
'no-collapse': themeConfig.fixedHeader && !isCollapse,
|
|
}"
|
|
>
|
|
<div class="layout-header-inner">
|
|
<div class="layout-header-left">
|
|
<Hamburger />
|
|
<Breadcrumb />
|
|
</div>
|
|
<div class="layout-header-right">
|
|
<ScreenFull class="layout-header-tool" />
|
|
<Avatar class="layout-header-tool" />
|
|
</div>
|
|
</div>
|
|
<TagsView v-if="themeConfig.showTag" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="layout-header">
|
|
import { computed } from 'vue';
|
|
import { useSettingStore } from '@/store/modules/setting';
|
|
import { setPx } from '@/utils';
|
|
import Hamburger from '../Hamburger';
|
|
import Breadcrumb from '../Breadcrumb';
|
|
import ScreenFull from '../ScreenFull';
|
|
import Avatar from '../Avatar';
|
|
import TagsView from '../TagsView';
|
|
|
|
const SettingStore = useSettingStore();
|
|
|
|
// 主题配置
|
|
const themeConfig = computed(() => SettingStore.themeConfig);
|
|
const isCollapse = computed(() => !SettingStore.isCollapse);
|
|
|
|
const stylePlaceholder = () => {
|
|
return { height: themeConfig.value.showTag ? setPx(90) : setPx(50) };
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.layout-header {
|
|
width: 100%;
|
|
background: white;
|
|
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
|
|
transition: width 0.28s;
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
&.fixed-header {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 9;
|
|
}
|
|
&.collapse {
|
|
width: calc(100% - 60px);
|
|
}
|
|
&.no-collapse {
|
|
width: calc(100% - 240px);
|
|
}
|
|
&-placeholder {
|
|
height: 50px;
|
|
}
|
|
&-inner {
|
|
@include flex-row;
|
|
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 10px 0 0;
|
|
width: 100%;
|
|
height: 50px;
|
|
border-bottom: 1px solid #eeeeee;
|
|
box-sizing: border-box;
|
|
}
|
|
&-left {
|
|
@include flex-row;
|
|
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
&-right {
|
|
@include flex-row;
|
|
|
|
align-items: center;
|
|
}
|
|
&-tool {
|
|
margin-right: 10px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
:deep(.el-icon) {
|
|
font-size: 20px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
</style>
|