hfysite/components/header/lucencyHeader.vue

<template>
  <div class="header">
    <div class="conBox header-content">
      <a class="logo" href="/">
        <img src="headerLogo.png" alt="" class="logo">

      </a>
      <div class="right-header">
        <div class="top">
          <img src="image/logotext2.png" alt="">
        </div>
        <div class="menus">
          <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="conBox header-main">
      <ul class="main-menus">
        <li class="main-menu"
            v-for="(item,i) in mainMenus"
            :key="`main-${item.path}-${i}`"
            @mouseenter="showSubMenu(item)"
            @mouseleave="startHideSubMenu(item)"
        >
          <a :href="item.url" >{{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"

          />
        </li>
      </ul>
      <div class="search-box">
        <div class="search">
          <input type="text" v-model="searchKey"
                 placeholder="搜索咨询与产品">
          <button @click="searchItem" >
            <img src="image/search.png" alt="搜索">
          </button>
        </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"
    },

  },
  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.html",
          text: "产品中心",
          isSub: true,
          subKey: "product",
          showSub: false
        },
        {
          key: "solution",
          path: "/solution.html",
          text: "解决方案",
          isSub: true,
          subKey: "solution",
          showSub: false
        },
        {
          key: "new",
          path: "/new.html",
          text: "新闻中心"
        },
        {
          key: "support",
          path: "/technicalSupport.html",
          text: "技术支持",
          sub:{
            type: "about",
          }
        },
        {
          key: "about",
          path: "/about.html",
          text: "关于我们",
          sub:{
            type: "about",
          }
        }
      ],
      searchKey: "",
      nowSub: "",
      hideTimer: null,
    }
  },

  methods:{
    getLangText(str){
      return langMap.getText(this.lang,str);
    },
    getAbbrText(str){
      return langMap.getAbbrText(this.lang,str);
    },
    switchLangClickHandle(){
      this.$root.$emit('changeLang');
    },
    searchItem(){

    },
    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;
      }
    }
  }
}
</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 {
  display: flex;
  height: 70px;
}
.header-content > .logo{
  display: block;
  width: 260px;
  height: 70px;
  margin-top: 7.5px;
}
.header-content > .logo img{
  display: block;
  width: auto;
  height: 65px;
}
.header-content .right-header{
  width: 1060px;
  height: 100%;
  margin-left: 11px;
  position: relative;
  top: -35px;
}
.right-header .top{
  margin-top: 35px;
  height: 63px;

}
.right-header .top img{
  display: block;
  width: 253px;
  height: 63px;
}
.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: -30px;
  position: absolute;
}
.menus .menu{
  padding: 0 8px;
  list-style: none;
  cursor: pointer;
  color: #16a0d7;
  font-size: 1.1em;

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

}
.header-main{
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.header-main .main-menus{
  height: 100%;
  list-style: none;
  display: flex;
  align-items: flex-end;
  font-size: 1.15em;
}
.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: 0px;
}
.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: 100%;
  display: flex;
  /*border-radius: 50%;*/
  align-items: center;
  font-size: 0.9em;
}
.search-box .search{
  height: 26px;
  width: 100%;
  border-radius: 26px;
  border: 1px solid gray;
  display: flex;
  position: relative;
  margin-top: 8px;
}
.search-box .search > *{
  outline: none;
}
.search > input{
  display: block;
  width: 100%;
  height: 24px;
  border-radius: 24px;
  padding-left: 5px;
  padding-right: 15px;
  font-size: 0.85em;
}
.search > button{
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 3px;
}
.search > button:hover{
  color: orange;
}
</style>