HeadNav.vue 2.56 KB
<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>