check-work/src/components/HeadNav/HeadNav.vue

<template>
  <div class="white d-flex flex-row flex-nowrap px-10 align-center">
    <img
      @click="jumUrl('/',0)"
      alt
      class="logo-img"
      src="@/assets/logo.png"
      style="cursor: pointer"
    />
    <div class="flex-1 ml-8">
      <a-dropdown
        :class="activeItem === a ? 'list-down-active' : ''"
        :disabled="item.children.length > 0 ? false : true"
        :key="a"
        class="list-down"
        v-for="(item, a) in list"
      >
        <a @click="jumUrl(item.url,a)" 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,a)">{{ 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" v-if="!nickName">
        <a-icon class="icon-head pointer" style="right: 50px" type="user" />
      </router-link>
      <div class="icon-head" v-else>{{ nickName }}</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  data() {
    return {
      str: '这是头部导航',
      activeItem: 0,
      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/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',
        },
      ],
    };
  },

  computed: {
    ...mapState('user', ['anyringToken', 'user']),

    nickName() {
      const anyringToken = sessionStorage.getItem('anyringToken') || this.anyringToken;
      const user = sessionStorage.getItem('user') && JSON.parse(sessionStorage.getItem('user'));
      if (anyringToken) {
        if (user.wxInfo.nickname) {
          return user.wxInfo.nickname;
        } else {
          const account = this.user.account || user.account;
          return account;
        }
      } else {
        return '';
      }
    },
  },

  methods: {
    jumUrl(url, index) {
      if (this.$route.path !== url) {
        this.$router.push(url);
      }
      this.activeItem = index;
    },
  },
};
</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);
}

.list-down:hover {
  color: #13ACC4;
  border-bottom: 2px solid #13ACC4;
}

.list-down-active {
  color: #13ACC4;
  border-bottom: 2px solid #13ACC4;
}

.logo-img {
  height: 44px;
}

.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>