1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <template>
| <a-layout-header
| v-if="!headerBarFixed"
| style="padding: 0"
| :class="[
| fixedHeader && 'ant-header-fixed-header',
| sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed'
| ]"
| >
| <div class="header">
| <!-- <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" /> -->
| <span> 欢迎进入 {{localInfo.systemName}}</span>
| <user-menu />
| </div>
| </a-layout-header>
| </template>
|
| <script>
| import { mixin } from '@tievd/cube-block/lib/utils/mixin.js'
| import UserMenu from '@/components/tools/UserMenu'
| import skinLayoutMixin from '@/mixins/skin-layout-mixin'
|
| export default {
| name: 'SideMenuHeader',
|
| components: {
| UserMenu
| },
|
| mixins: [mixin, skinLayoutMixin],
|
| props: {
| menus: {
| type: Array,
| required: true
| },
| collapsed: {
| type: Boolean,
| required: false,
| default: false
| }
| },
|
| data() {
| return {
| headerBarFixed: false,
| topMenuStyle: {
| headerIndexLeft: {},
| topNavHeader: {},
| headerIndexRight: {},
| topSMenuStyle: {}
| },
| chatStatus: '',
| localInfo:{}
| }
| },
|
| mounted() {
| this.localInfo = JSON.parse(localStorage.getItem('localInfo'))
| window.addEventListener('scroll', this.handleScroll)
| },
|
| 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')
| }
| }
| }
| </script>
|
| <style lang="less" scoped>
| // 侧边菜单
| .header {
| position: relative;
| z-index: 2;
| color: @layout-header-color;
| height: @layout-header-height;
| background: @layout-header-background;
| transition: background 300ms;
| // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
| .trigger {
| height: 42px;
| line-height: 42px;
| font-size: 22px;
| padding: 0 16px;
| cursor: pointer;
| transition: color 300ms, background 300ms;
|
| &:hover {
| background: @item-hover-bg;
| }
| }
| }
| </style>
|
|
