wiki/src/components/HeadNav/HeadNav.vue

<template>
  <div class="head 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
        :class="actPath - 1 === a ? 'list-act' : ''"
        :disabled="item.children && 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 && 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">
      <div class="d-flex flex-column justify-center" style="position: relative">
        <a-icon @mouseover="showSearch = true" class="icon-head pointer icon-head-right" type="search" v-show="!showSearch" />
        <a-input-group
          class="icon-head-right d-flex flex-nowrap"
          compact
          style="position: absolute; right: 0; z-index: 9; width: 156px"
          v-show="showSearch"
        >
          <a-select @change="changeCode" style="width: 120px">
            <a-select-option value="1">政策</a-select-option>
            <a-select-option value="2">活动</a-select-option>
            <a-select-option value="3">学习</a-select-option>
          </a-select>
          <a-button icon="search" style="width: 36px; color: #d9d9d9 !important; border-color: #d9d9d9 !important"></a-button>
          <!-- <a-input-search class="flex-1" placeholder="请输入..." style="width: 150px" /> -->
          <!-- @search="getPolicy" -->
        </a-input-group>
      </div>

      <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: '/Policy',
          children: [
            {
              title: '国家政策',
              url: '/Policy',
            },
            {
              title: '省级政策',
              url: '/Policy',
            },
            {
              title: '市级政策',
              url: '/Policy',
            },
            {
              title: '区县政策',
              url: '/Policy',
            },
          ],
        },
        {
          name: '创新服务',
          url: '/ServiceMarket/Institute',
          children: [
            {
              title: '创新研究院',
              url: '/ServiceMarket/Institute',
            },
            {
              title: '科技创新服务',
              url: '/ServiceMarket/InnovativeService',
            },
            {
              title: '合作伙伴',
              url: '/ServiceMarket/Partner',
            },
          ],
        },
        {
          name: '孵化平台',
          url: '/Hatch/Epoch',
          children: [
            {
              title: '创时代孵化器',
              url: '/Hatch/Epoch',
            },
            {
              title: '高新众创空间',
              url: '/Hatch/Space',
            },
            {
              title: '数智创时代专业孵化器',
              url: '/Hatch/Incubator',
            },
            {
              title: '线上孵化器',
              url: '/Hatch/Fictitious',
            },
            {
              title: '创新创业服务',
              url: '/Hatch/Service',
            },
            {
              title: '创业导师',
              url: '/Hatch/Tutor',
            },
            {
              title: '合作伙伴',
              url: '/Hatch/Partner',
            },
          ],
        },
        {
          name: '数智开发',
          url: '/Develop',
        },
        {
          name: '双创活动',
          url: '/Activity',
          children: [
            {
              title: '活动通知',
              url: '/Activity',
            },
            {
              title: '活动报道',
              url: '/Activity',
            },
          ],
        },
        {
          name: '创新挑战',
          children: [
            {
              title: '需求征集',
              url: '/Challenge/Solicitation',
            },
            {
              title: '项目发布',
              url: '/Challenge/Release',
            },
            {
              title: '结果公示',
              url: '/Challenge/Notice',
            },
          ],
          url: '/Challenge/Solicitation',
        },
        {
          name: '创业学院',
          url: '/Business',
        },
        // {
        //   name: '学习平台',
        //   url: '/Study',
        // },
        {
          name: '关于我们',
          url: '/About/Introduce',
          children: [
            {
              title: '公司介绍',
              url: '/About/Introduce',
            },
            {
              title: '组织机构',
              url: '/About/Organ',
            },
            {
              title: '合作伙伴',
              url: '/About/Partner',
            },
            {
              title: '生态企业',
              url: '/About/SpinOffs',
            },
          ],
        },
        {
          name: '联系我们',
          url: '/ContactUs',
        },
      ],
      showSearch: false,
      actPath: 0,
    };
  },
  watch: {
    $route(to, from) {
      const toDepth = to.fullPath.split('/');
      if (toDepth[1] === 'Policy') {
        this.actPath = 1;
      } else if (toDepth[1] === 'ServiceMarket') {
        this.actPath = 2;
      } else if (toDepth[1] === 'Hatch') {
        this.actPath = 3;
      } else if (toDepth[1] === 'Develop') {
        this.actPath = 4;
      } else if (toDepth[1] === 'Activity') {
        this.actPath = 5;
      } else if (toDepth[1] === 'Challenge') {
        this.actPath = 6;
      } else if (toDepth[1] === 'Business') {
        this.actPath = 7;
      } else if (toDepth[1] === 'About') {
        this.actPath = 8;
      } else if (toDepth[1] === 'ContactUs') {
        this.actPath = 9;
      } else {
        this.actPath = 0;
      }
    },
  },
  methods: {
    jumUrl(url) {
      if (this.$route.path !== url) {
        this.$router.push(url);
      }
    },

    // 政策界面课程类目搜索提示
    changeCode(value) {
      this.showSearch = false;
      if (value === '1') {
        this.$router.push('/Policy');
      } else if (value === '2') {
        this.$router.push('/Activity');
      } else {
        this.$router.push('/Study');
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.head {
  height: 60px;
  width: 100%;
  background: white;
  // position: relative;
}

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

.list-down:hover {
  color: #007CC1;
}

.list-act {
  color: #007CC1 !important;
}

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

@media only screen and (max-width: 1100px) {
  .list-down {
    margin-right: 10px;
    font-size: 12px;
  }

  .logo-img {
    height: 44px;
  }

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

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