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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| <template>
| <div class="page-nav">
| <div class="page-nav-list">
| <ul>
| <li
| v-for="(nav, key) in navs" :key="key"
| :class="{'active-nav': checkName(nav.name)}"
| @click="navClick(nav)">
| <router-link :to="nav.router">{{nav.txt}}</router-link>
| </li>
| </ul>
| </div>
| </div>
| </template>
| <script>
| export default {
| name: 'PageNav',
| data() {
| return {
| navs: [
| {
| txt: '首页',
| name: 'PagesHome',
| router: '/'
| },
| {
| txt: '动环监控中心',
| name: 'PagesMovingRingMonitorCenter',
| router: '/moving-ring-monitor-center'
| },
| {
| txt: '动力设备监控',
| name: 'PagesEquipmentMonitor',
| router: '/equipment-monitor'
| },
| {
| txt: '环境设备监控',
| router: ''
| },
| {
| txt: '安防设备监控',
| router: ''
| },
| {
| txt: '报警管理',
| router: ''
| },
| {
| txt: '统计分析',
| router: ''
| },
| {
| txt: '系统管理',
| router: '',
| }
| ],
| }
| },
| methods: {
| initNavActive: function() { // 初始化导航的激活状态，全部设置为false
| for(var i=0; i<this.navs.length; i++) {
| this.navs[i].active = false;
| }
| },
| navClick: function(data) {
| // 已经激活
| if(data.active) {
| return;
| }
| // 初始化导航的激活状态
| this.initNavActive();
| for(var i=0; i<this.navs.length; i++) {
| var nav = this.navs[i];
| if(nav.txt == data.txt) {
| this.navs[i].active = true;
| }
| }
| },
| checkName: function(name) {
| if(name) {
| var navName = this.$store.state.navName;
| return navName.indexOf(name) == -1?false:true;
| }
| return false;
|
| }
| }
| }
| </script>
| <style scoped>
| .page-nav {
| background-color: none; /* 浏览器不支持时显示 */
| border-radius: 0.08rem;
| background-image: linear-gradient(#49DFED, #016A95,#00638D, #006999, #009EE3);
| font-size: 0.15rem;
| text-align: center;
| overflow: hidden;
| }
| .page-nav::after {
| clear: both;
| content: "";
| display: block;
| width: 0;
| height: 0;
| }
| .page-nav li {
| float: left;
| width: 12.5%;
| }
| .page-nav li:hover {
| background-color: #12c4d1;
| }
| .page-nav li.active-nav {
| background-color: #15E3F3;
| }
| .page-nav li a {
| display: block;
| text-align: center;
| min-width: 1rem;
| line-height: 0.45rem;
| padding-left: 0.18rem;
| padding-right: 0.18rem;
| }
| </style>
|
|
