dl_site_nuxt/components/header.vue

<template>
  <div>
    <header class="header-box d-none d-xl-flex justify-content-between align-items-center">
      <nuxt-link to="/">
        <img :src="footerInfo.logo" width="265px" :alt="$t('index.corporateName')"></img>
      </nuxt-link>

      <nav class="d-md-flex align-items-center">
        <HeaderNav :nodes="menuTree" />
      </nav>

      <div class="search-box">
        <img class="search-icon" src="~assets/image/icon/search.png" alt="search" />
        <b-form-input 
          class="search-input"
          v-model="searchVal"
          placeholder="SEARCH"
          @keydown.enter="search"
        >
        </b-form-input>
        <nuxt-link :to="`/?lang=${$store.state.locale === 'en' ? 'zh' : 'en'}`" target="_blank">
          <img class="ml-3" width="20px" src="~assets//image/icon/language.png" :alt="$t('common.language')" />
        </nuxt-link>
      </div>
    </header>

    <header class="header-box-mob d-block d-xl-none">
      <div class="header-top">
        <img class="mr-4" :src="footerInfo.mobileLogo" width="164px" :alt="$t('index.corporateName')">
        <div class="search-box">
          <img class="search-icon" src="~assets/image/icon/search.png" :alt="$t('common.search')" />
          <b-form-input 
            class="search-input"
            v-model="searchVal"
            placeholder="SEARCH"
            @keydown.enter="search"
          >
          </b-form-input>
          <img 
            class="ml-2" 
            src="~assets/image/icon/menu.png" 
            :alt="$t('common.menu')" 
            @click="$refs.menuDrawerRef.drawer=true"
          />
          <nuxt-link :to="`/?lang=${$store.state.locale === 'en' ? 'zh' : 'en'}`" target="_blank">
            <img class="ml-3" width="20px" src="~assets//image/icon/language.png" :alt="$t('common.language')" />
          </nuxt-link>
        </div>
      </div>

      <nav class="mob-nav hide_scroll_bar d-flex align-items-center justify-content-around">
        <nuxt-link 
          class="nav-link-item d-flex align-items-center" 
          :to="item.to"
          v-for="(item,index) in menuTree"
          :key="index"
        >
          {{ item.label }}
        </nuxt-link>
      </nav>
    </header>

    <MenuDrawer ref="menuDrawerRef" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import MenuDrawer from './menu-drawer.vue';
import HeaderNav from './header-nav.vue';

export default {
  components: { 
    MenuDrawer,
    HeaderNav
  },
  data() {
    return {
      searchVal: '',
    }
  },
  watch: {
    '$route.query.str': {
      handler(val) {
        this.searchVal = val;
      },
      immediate: true
    }
  },
  computed: {
    ...mapState(['menuTree', 'device', 'footerInfo'])
  },
  methods: {
    search() {
      this.$router.push({ path: '/search-result', query: { str: this.searchVal } })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  .search-icon {
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
  }
  .search-input {
    width: 7.5rem;
    height: 2.75rem;
    padding-left: 2.5rem;
    border-color: #015fe8;
    border-radius: 1.375rem;
    transition: all 0.5s ease-in-out;
    &:focus {
      width: 21.25rem;
    }
    &::placeholder {
      color: #015fe8;
    }
  }
}
nav {
  height: 100%;
}
.header-box {
  width: 100%;
  height: 5.75rem;
  padding: 0 1.9375rem;
}

.header-box-mob {
  width: 100%;
  .header-top {
    padding: .8125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .search-box {
      flex: 1;
      .search-input {
        width: 100%;
        height: 2.1875rem;
      }
    }
  }
  .mob-nav {
    height: 2.5rem;
    overflow-y: auto;
    @mixin activeNav {
      &:hover {
        position: relative;
        color: #015fe8;
        background: linear-gradient( 180deg, rgba(1,95,232,0) 0%, rgba(1,95,232,0.08) 100%);
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: .125rem;
          background: #015fe8;
        }
        >a {
          color: #015fe8;
        }
      }
    }
    .nav-link-item {
      height: 100%;
      padding: 0 1.4375rem;
      white-space: nowrap;
      color: #151516;
      @include activeNav;
    }
    .active-item {
      @include activeNav;
    }
  }
}
</style>