greenvalley-mobile/src/components/HeadNav/HeadNav.vue

<template>
  <div>
  <div class="white d-flex justify-space-between flex-nowrap px-5 align-center mt-4">
    <a-icon class="pointer " style="font-size:1.4rem" type="unordered-list" v-show="!showNav" @click=" showNav =true" />
    <a-icon type="close" style="font-size:1.4rem" v-show="showNav" @click=" showNav =false" />
    
    
    <img
      @click="jumUrl('/',0)"
      alt
      class="logo-img"
      src="@/assets/logo.png"
      style="cursor: pointer"
    />

    <div>
      <!-- <a-icon class="icon-head pointer icon-head-right" type="search" /> -->
      
        
      <a-icon
        @click="$router.push('/Cart')"
        class="baseColor icon-head pointer"
        type="shopping-cart"
      />
      
    </div>

    
  </div>

    <div v-show="showNav"> 
     <div class="d-flex flex-column nav">
      <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="right" style="float:right;margin-right:1rem" 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> -->
        <div class="line"></div>
      </a-dropdown>
      <div style="color:#fff;text-align:center;margin:1.4rem auto" @click="showNav = false">
        <router-link tag="span" to="/login" v-if="!nickName">
          <a-icon class="icon-head pointer" style="right: 50px;color:#fff" type="user" />
        </router-link>
        <div class="icon-head" v-else>{{ nickName }}</div>
        <div class="text-white font-14">登录</div>
      </div>
    </div> 
    </div>
  </div>
</template>

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

  watch: {
    $route: {
      handler(val) {
        const router = val.path.split('/')[1];
        const arr = [];
        for (let i = 0; i < this.list.length; i++) {
          const item = this.list[i];
          const url = item.url.split('/')[1];
          arr.push(url);
        }
        const index = arr.indexOf(router);
        this.activeItem = index;
      },
      // 深度观察监听
      deep: true,
    },
  },

  methods: {

    jumUrl(url, index) {
      if (this.$route.path !== url) {
        this.$router.push(url);
      }
      this.activeItem = index;
      this.showNav = false
    },
  },
};
</script>

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

.list-down {
  
  // text-align center 
  width 100%
  height 3rem
  // border 1px solid pink
  border-bottom 1px solid #4C5660
  font-size: 16px;
  color: #fff
  padding-left 1.5rem
  padding-top 0.8rem
}

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

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

.logo-img {
  height: 2rem;
}

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



.nav{
  margin-top: 1.3rem
  width 100%
  z-index 1000
  
  background #001428 

  

  // display: none;
}

.line{
  height 1px

  
}
</style>