HeadNav.vue
2.56 KB
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
<style>
.layout-logo {
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-nav {
/*width: 620px;*/
float: left;
margin-left: 100px;
/*margin: 0 auto;*/
}
.layout-assistant {
width: 300px;
margin: 0 auto;
height: inherit;
}
.layout-ceiling-main {
float: right;
margin-right: 15px;
}
.layout-ceiling-main a {
color: #9ba7b5;
margin: 0 10px;
}
.layout-ceiling-main .down {
line-height: 10px;
}
</style>
<template>
<Menu mode="horizontal"
theme="dark"
@on-select="itemSelect"
active-name="1">
<div class="layout-logo"></div>
<div class="layout-nav">
<Menu-item name="/" >
<Icon type="home"></Icon>
首页
</Menu-item>
<Menu-item name="/interface" >
<Icon type="document"></Icon>
接口文档
</Menu-item>
<Menu-item name="/doc" >
<Icon type="information-circled"></Icon>
帮助文档
</Menu-item>
<Menu-item name="/support" >
<Icon type="ios-navigate"></Icon>
服务支持
</Menu-item>
</div>
<div class="layout-ceiling-main">
<Dropdown class="down" @on-click="clickDown">
<a href="javascript:void(0)">
admin
<Icon type="arrow-down-b"></Icon>
</a>
<Dropdown-menu slot="list">
<Dropdown-item name="1">修改密码</Dropdown-item>
<Dropdown-item name="2">帐号信息</Dropdown-item>
<Dropdown-item name="3">我的主页</Dropdown-item>
<Dropdown-item name="4" divided>退出登录</Dropdown-item>
</Dropdown-menu>
</Dropdown>|
<router-link to="/login">注册登录</router-link> |
<router-link to="/account">帐号中心</router-link>
</div>
</Menu>
</template>
<script>
module.exports = {
name: 'head-nav',
methods: {
itemSelect(name) {
this.$router.push(name)
},
clickDown(name){
this.$Modal.info({
title:"提示",
content: "你点击了："+name,
onOk: () => {
this.$Message.info('点击了确定');
},
})
}
}
};
</script>