green.v0.3/src/components/HeadNav/HeadNav.vue

<template>
  <div class="white d-flex flex-row flex-nowrap px-10 align-center">
    <img @click="jumUrl('/')" alt class="logo-img" src="@/assets/logo.png" style="cursor: pointer" />
    <div class="flex-1 ml-8">
      <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"
            class="px-6 py-3"
            style="text-align: center"
            v-for="(con, b) in item.children"
          >
            <a @click="jumUrl(con.url)">{{ con.title }}</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <div class="d-flex flex-nowrap align-center">
      <a-icon class="icon-head pointer icon-head-right" type="search" />
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>点击查看购物车！</span>
        </template>
        <a-icon
          @click="$router.push('/Cart')"
          class="baseColor icon-head icon-head-right pointer"
          type="shopping-cart"
        />
      </a-tooltip>
      <router-link tag="span" to="/login">
        <a-icon class="icon-head pointer" style="right: 50px" type="user" />
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      str: '这是头部导航',
      list: [
        {
          name: '关于我们',
          url: '/About/Introduce',
          children: [
            {
              title: '公司介绍',
              url: '/About/Introduce',
            },
            {
              title: '组织机构',
              url: '/About/Organ',
            },
            {
              title: '合作伙伴',
              url: '/About/Partner',
            },
            {
              title: '衍生企业',
              url: '/About/SpinOffs',
            },
          ],
        },
        {
          name: '创新政策',
          children: [],
          url: '/Policy',
        },
        {
          name: '创新平台',
          children: [
            {
              title: '协同创新中心',
              url: '/NewPlatform/NewCore',
            },
            {
              title: '创新资源平台',
              url: '/NewPlatform/News',
            },
            {
              title: '创新服务',
              url: '/NewPlatform/NewService',
            },
          ],
          url: '/NewPlatform/NewCore',
        },
        {
          name: '孵化平台',
          url: '/IncubationPlatform/MakerSpace',
          children: [
            {
              title: '众创空间',
              url: '/IncubationPlatform/MakerSpace',
            },
            // {
            //   title: '公共实验室',
            //   url: '/IncubationPlatform/PublicLaboratory',
            // },
            // {
            //   title: '中试基地',
            //   url: '/IncubationPlatform/PilotBase',
            // },
            // {
            //   title: '创业导师',
            //   url: '/IncubationPlatform/Tutor',
            // },
            // {
            //   title: '合作伙伴',
            //   url: '/IncubationPlatform/Partner',
            // },
            {
              title: '创业服务',
              url: '/IncubationPlatform/Services',
            },
            {
              title: '产品展示',
              url: '/IncubationPlatform/Products',
            },
          ],
        },
        {
          name: '产业平台',
          children: [
            {
              title: '产业创新联盟',
              url: '/Industry/Union',
            },
            {
              title: '产业服务',
              url: '/Industry/Serve',
            },
            {
              title: '衍生企业',
              url: '/Industry/Enterprise',
            },
          ],
          url: '/Industry/Union',
        },
        {
          name: '知识平台',
          children: [],
          url: '/Knowledge',
        },
        {
          name: '活动公告',
          children: [],
          url: '/Activity',
        },
        {
          name: '创新挑战',
          children: [
            {
              title: '需求征集',
              url: '/Challenge/Solicitation',
            },
            {
              title: '项目发布',
              url: '/Challenge/Release',
            },
            {
              title: '结果公告',
              url: '/Challenge/Notice',
            },
          ],
          url: '/Challenge/Solicitation',
        },
        {
          name: '交流社区',
          children: [],
          url: '/Community',
        },
        {
          name: '联系我们',
          children: [],
          url: '/ContactUs',
        },
      ],
    };
  },
  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;
}

.list-down {
  margin-right: 20px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
}

.logo-img {
  height: 50px;
}

.icon-head {
  font-size: 24px;
}

.icon-head-right {
  margin-right: 32px;
}

@media only screen and (max-width: 1400px) {
  .list-down {
    margin-right: 18px;
    font-size: 14px;
  }

  .logo-img {
    height: 44px;
  }

  .icon-head {
    font-size: 24px;
  }

  .icon-head-right {
    margin-right: 24px;
  }
}
</style>