|
|
@@ -1,12 +1,17 @@
|
|
|
<template>
|
|
|
<div class="navbar">
|
|
|
<div class="hos-name">
|
|
|
+
|
|
|
+ <!--Logo-->
|
|
|
<img :src="logo" alt="logo">
|
|
|
|
|
|
+ <!--开关左边导航-->
|
|
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
|
|
|
|
|
+ <!--单位名称-->
|
|
|
<span v-if="userData.ocName" class="tag">{{ userData.ocName }}</span>
|
|
|
|
|
|
+ <!--消息-->
|
|
|
<countdown v-if="userData.licExpiredTime" :end-time="userData.licExpiredTime">
|
|
|
<div
|
|
|
slot="process"
|
|
|
@@ -16,8 +21,10 @@
|
|
|
<div slot="finish" class="tag authorization error">(请续费使用)</div>
|
|
|
</countdown>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 隐藏标签 -->
|
|
|
<breadcrumb v-if="0" id="breadcrumb-container" class="breadcrumb-container" />
|
|
|
+
|
|
|
<div class="right-menu">
|
|
|
<template v-if="device!=='mobile'">
|
|
|
<search v-if="false" id="header-search" class="right-menu-item" />
|
|
|
@@ -31,6 +38,8 @@
|
|
|
</el-tooltip>
|
|
|
|
|
|
</template>
|
|
|
+
|
|
|
+ <!--上面导航-->
|
|
|
<div class="sideMenuTab">
|
|
|
<div
|
|
|
v-for="(tab,index) in sideMenus"
|
|
|
@@ -43,11 +52,15 @@
|
|
|
<p>{{ tab.name }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!--消息-->
|
|
|
<div class="right-menu-item" @click="navToPage('/message')">
|
|
|
<el-badge :is-dot="false" class="nav-icon">
|
|
|
<i class="el-icon-message-solid" />
|
|
|
</el-badge>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!--用户-->
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
|
<div class="avatar-wrapper">
|
|
|
<el-avatar v-if="userData" :src="userData.userAvatar" />
|
|
|
@@ -78,6 +91,7 @@ import SizeSelect from '@/components/SizeSelect'
|
|
|
import Search from '@/components/HeaderSearch'
|
|
|
import { getUnReadCounter } from '@/api/system/msgApi'
|
|
|
export default {
|
|
|
+ name: 'NavBar',
|
|
|
components: {
|
|
|
Breadcrumb,
|
|
|
Hamburger,
|
|
|
@@ -223,7 +237,7 @@ export default {
|
|
|
.logo {
|
|
|
display: block;
|
|
|
width: auto;
|
|
|
- height: 42px;
|
|
|
+ height: 48px;
|
|
|
}
|
|
|
|
|
|
.tag{
|
|
|
@@ -318,10 +332,10 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.sideMenuTab{
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- padding-right: 50px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding-right: 50px;
|
|
|
.item{
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
@@ -342,7 +356,7 @@ export default {
|
|
|
&.active-6{color: #29c761;font-weight: 600;}
|
|
|
&.active-7{color: #f9e871;font-weight: 600;}
|
|
|
.iconfont{
|
|
|
- font-size: 30px;
|
|
|
+ font-size: 36px;
|
|
|
color: inherit;
|
|
|
&[class^=el-icon-], &[class*=" el-icon-"]{
|
|
|
font-family: "element-icons" !important;
|
|
|
@@ -354,8 +368,8 @@ export default {
|
|
|
p{
|
|
|
padding: 0;
|
|
|
margin: 5px 0 0 0;
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
}
|
|
|
}
|