<script setup>
|
import {ref, computed, watch} from "vue";
|
import {ArrowDown, ArrowUp, Expand, Fold} from "@element-plus/icons-vue";
|
import usePageMenuStore from "@/stores/pageMenu";
|
import slideMenu from "@/views/mainLayout/js/slideMenu";
|
import headerInfo from "@/views/mainLayout/js/headerInfo";
|
headerInfo();
|
const {isCollapse} = slideMenu();
|
const pageMenuStore = usePageMenuStore();
|
const changeMenuState = ()=>{
|
pageMenuStore.changeCollapse(!isCollapse.value);
|
}
|
const isTechPage = computed(()=>{
|
return pageMenuStore.isTechPage;
|
});
|
|
const sysTitle = computed(()=>{
|
return pageMenuStore.sysTitle;
|
});
|
|
import userDropdownModule from "@/views/moudle/user/userDropdown";
|
const {isVisible, visibleChange, commandClick} = userDropdownModule();
|
</script>
|
|
<template>
|
<div class="main-header-wrapper" :class="{'is-tech-page': isTechPage}">
|
<span class="menu-state-icon" @click="changeMenuState">
|
<el-icon size="20">
|
<Fold v-if="!isCollapse" />
|
<Expand v-else/>
|
</el-icon>
|
</span>
|
<div class="main-header-wrapper-content">
|
<span style="margin-left: 54px" v-if="isTechPage">
|
{{ sysTitle }}
|
</span>
|
</div>
|
<div class="page-header-right">
|
<div class="hdw-avatar">
|
<el-dropdown @visible-change="visibleChange" @command="commandClick">
|
<div class="hdw-avatar-wrapper">
|
<span class="hdw-avatar-icon">
|
<el-icon size="18"><Avatar /></el-icon>
|
</span>
|
<span class="hdw-avatar-text">admin</span>
|
<el-icon size="16">
|
<ArrowUp v-if="isVisible" />
|
<ArrowDown v-else />
|
</el-icon>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="passwordChange">密码修改</el-dropdown-item>
|
<el-dropdown-item command="outSystem">安全退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.main-header-wrapper {
|
display: flex;
|
padding: 8px 8px;
|
color: #000000;
|
.main-header-wrapper-content {
|
flex: 1;
|
text-align: center;
|
font-size: 1.5rem;
|
font-weight: bold;
|
}
|
.menu-state-icon {
|
display: inline-block;
|
text-align: center;
|
padding: 4px 8px;
|
cursor: pointer;
|
}
|
.menu-state-icon:hover {
|
background-color: #b0c7f1;
|
}
|
&.is-tech-page {
|
padding: 16px 8px;
|
background: #011f39ff url("@/assets/images/header_bg.png") no-repeat;
|
background-size: 100% 100%;
|
color: #00feff;
|
.menu-state-icon:hover {
|
background-color: #4ba1fa;
|
}
|
|
.hdw-avatar-wrapper {
|
color: #00feff;
|
}
|
}
|
}
|
|
.page-header-right {
|
.hdw-avatar-text {
|
margin-left: 4px;
|
margin-right: 4px;
|
vertical-align: center;
|
}
|
}
|
.hdw-avatar-wrapper {
|
cursor: pointer;
|
white-space: nowrap;
|
}
|
.hdw-avatar-wrapper:focus-visible {
|
outline: none;
|
}
|
|
.hdw-avatar-icon {
|
display: inline-flex;
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
justify-content: center;
|
background-color: #4ba1fa;
|
align-items: center;
|
color: #032c8f;
|
vertical-align: middle;
|
}
|
</style>
|
