hfysite/components/header/lucencyHeader.vue

<template>
  <div class="header w-screen pad:w-full h-12 pad:h-32  static pad:fixed flex justify-center flex-col items-center">
    <div class="container
          flex-shrink
          flex h-10 pad:h-24 justify-center items-center
          pad:justify-start pad:items-start
          ">
      <a class="w-48 pad:w-64 pc:w-72 flex-shrink-0 z-40" href="/">
        <img src="/headerLogo.png" alt="" class="logo">
      </a>
      <div class="hidden pad:flex w-full h-full items-center ">
        <div class="">
          <img src="/image/logotext2.png" alt="">
        </div>
        <div class="menus w-full">
          <div class="top-menu">
            <a class="menu" href="/">{{ lang===langType.cn?"首页":getLangText("首页") }}</a>
            <a class="menu" @click="switchLangClickHandle">
              {{ lang===langType.cn?"English":getLangText("English") }}
            </a>
          </div>
          <ul class="subMenu">
            <li class="menu" v-for="(item,i) in menus" :key="item.url+'_'+i"
                :title="lang===langType.cn?item.text:getLangText(item.text)">
              <a :href="item.url" >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</a>

            </li>
          </ul>
        </div>
      </div>
    </div>
    <div :class="`container header-menu ${isPhone?'header-menu-phone':''}`">
      <div class="menu-btn" @click="switchMenu" @touch="switchMenu">
        <svg-icon icon-class="more"/>
      </div>
      <ul :class="`main-menus ${isShow?'':'main-menus-hide'}`" >
        <li class="main-menu"
            v-for="(item,i) in mainMenus"
            :key="`main-${item.path}-${i}`"
            @mouseenter="showSubMenu(item)"
            @mouseleave="startHideSubMenu(item)"
        >
          <a :href="lang===langType.cn?item.path:getLangPathStr(item.path)" >{{lang===langType.cn?item.text:getAbbrText(item.text)}}</a>
          <span class="now" v-if="pageKey===item.key"></span>
          <menu-drop
            v-show="item.showSub"
            v-if="item.isSub"
            :type="item.subKey"
            :lang="lang"
            :pHref="item.path"
          />
        </li>
      </ul>
      <div :class="`search-box absolute right-0 top-0 z-50 ${searchShow?'search-box-show':''}`"
           v-click-outside="hideSearch"
      >
        <div class="search" @click="switchSearch">
          <input type="text" v-model="searchKey"
                 placeholder="搜索咨询与产品">
          <button @click="searchItem" >
            <svg-icon icon-class="search" />
          </button>
          <div class="phoneClose" @click.stop="hideSearch">
            <svg-icon icon-class="close" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import langMap from "~/map/langMap";
import menuDrop from "~/components/header/menuDrops/menuDrop";
export default {
  name: "lucencyHeader",
  props: {
    lang:{
      default: langMap.lang.cn
    },
    pageKey:{
      default: "index"
    },
    isPhone: {
      default: true
    }
  },
  components:{
    menuDrop
  },
  data(){
    return {
      langType: langMap.lang,
      menus: [
        {
          url:'https://gpscore.net/',
          text: '合方圆管理平台'
        },
        {
          url:'/',
          text: '智慧能源'
        },
        {
          url:'/',
          text: '输电线路摄像头'
        },
        {
          url:'https://gpscore.net/',
          text: '4G低功耗摄像头'
        },
        {
          url:'https://gpscore.net/',
          text: '自动变焦双目协同摄像头'
        },
        {
          url:'https://gpscore.net/',
          text: 'M2M产品'
        },
        {
          url:'https://gpscore.net/',
          text: '智能终端'
        },
      ],
      mainMenus:[
        {
          key: "index",
          path: "/",
          text: "首页"
        },
        {
          key: "product",
          path: "/product",
          text: "产品中心",
          isSub: true,
          subKey: "product",
          showSub: false
        },
        {
          key: "solution",
          path: "/solution",
          text: "解决方案",
          isSub: true,
          subKey: "solution",
          showSub: false
        },
        {
          key: "news",
          path: "/news",
          text: "新闻中心"
        },
        {
          key: "support",
          path: "/support",
          text: "技术支持",
          sub:{
            type: "support",
          }
        },
        {
          key: "about",
          path: "/about",
          text: "关于我们",
          sub:{
            type: "about",
          }
        }
      ],
      searchKey: "",
      nowSub: "",
      hideTimer: null,
      isShow: false,
      searchShow: false,
    }
  },
  mounted() {
  },
  // 指令
  directives: {
    // 点击外部,执行隐藏
    clickOutside: {
      bind(el, binding, vnode) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
            return false;
          }
          if (binding.expression) {
            binding.value(e);
          }
        }
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
      },
      unbind(el, binding) {
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      }
    }
  },
  methods:{
    getLangText(str){
      return langMap.getText(this.lang,str);
    },
    getAbbrText(str){
      return langMap.getAbbrText(this.lang,str);
    },
    getLangPathStr(pathStr){
      return langMap.getLangPathStr(this.lang,pathStr)
    },
    switchLangClickHandle(){
      this.$root.$emit('changeLang');
    },
    searchItem(){
      console.log('searching....')
    },
    showSubMenu(item){
      // console.log("0000000")
      if(item.isSub){
        // 清除隐藏定时器
        if(this.hideTimer){
          clearTimeout(this.hideTimer);
          this.hideTimer = null;
        }
        if(this.nowSub !== item.key){
          // 不同key切换
          let oldItem = this.mainMenus.find(val => val.key === this.nowSub);
          console.log(oldItem)
          if(oldItem){
            this.hideSubMenu(oldItem);
          }
        }
        item.showSub = true;
        this.nowSub = item.key;

      }
    },
    startHideSubMenu(item){
      this.hideTimer = setTimeout(()=>{
        this.hideSubMenu(item);
      },700)
    },
    hideSubMenu(item){
      item.showSub = false;
      this.nowSub = "";
      if(this.hideTimer){
        clearTimeout(this.hideTimer);
        this.hideTimer = null;
      }
    },
    switchMenu(){
      if(this.isPhone){
        console.log('切换按钮显示隐藏')
        this.isShow = !this.isShow;
      }
    },
    hideSearch(){
      console.log('hide search')
      this.searchShow = false;
    },
    showSearch(){
      this.searchShow = true;
    },
    switchSearch(){
      if(!this.searchShow){
        this.showSearch();
      }
    }
  }
}
</script>

<style scoped>
.header{
  backdrop-filter: blur(5px);
  box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 20%);
  /*text-shadow: 0 0 5px skyblue;*/
}

.header-content > .logo{
  display: block;
  width: 260px;
  height: 70px;
  margin-top: 7.5px;
}
.header-content > .logo img{
  display: block;
  width: auto;
  height: 65px;
}
.menus{
  height: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /*margin-top: -28px;*/
}
.menus .top-menu{
  width: auto;
  height: 30px;
  right: 0;
  top: -20px;
  position: absolute;
}
.menus .menu{
  padding: 0 5px;
  list-style: none;
  cursor: pointer;
  color: #16a0d7;
  font-size: 1.1em;

}
.menus .menu:hover{
  color: skyblue !important;
}
.menus .subMenu{
  max-width: 100%;
  height: 100%;
  display: flex;
  list-style: none;
  align-items: center;
  position: relative;
  right: 0;
}
.menus .subMenu .menu{
  font-size: 0.85em;
  color: #343434;

}

.header-menu{
  position: relative;
  height: 2rem;
  display: flex;
  /*justify-content: space-between;*/
}
.header-menu-phone{
  position: absolute;
}
.header-menu .menu-btn{
  display: none;
}

.header-menu .main-menus{
  height: 100%;
  list-style: none;
  display: flex;
  align-items: flex-end;
  font-size: 1.15em;
}

.header-menu-phone .menu-btn{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding: 0 15px;
  color: paleturquoise;
}



.header-menu-phone .main-menus{
  position: absolute;
  height: auto;
  padding: 5px;
  display: block;
  top: 100%;
  left: 0;
  background-color: #fff;
}

.header-menu-phone .main-menus-hide{
  left: -100%;
}
.main-menus .main-menu{
  width: auto;
  height: auto;
  /*color: #1a1a1a;*/
  margin-left: 15px;
  cursor: pointer;
  position: relative;

}
.main-menus .main-menu:first-child{
  margin-left: 0;
}
.header-menu-phone .main-menus .main-menu:first-child{
  margin-left: 15px;
}
.main-menus .main-menu > a{
  display: block;
  padding: 3px 20px 3px 5px;
}
.main-menus .main-menu > a:hover{
  color: orangered;
}
.main-menus .main-menu > a::before{
  content: "";
  width: 0;
  margin: 0 auto;
  height: 2px;
  background-color: #1e45e7;
  transition: all 0.6s;
  position: absolute;
  bottom: 0;
  left: 50%;
}
.main-menus .main-menu > .now{
  width: 100%;
  height: 2px;
  background-color: #1e45e7;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.main-menus .main-menu > a:hover:before{
  width: 100%;
  left: 0;
}




.search-box{
  height: 26px;
  display: flex;
  border-radius: 50%;
  align-items: center;
  font-size: 0.9em;
  width: 26px;
  transition: width 0.6s;
  box-shadow: 1px 1px 4px red ;
}
.search-box-show{
  width: 200px;
}
.header-menu-phone .search-box-show{
  width: 100%;
}
.search-box .search{
  height: 26px;
  width: 100%;
  border-radius: 26px;
  border: 1px solid gray;
  display: flex;
  position: relative;
  background-color: transparent;
}
.header-menu-phone .search-box-show .search{
  background-color: #fff;
  height: 30px;
  border-radius: 30px;
}
.search-box .search .phoneClose{
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  color: #1a1a1a;
  cursor: pointer;
  display: none;
}
.header-menu-phone .search-box-show .search .phoneClose{
  display: flex;
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
}

.search > * {
  outline: none;
}
.search > input{
  display: block;
  width: 100%;
  height: 24px;
  border-radius: 24px;
  padding-left: 5px;
  padding-right: 15px;
  font-size: 0.85em;
}
.header-menu-phone .search-box-show .search > input{
  padding-left: 30px;
  height: 30px;
  border-radius: 30px;
}
.search > button{
  display: flex;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 3px;
  font-size: 1.2rem;
  justify-content: center;
  align-items: center;
}
.header-menu-phone .search-box-show .search > button{
  left: 2px;
  right: auto;
  width: 30px;
  height: 30px;
}
.search:hover > button{
  color: orange;
}
</style>