标签栏完善、布局管理、监控系统、信息通知管理跳转

This commit is contained in:
2023-03-17 14:22:08 +08:00
parent e74846da17
commit 7138434472
18 changed files with 856 additions and 63 deletions

View File

@@ -1,16 +1,16 @@
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<div class="right-menu">
<template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" />
<el-tooltip content="项目文档" effect="dark" placement="bottom">
<Doc class="right-menu-item hover-effect" />
</el-tooltip>
<!-- <el-tooltip content="项目文档" effect="dark" placement="bottom">
<Doc class="right-menu-item hover-effect" />
</el-tooltip>-->
<el-tooltip content="全屏缩放" effect="dark" placement="bottom">
<screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -18,16 +18,16 @@
<notice-icon class="right-menu-item"/>
<notice-icon-reader ref="noticeIconReader"/>
<el-tooltip content="布局设置" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
<!-- <el-tooltip content="布局设置" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>-->
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<img :src="Avatar" class="user-avatar">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-wrapper">
<img :src="Avatar" class="user-avatar">
<i class="el-icon-caret-bottom" />
<!-- <img :src="Avatar" class="user-avatar" style="border: #f5141e 1px solid">-->
<span class="user-nickname">{{ user.personName }}</span>
</div>
<el-dropdown-menu slot="dropdown">
<span style="display:block;" @click="show = true">
@@ -55,6 +55,8 @@
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import TopNav from '@/components/TopNav'
import Doc from '@/components/Doc'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
@@ -72,7 +74,8 @@ export default {
Screenfull,
SizeSelect,
Search,
Doc
Doc,
TopNav
},
data() {
return {
@@ -97,6 +100,11 @@ export default {
value: val
})
}
},
topNav: {
get() {
return this.$store.state.settings.topNav
}
}
},
methods: {
@@ -146,6 +154,11 @@ export default {
float: left;
}
.topmenu-container {
position: absolute;
left: 50px;
}
.errLog-container {
display: inline-block;
vertical-align: top;
@@ -177,27 +190,22 @@ export default {
}
}
}
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
.avatar-container {
margin-right: 30px;
//margin-right: 10px;
.avatar-wrapper {
margin-top: 5px;
//margin-top: 5px;
position: relative;
.user-avatar {
.user-nickname {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
font-size: 18px;
margin-left: -10px;
}
}
}