优化header在移动端的展示样式

assets/css/base.css

@@ -50,6 +50,12 @@ body{
   }
 }
 
+@media (min-width: 2000px) {
+  .container, .container-sm, .container-md, .container-lg, .container-xl {
+    max-width: 1600px;
+  }
+}
+
 .page-enter-active,
 .page-leave-active {
   transition: opacity 0.3s ease;

components/header.vue

@@ -1,32 +1,19 @@
 <template>
-  <header class="header-box d-flex justify-content-between align-items-center">
+  <div>
-    <b-navbar class="h-100 pb-0" toggleable="lg">
+    <header class="header-box d-none d-md-flex justify-content-between align-items-center">
-      <b-navbar-brand href="/"  class="mr-md-5 mr-0">
+      <img src="~assets/image/logo.png" width="265px" :alt="$t('index.corporateName')">
-        <img src="~assets/image/logo.png" width="265px" alt="">
-      </b-navbar-brand>
 
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+      <nav class="d-md-flex align-items-center">
+        <nuxt-link 
+          class="nav-link-item d-flex align-items-center" 
+          :to="item.href"
+          v-for="(item,index) in menuList"
+          :key="index"
+        >
+          {{ item.name }}
+        </nuxt-link>
+      </nav>
 
-      <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav class="ml-md-5 text-center">
-          <nuxt-link 
-            class="nav-link-item d-flex align-items-center" 
-            :to="item.href"
-            v-for="(item,index) in menuList"
-            :key="index"
-          >
-            {{ item.name }}
-          </nuxt-link>
-
-          <b-nav-item-dropdown class="nav-link-item d-flex align-items-center" text="demo" right>
-            <b-dropdown-item href="#">Account</b-dropdown-item>
-            <b-dropdown-item href="#">Settings</b-dropdown-item>
-          </b-nav-item-dropdown>
-        </b-navbar-nav>
-      </b-collapse>
-    </b-navbar>
-
-    <b-nav-form class="d-none d-md-block">
       <div class="search-box">
         <img class="search-icon" src="~assets/image/icon/search.png" alt="search" />
         <b-form-input 
@@ -36,8 +23,35 @@
         >
         </b-form-input>
       </div>
-    </b-nav-form>
+    </header>
-  </header>
+
+    <header class="header-box-mob d-block d-md-none">
+      <div class="header-top">
+        <img class="mr-4" src="~assets/image/mob-logo.png" 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"
+          >
+          </b-form-input>
+          <img class="ml-2" src="~assets/image/icon/menu.png" :alt="$t('common.menu')" />
+        </div>
+      </div>
+
+      <nav class="mob-nav hide_scroll_bar d-flex align-items-center">
+        <nuxt-link 
+          class="nav-link-item d-flex align-items-center" 
+          :to="item.href"
+          v-for="(item,index) in menuList"
+          :key="index"
+        >
+          {{ item.name }}
+        </nuxt-link>
+      </nav>
+    </header>
+  </div>
 </template>
 
 <script>
@@ -60,81 +74,91 @@ export default {
 </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;
+    }
+  }
+}
+@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 {
+  height: 100%;
+  .nav-link-item {
+    height: 100%;
+    padding: 0 1.4375rem;
+    z-index: 99999;
+    >a {
+      color: #151516;
+    }
+    @include activeNav;
+  }
+  .active-item {
+    @include activeNav;
+  }
+}
 .header-box {
   width: 100%;
   height: 5.75rem;
   padding: 0 1.9375rem;
-  .navbar-nav {
+}
-    z-index: 99;
-  }
-  .navbar-collapse, .navbar-nav {
-    height: 100%;
-    @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;
-        }
-      }
-    }
-    ::v-deep .nav-link-item {
-      padding: 0 1.4375rem;
-      >a {
-        color: #151516;
-      }
-      @include activeNav;
-    }
-    .active-item {
-      @include activeNav;
-    }
-  }
-  .search-box {
-    position: relative;
-    .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;
-      &::placeholder {
-        color: #015fe8;
-      }
-    }
-  }
-  @media screen and (max-width: 400px) {
-    ::v-deep .nav-item {
-      background-color: rgba(0,0,0,0.6);
-      border-bottom: 1px solid #FFFFFF;
-      a {
-        color: #FFFFFF !important;
-      }
-    }
-    ::v-deep .dropdown-menu {
-      background-color: rgba(0,0,0,0.6);
-    }
-  }
 
-  .nav-item {
+.header-box-mob {
-    z-index: 99;
+  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;
   }
 }
 </style>

locales/en.json

@@ -25,7 +25,9 @@
     "fax": "Fax",
     "submit": "SUBMIT",
     "sendInquiry": "Send Inquiry",
-    "chatNow": "Chat Now"
+    "chatNow": "Chat Now",
+    "menu": "Menu",
+    "search": "Search"
   },
   "menu": {
     "Home": "Home",

locales/zh.json

@@ -25,7 +25,9 @@
     "fax": "传真",
     "submit": "提交",
     "sendInquiry": "发送咨询",
-    "chatNow": "立即聊天"
+    "chatNow": "立即聊天",
+    "menu": "菜单",
+    "search": "搜索"
   },
   "menu": {
     "Home": "首页",