<template>
|
<!-- 头部 -->
|
<el-header>
|
<!-- 展开控制按钮 -->
|
<!-- <hamburger :is-active="opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
|
<!-- 右侧菜单 -->
|
<div class="header-title">
|
<div class="bell">
|
<el-icon class="el-icon-bell" style="color: white"></el-icon>
|
</div>
|
<div class="userinfo">
|
<div class="avatar"></div>
|
<span class="username">admin</span>
|
</div>
|
<div class="loginout">退出登录</div>
|
</div>
|
</el-header>
|
</template>
|
|
<script>
|
import hamburger from "@/components/hamburger"
|
export default {
|
data(){
|
return {
|
opened:false
|
}
|
},
|
components:{
|
hamburger
|
}
|
};
|
</script>
|
|
<style lang="scss" >
|
.el-header {
|
background-color: #071a38;
|
color: #333;
|
text-align: center;
|
line-height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding: 0;
|
.header-title {
|
display: flex;
|
align-items: center;
|
width: 280px;
|
justify-content: space-evenly;
|
.bell {
|
background-color: #00d1fa;
|
width: 25px;
|
height: 25px;
|
border-radius: 5px;
|
text-align: center;
|
line-height: 25px;
|
}
|
.userinfo {
|
width: 100xp;
|
display: flex;
|
align-items: center;
|
.avatar {
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
background-image: url("@/assets/imgs/user/default-avatar.jpg");
|
background-size: cover;
|
}
|
.username {
|
margin: 0 5px;
|
color: #22d3eb;
|
font-size: 14px;
|
}
|
}
|
.loginout {
|
color: #22d3eb;
|
font-size: 14px;
|
}
|
}
|
}
|
</style>
|
