<template>
|
<!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' -->
|
<a-layout-header
|
v-if="!headerBarFixed"
|
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
|
:style="{ padding: '0' }">
|
|
<div v-if="mode === 'sidemenu'" class="header" :class="theme">
|
<a-icon
|
v-if="device==='mobile'"
|
class="trigger"
|
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
|
@click="toggle"></a-icon>
|
<a-icon
|
v-else
|
class="trigger"
|
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
@click="toggle"/>
|
|
<span v-if="device === 'desktop'">欢迎进入 统计分析</span>
|
|
<user-menu :theme="theme"/>
|
</div>
|
<!-- 顶部导航栏模式 -->
|
<div v-else :class="['top-nav-header-index', theme]">
|
<div class="header-index-wide">
|
<div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
|
<logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"/>
|
<div class="top-nav-text">
|
<div style="width:100%;height: 50%;line-height:35px">密级：内部</div>
|
<div style="width:100%;height: 50%;line-height:25px">警告：本系统禁止存储、处理、传输涉密信息</div>
|
</div>
|
<div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
|
<s-menu
|
mode="horizontal"
|
:menu="menus"
|
:theme="theme"
|
@updateMenuTitle="handleUpdateMenuTitle"
|
></s-menu>
|
</div>
|
<a-icon
|
v-else
|
class="trigger"
|
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
|
@click="toggle"></a-icon>
|
</div>
|
<user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
|
</div>
|
</div>
|
|
</a-layout-header>
|
</template>
|
|
<script>
|
import UserMenu from '../tools/UserMenu'
|
import SMenu from '../menu/'
|
import Logo from '../tools/Logo'
|
import { mixin } from '@/utils/mixin.js'
|
|
export default {
|
name: 'GlobalHeader',
|
components: {
|
UserMenu,
|
SMenu,
|
Logo
|
},
|
mixins: [mixin],
|
props: {
|
mode: {
|
type: String,
|
// sidemenu, topmenu
|
default: 'sidemenu'
|
},
|
menus: {
|
type: Array,
|
required: true
|
},
|
theme: {
|
type: String,
|
required: false,
|
default: 'dark'
|
},
|
collapsed: {
|
type: Boolean,
|
required: false,
|
default: false
|
},
|
device: {
|
type: String,
|
required: false,
|
default: 'desktop'
|
}
|
},
|
data() {
|
return {
|
headerBarFixed: false,
|
//update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
topMenuStyle: {
|
headerIndexLeft: {},
|
topNavHeader: {},
|
headerIndexRight: {},
|
topSmenuStyle: {}
|
},
|
chatStatus: ''
|
}
|
},
|
watch: {
|
/** 监听设备变化 */
|
device() {
|
if (this.mode === 'topmenu') {
|
this.buildTopMenuStyle()
|
}
|
},
|
/** 监听导航栏模式变化 */
|
mode(newVal) {
|
if (newVal === 'topmenu') {
|
this.buildTopMenuStyle()
|
}
|
}
|
},
|
//update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
mounted() {
|
window.addEventListener('scroll', this.handleScroll)
|
//update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
if (this.mode === 'topmenu') {
|
this.buildTopMenuStyle()
|
}
|
//update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
},
|
methods: {
|
handleScroll() {
|
if (this.autoHideHeader) {
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
if (scrollTop > 100) {
|
this.headerBarFixed = true
|
} else {
|
this.headerBarFixed = false
|
}
|
} else {
|
this.headerBarFixed = false
|
}
|
},
|
toggle() {
|
this.$emit('toggle')
|
},
|
//update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
buildTopMenuStyle() {
|
if (this.mode === 'topmenu') {
|
if (this.device === 'mobile') {
|
// 手机端需要清空样式，否则显示会错乱
|
this.topMenuStyle.topNavHeader = {}
|
this.topMenuStyle.topSmenuStyle = {}
|
this.topMenuStyle.headerIndexRight = {}
|
this.topMenuStyle.headerIndexLeft = {}
|
} else {
|
let rightWidth = '360px'
|
this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
|
this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 165px)' }
|
this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
|
this.topMenuStyle.headerIndexLeft = { 'width': `calc(100% - ${rightWidth})` }
|
}
|
}
|
},
|
//update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
|
|
// update-begin-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
handleUpdateMenuTitle(value) {
|
this.$emit('updateMenuTitle', value)
|
}
|
// update-end-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
|
|
@height: 59px;
|
|
.layout {
|
|
.top-nav-header-index {
|
|
.header-index-wide {
|
margin-left: 10px;
|
|
.ant-menu.ant-menu-horizontal {
|
height: @height;
|
line-height: @height;
|
}
|
}
|
.trigger {
|
line-height: 64px;
|
&:hover {
|
background: rgba(0, 0, 0, 0.05);
|
}
|
}
|
}
|
|
.header {
|
z-index: 2;
|
color: white;
|
height: @height;
|
background-color: @primary-color;
|
transition: background 300ms;
|
|
/* dark 样式 */
|
&.dark {
|
color: #000000;
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
background-color: white !important;
|
}
|
}
|
|
.header, .top-nav-header-index {
|
&.dark .trigger:hover {
|
background: rgba(0, 0, 0, 0.05);
|
}
|
}
|
}
|
|
.ant-layout-header {
|
height: @height;
|
line-height: @height;
|
}
|
|
/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
|
|
.top-nav-text {
|
color: #f00;
|
height: 100%
|
}
|
|
@media screen and (min-width: 1920px) {
|
.top-nav-text {
|
width: 400px;
|
}
|
}
|
|
@media screen and (min-width: 1680px) and (max-width: 1920px) {
|
.top-nav-text {
|
width: 400px;
|
}
|
}
|
|
@media screen and (min-width: 1400px) and (max-width: 1680px) {
|
.top-nav-text {
|
width: 500px;
|
}
|
|
.top-nav-header {
|
display: none;
|
}
|
}
|
|
@media screen and (min-width: 1280px) and (max-width: 1400px) {
|
.top-nav-text {
|
width: 600px;
|
}
|
|
.top-nav-header {
|
display: none;
|
}
|
}
|
|
@media screen and (max-width: 1280px) {
|
.top-nav-text {
|
width: 600px;
|
}
|
|
.top-nav-header {
|
display: none;
|
}
|
}
|
</style>
|
