You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

198 lines
4.2 KiB

<template>
<div class="head">
<img @click="jumUrl('/')" alt class="logo-img" src="@/assets/logo.png" style="cursor: pointer" />
<div class="li-box">
<a-dropdown :disabled="item.children.length > 0 ? false : true" :key="a" class="list-down" v-for="(item, a) in list">
<a @click="jumUrl(item.url)" class="ant-dropdown-link">
{{ item.name }}&nbsp;&nbsp;
<a-icon type="down" v-show="item.children.length > 0" />
</a>
<a-menu slot="overlay">
<a-menu-item :key="b" style="text-align: center" v-for="(con, b) in item.children">
<a>{{ con.title }}</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
<a-icon class="icon-head" style="right: 150px" type="search" />
<a-icon class="icon-head baseColor" style="right: 100px" type="shopping-cart" />
<router-link tag="span" to="/login">
<a-icon class="icon-head" style="right: 50px" type="user" />
</router-link>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
data() {
return {
str: '这是头部导航',
list: [
{
name: '关于我们',
children: [
{
title: '公司介绍',
url: '',
},
{
title: '组织机构',
url: '',
},
{
title: '合作伙伴',
url: '',
},
{
title: '衍生企业',
url: '',
},
],
},
{
name: '创新政策',
children: [],
url: '/Policy',
},
{
name: '创新平台',
children: [
{
title: '协同创新中心',
url: '',
},
{
title: '创新服务平台',
url: '',
},
{
title: '科技创新服务',
url: '',
},
],
},
{
name: '孵化平台',
children: [
{
title: '众创空间',
url: '',
},
{
title: '公共实验室',
url: '',
},
{
title: '合作伙伴',
url: '',
},
{
title: '创业服务',
url: '',
},
{
title: '产品展示',
url: '',
},
],
},
{
name: '产业平台',
children: [
{
title: '产业创新联盟',
url: '',
},
{
title: '产业服务',
url: '',
},
{
title: '衍生企业',
url: '',
},
],
},
{
name: '知识平台',
children: [],
},
{
name: '活动公告',
children: [],
url: '/Activity',
},
{
name: '创新挑战',
children: [
{
title: '需求征集',
url: '',
},
{
title: '项目发布',
url: '',
},
{
title: '结果公告',
url: '',
},
],
},
{
name: '交流社区',
children: [],
url: '/Community',
},
{
name: '联系我们',
children: [],
},
],
};
},
methods: {
jumUrl(url) {
if (this.$route.path !== url) {
this.$router.push(url);
}
},
},
};
</script>
<style lang="stylus" scoped>
.head {
height: 80px;
width: 100%;
background: white;
position: relative;
}
.icon-head {
font-size: 24px;
position: absolute;
top: 28px;
cursor: pointer;
}
.li-box {
line-height: 80px;
position: absolute;
height: 80px;
top: 0;
left: 250px;
}
.list-down {
margin-right: 20px;
color: rgba(0, 0, 0, 0.65);
}
.logo-img {
height: 50px;
margin-top: 15px;
margin-left: 48px;
}
</style>