106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
import { ElMessage } from 'element-plus'
|
|
import logo from '@renderer/assets/logo.png'
|
|
import avatar from '@renderer/assets/avatar.png'
|
|
const isCollapse = ref(true)
|
|
// 获取父组件传递过来的数据
|
|
const showIcon = defineProps({
|
|
isCollapse: Boolean
|
|
})
|
|
|
|
// 获取父组件自定义的事件
|
|
const emit = defineEmits(['changeAside'])
|
|
|
|
// 自定义按钮点击事件，侧边栏的收缩按钮
|
|
const collapseAside = () => {
|
|
emit('changeAside')
|
|
}
|
|
|
|
// 登出按钮
|
|
const LogOut = () => {}
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div>
|
|
<el-header style="display: flex; font-size: 16px">
|
|
<div class='header-left'>
|
|
<el-avatar :size="40" :src="logo" />
|
|
</div>
|
|
<!-- <div class='haeder-menu'>-->
|
|
<!-- <el-menu-->
|
|
<!-- router="true"-->
|
|
<!-- >-->
|
|
<!-- <el-menu-item index="/">系统工具</el-menu-item>-->
|
|
<!-- </el-menu>-->
|
|
<!-- </div>-->
|
|
<div class="haeder-right">
|
|
<div class="block" style="margin-right: 10px">
|
|
<el-icon><QuestionFilled /></el-icon>
|
|
</div>
|
|
<div class="block" style="margin-right: 10px">
|
|
<el-icon><Bell /></el-icon>
|
|
</div>
|
|
<el-dropdown trigger="click">
|
|
<div class="el-dropdown-link" style="cursor: pointer">
|
|
<el-icon :size='16' style='line-height: 30px'><User /></el-icon>
|
|
</div>
|
|
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>admin</el-dropdown-item>
|
|
<!-- <el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>-->
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</el-header>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped>
|
|
.el-header {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
color: var(--el-text-color-primary);
|
|
box-shadow: var(--el-box-shadow);
|
|
justify-content: space-between;
|
|
}
|
|
.header-left{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 80px;
|
|
}
|
|
.haeder-menu{
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
.haeder-right{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.toolbar {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
right: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.el-dropdown-menu__item {
|
|
width: 120px;
|
|
}
|
|
|
|
.icon-color {
|
|
color: white;
|
|
}
|
|
</style>
|