<template>
|
<div class="top-nav">
|
<div class="search-area">
|
<i class="el-icon-search"></i>
|
</div>
|
<div class="notify">
|
<i class="el-icon-bell"></i>
|
</div>
|
<div class="user-area" >
|
<el-dropdown placement="bottom" @command="clickItem">
|
<el-avatar size="small" :src="pic"></el-avatar>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<span class="name">admin</span>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
const publicPath= process.env.BASE_URL;
|
export default {
|
data(){
|
return {
|
}
|
},
|
methods:{
|
clickItem(item){
|
if(item==='logout'){
|
this.$message.success('退出系统成功');
|
setTimeout(()=>{
|
this.$router.push('/login');
|
},1000);
|
}
|
}
|
},
|
computed:{
|
pic(){
|
return `${publicPath}images/audio/u73.jpg`
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.top-nav {
|
display: flex;
|
height: 64px;
|
padding-right: 20px;
|
justify-content: flex-end;
|
align-items: center;
|
cursor: pointer;
|
i[class^='el-icon-']{
|
font-size: 20px;
|
padding: 14px;
|
}
|
.user-area{
|
span{
|
vertical-align: middle;
|
}
|
.name{
|
padding: 0 10px;
|
}
|
}
|
}
|
</style>
|
