<template>
|
<!-- 头部 -->
|
<el-header>
|
<!-- 左侧菜单 -->
|
<div class="header-left">
|
<div class="menu-left__item" v-for="(item,index) in menuLeftList" :key="item.id" @click="changeActive(index)">
|
<span :class="item.checked ? 'my-active':''">{{item.label}}</span>
|
</div>
|
</div>
|
<!-- 右侧菜单 -->
|
<div class="header-right">
|
<!-- 搜索框 -->
|
<div class="menu-right__item search">
|
<el-input suffix-icon="el-icon-search" v-model="keyword" placeholder="请输入搜索内容"></el-input>
|
</div>
|
<!-- 登录用户 -->
|
<div class="menu-right__item user" @mousemove="flag.user=true" @mouseleave="flag.user=false">
|
<el-avatar :size="20" :src="user.icon" v-if="user.icon"></el-avatar>
|
<el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else>
|
</el-avatar>
|
<span style="padding: 0 5px;">{{user.username? user.username:'Admin'}}</span>
|
<i class="el-icon-arrow-down"></i>
|
<!-- 用户操作 -->
|
<div class="user-card" v-if="flag.user" @mouseleave="flag.user = false">
|
<el-card class="box-card">
|
<div class="user-card__item">修改密码</div>
|
<div style="margin-top: 10px;" class="user-card__item">基本信息</div>
|
</el-card>
|
</div>
|
</div>
|
<!-- 消息 -->
|
<div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave=" flag.message = false ">
|
<el-tooltip effect="dark" content="消息中心" placement="bottom-end" :hide-after="600">
|
<el-badge :value="50" :max="99" class="item">
|
<i class="el-icon-message-solid"></i>
|
</el-badge>
|
</el-tooltip>
|
<!-- 消息操作 -->
|
<div class="message-card" v-if="flag.message" @mouseleave=" flag.message = false ">
|
<el-card class="box-card">
|
<div class="card-header">
|
<span>消息中心</span>
|
<el-button type="text">接收设置</el-button>
|
</div>
|
<div v-for="item in menuMessageList" :key="item.id" class="message-card__item">
|
<span class="label">{{item.label}}</span>
|
<span>({{item.num}})</span>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
<!-- 设置 -->
|
<div class="menu-right__item btn">
|
<el-tooltip effect="dark" content="账户设置" placement="bottom-end" :hide-after="1000">
|
<i class="el-icon-s-tools"></i>
|
</el-tooltip>
|
</div>
|
<!-- 退出登录 -->
|
<div class="menu-right__item btn" @click="loginout">
|
<el-tooltip effect="dark" content="退出登录" placement="bottom-end" :hide-after="1000">
|
<i class="el-icon-switch-button"></i>
|
</el-tooltip>
|
</div>
|
</div>
|
</el-header>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
menuLeftList: [
|
{
|
label: '驾驶舱',
|
checked: true,
|
url: '',
|
id: '1f'
|
},
|
{
|
label: '视频巡查',
|
checked: false,
|
url: '',
|
id: '2f'
|
},
|
{
|
label: '执法管理',
|
checked: false,
|
url: '',
|
if: '3f',
|
},
|
],
|
flag: {
|
user: false,
|
message: false
|
},
|
user: '',
|
menuMessageList: [
|
{
|
label: '全部消息',
|
num: 10,
|
id: '1m'
|
},
|
{
|
label: '产品消息',
|
num: 10,
|
id: '2m'
|
},
|
{
|
label: '安全消息',
|
num: 10,
|
id: '3m'
|
},
|
{
|
label: '服务消息',
|
num: 10,
|
id: '4m'
|
},
|
],
|
keyword: '',
|
};
|
},
|
created() {
|
this.getLoginInfo();
|
},
|
methods: {
|
// 退出功能
|
loginout() {
|
this.$confirm('退出系统确认', '确认提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
sessionStorage.clear();
|
this.$router.push({ path: "/login" })
|
}).catch(err => {
|
console.log(err);
|
})
|
},
|
// 改变选中状态
|
changeActive(idx) {
|
this.menuLeftList.forEach((item, index) => {
|
if (index === idx) {
|
item.checked = true;
|
} else {
|
item.checked = false;
|
}
|
})
|
},
|
// 获取登录用户信息
|
getLoginInfo() {
|
const info = JSON.parse(sessionStorage.getItem('user'));
|
if (info) {
|
this.user = info;
|
} else {
|
const name = sessionStorage.getItem('name');
|
this.$axios({
|
method: 'get',
|
url: 'sccg/admin/info?name=' + name,
|
})
|
.then(res => {
|
sessionStorage.setItem('user', JSON.stringify(res.data));
|
this.user = res.data;
|
})
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.el-header {
|
background-color: #071a38;
|
color: #333;
|
text-align: center;
|
line-height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 20px;
|
// width: 100%;
|
color: #4b9bb7;
|
|
.header-left {
|
display: flex;
|
|
.menu-left__item {
|
width: 120px;
|
|
span {
|
display: block;
|
line-height: 40px;
|
width: 100%;
|
|
&:hover {
|
cursor: pointer;
|
color: #fff;
|
}
|
}
|
}
|
|
.my-active {
|
border-radius: 20px;
|
color: #fff;
|
background-color: #092c4a;
|
}
|
}
|
|
.header-right {
|
display: flex;
|
|
.item {
|
width: 60px;
|
position: relative;
|
|
:deep(.is-fixed) {
|
width: 20px;
|
height: 20px;
|
padding: 0;
|
top: 20px;
|
right: 30px;
|
border-radius: 50%;
|
position: absolute;
|
}
|
}
|
|
.search {
|
width: 200px;
|
}
|
|
.user {
|
margin-left: 20px;
|
width: 120px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
.user-card {
|
position: absolute;
|
top: 60px;
|
width: 120px;
|
z-index: 3000;
|
.user-card__item {
|
padding: 5px 0;
|
|
&:hover {
|
color: #fff;
|
background-color: #071a38;
|
}
|
}
|
|
:deep(.el-card) {
|
background-color: #092c4a;
|
border: 1px solid #17324c;
|
color: #4b9bb7;
|
}
|
|
:deep(.el-card__body) {
|
line-height: 20px;
|
padding: 10px;
|
}
|
}
|
}
|
|
.btn {
|
width: 60px;
|
font-size: 20px;
|
position: relative;
|
|
.message-card {
|
position: absolute;
|
top: 60px;
|
width: 180px;
|
left: -50px;
|
z-index: 3000;
|
:deep(.el-card__body) {
|
padding: 0;
|
}
|
|
:deep(.el-card) {
|
background-color: #092c4a;
|
border: 1px solid #17324c;
|
color: #4b9bb7;
|
}
|
|
.card-header {
|
padding: 0 20px;
|
line-height: 40px;
|
font-size: 14px;
|
display: flex;
|
border-bottom: 1px solid #17324c;
|
justify-content: space-between;
|
}
|
|
.message-card__item {
|
line-height: 30px;
|
font-size: 14px;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 20px;
|
|
.label:hover {
|
cursor: pointer;
|
color: #fff;
|
}
|
}
|
}
|
}
|
|
.user:hover,
|
.btn:hover {
|
background-color: #092c4a;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
