lightlimx-website/components/MyHeader/index.vue

<template>
    <div class="layout-header" id="layout-header" >
      <div class="layout-header-h5-wrap" :style="{'position':'relative','z-index':'100'}">
        <div class="layout-header-nav">
          <div class="logo">
            <svg-icon icon-class="logo"></svg-icon>
          </div>
          <div class="layout-header-tabs" >
            <van-tabs v-model="active" @change="handleChange"
                      background="transparent"
                      title-inactive-color="#9B9B9B"
                      color="#F49F00"
                      title-active-color="#FFFFFF" >
              <van-tab
                :title="item.title"
                :name="item.name"
                v-for="(item) in tabs "
                :key="item.name"></van-tab>
            </van-tabs>
          </div>
          <div class="layout-header-menu" @click="handleToggle">
            <svg-icon v-if="!isShow" icon-class="menu"></svg-icon>
            <svg-icon v-if="isShow" icon-class="close"></svg-icon>
          </div>
        </div>
      </div>
      <van-popup v-model="isShow" class="layout-header-popup" :overlay="false" :get-container="getContainer" position="top" :style="{ 'min-height': 'auto' ,'z-index':'99 !important'}" >
        <div class="layout-header-menu-lists">
          <van-cell-group>
              <van-cell
                clickable
                :class="{'active':item.name===active}"
                class="layout-header-menu-item"
                title-class="layout-header-menu-t"
                :is-link="false"
                :title="item.title"
                :name="item.name"
                v-for="(item) in tabs"
                @click="handleClick(item)"
                :key="item.name">
                <template #icon>
                  <div class="layout-header-menu-icon">
                    <svg-icon :icon-class="item.icon"></svg-icon>
                  </div>
                </template>
                <template #extra>
                  <div class="layout-header-menu-extra">
                    <van-icon name="arrow" size=".2rem" color="#CBCBCB" />
                  </div>
                </template>
              </van-cell>
          </van-cell-group>
        </div>
      </van-popup>
    </div>
</template>

<script>
  import {tabs} from "~/assets/js/static";
    export default {
      name: "MyHeader",
      watch:{
        '$route'(old,val){
          if(old!==val){
            if(this.$route.name == 'contact-id'){
                return;
            }else{
              this.active=this.$route.name;
              this.isShow=false
            }
          }
        }
      },
      methods:{
        handleMenu(){
          const clientWidth=document.documentElement.clientWidth;
          if(clientWidth>768){
            this.isShow=false
          }
        },
        getContainer() {
          return document.querySelector('.layout-header');
        },
        handleClick(item){
          if(item.name==='innovation'){
            return;
          }
          if(this.$route.name===item.name){
            return
          }
          this.isShow=!this.isShow
          this.$router.push({name:item.name})
        },
        handleChange(name,title){
          if(name==='innovation'){
            return;
          }
          if(this.$route.name===name){
            return
          }
          this.$router.push({name:name})
        },
        handleToggle(){
          this.isShow=!this.isShow
        }
      },
      created(){
        this.active=this.$route.name
      },
      destroyed(){
        this.handleMenu()
        window.removeEventListener('resize',this.handleMenu)
      },
      mounted(){
        window.addEventListener('resize',this.handleMenu)
      },
        data() {
          return {
            isShow:false,
            active: '',
            tabs:tabs
          };
        },
    }
</script>

<style scoped lang="less">
.layout-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: .96rem;
  z-index: 2;
  overflow: hidden;
  background-color: #363231;
  &-menu{
    display: none;
  }
  &-popup{
    z-index: 99 !important;
  }
  &-nav{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
  }

  &-tabs{
    display: flex;
    height: 100%;
    align-items: flex-end;
  }
  .logo{
    display: flex;
    align-items: center;
    height: 100%;
    .svg-icon{
      width: 1.54rem;
      height: .26rem;
    }
  }
  &-h5-wrap{
    height: 100% !important;
    display: block;
    background-color: #363231;
    overflow-x: initial;

  }
}
  @media screen and (max-width: 768px) {
    .layout-header{
      height: .88rem;
      &-menu{
        display: block;
        position: absolute;
        right: 0;
        padding: .3rem;
        &-item{
          padding-left: .3rem;
          min-height: 1.09rem;
          &:after{
            left: 0;
            right: 0;
            border-color: #E3E3E3;
          }
          &:active,&.active{
            background-color: #F1F1F1;
            .layout-header-menu-t{
              font-family: Manrope;
              font-weight: bold;
              font-size: .4rem;
              color: #2E2C2C;
            }
          }
        }
        &-t{
          display: flex;
          align-items: center;
          font-size: .3rem;
          font-family: Manrope;
          font-weight: 400;
          color: #302D2C;
        }
        &-extra{
          display: flex;
          align-items: center;
        }
        &-icon{
          padding-right: .3rem;
          display: flex;
          align-items: center;
          .svg-icon{
            width: .34rem;
            height: .34rem;
          }
        }
        &-lists{
          padding-top: .88rem;
          padding-bottom: .89rem;
          &-item{

          }
        }
        .svg-icon{
          width: .34rem;
          height: .3rem;
        }
        &:active{
          background-color: #eee;
        }
      }
      &-nav{
        justify-content: center;
      }
      &-tabs{
        display: none;
      }
      .logo{
        .svg-icon{
          width: 2.12rem;
          height: .36rem;
        }
      }
    }
  }
</style>
<style lang="less">
  .layout-header-tabs{
    .van-tab{
      font-size: .14rem;
      font-weight: bold;
      font-family: Manrope;
      color: #9B9B9B;
      &:hover .van-tab__text{
        font-family: Manrope;
        color: #FFFFFF;
      }
      &.van-tab--active .van-tab__text{
        color: #9B9B9B !important;
      }
    }
    .van-tabs{
      height: 100%;
    }
    .van-tabs__wrap{
      height: 100%;
    }
  }
</style>