update

components/Header.vue

 <template>
   <div>
     <header class="main-header">
-      <nuxt-link to="/" class="logo"></nuxt-link>
-      <div class="search"></div>
-      <div class="menu"></div>
+      <template v-if="!searchVisible">
+        <nuxt-link to="/" class="logo"></nuxt-link>
+        <div class="search" @click="toggleSearch"></div>
+        <div class="menu" :class="menuClasses" @click="toggleMenu"></div>
+      </template>
+      <div class="search-box" v-else>
+        <div class="search-inner">
+          <input type="text" placeholder="请输入关键词" class="search-input" ref="search" />
+          <div class="search-btn" @click="search"></div>
+        </div>
+        <div class="search-close" @click="toggleSearch"></div>
+      </div>
     </header>
-    <app-menu></app-menu>
+    <app-search v-if="searchVisible"></app-search>
+    <app-menu v-show="menuVisible"></app-menu>
   </div>
 </template>
 
 <script>
 import AppMenu from '@/components/Menu'
+import AppSearch from '@/components/Search'
 export default {
-  components: { AppMenu }
+  components: { AppMenu, AppSearch },
+  data() {
+    return {}
+  },
+  computed: {
+    searchVisible() {
+      return this.$store.state.searchVisible
+    },
+    menuVisible() {
+      return this.$store.state.menuVisible
+    },
+    menuClasses() {
+      return {
+        'is-open': this.menuVisible
+      }
+    }
+  },
+  watch: {
+    $route() {
+      this.$store.commit('toggleSearch', false)
+      this.$store.commit('toggleMenu', false)
+    }
+  },
+  methods: {
+    toggleSearch() {
+      this.$store.commit('toggleSearch', !this.searchVisible)
+      this.searchVisible &&
+        this.$nextTick(() => {
+          this.$refs.search.focus()
+        })
+    },
+    toggleMenu() {
+      this.$store.commit('toggleMenu', !this.menuVisible)
+    },
+    search() {
+      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
+    }
+  }
 }
 </script>
 
@@ -23,7 +71,7 @@ export default {
   align-items: center;
   padding: 0.16rem 0.15rem 0.2rem;
   background-color: #fff;
-  border-top: 10px solid #aa1941;
+  border-top: 0.05rem solid #aa1941;
   box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.14);
   .logo {
     flex: 1;
@@ -35,15 +83,58 @@ export default {
     width: 0.18rem;
     height: 0.18rem;
     padding: 0 0.08rem;
-    background: url('~/assets/images/icom_search.png') no-repeat center;
+    background: url('~/assets/images/icon_search.png') no-repeat center;
     background-size: 0.18rem 0.18rem;
+    cursor: pointer;
   }
   .menu {
     width: 0.18rem;
     height: 0.18rem;
     padding: 0 0.08rem;
-    background: url('~/assets/images/icom_menu.png') no-repeat center;
+    background: url('~/assets/images/icon_menu.png') no-repeat center;
     background-size: 0.18rem 0.18rem;
+    cursor: pointer;
+    &.is-open {
+      background: url('~/assets/images/icon_close.png') no-repeat center;
+      background-size: 0.18rem 0.18rem;
+    }
+  }
+
+  .search-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    .search-inner {
+      height: 0.24rem;
+      flex: 1;
+      display: flex;
+      border: 0.01rem solid #eaeaea;
+      border-radius: 0.03rem;
+      overflow: hidden;
+    }
+    .search-input {
+      flex: 1;
+      height: 100%;
+      padding: 0 0.1rem;
+      border: 0;
+    }
+    .search-btn {
+      width: 0.18rem;
+      height: 100%;
+      padding: 0 0.05rem;
+      background: url('~/assets/images/icon_search_hover.png') no-repeat center;
+      background-size: 0.18rem 0.18rem;
+      cursor: pointer;
+    }
+    .search-close {
+      margin-left: 0.02rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      padding: 0 0.08rem;
+      background: url('~/assets/images/icon_close.png') no-repeat center;
+      background-size: 0.18rem 0.18rem;
+      cursor: pointer;
+    }
   }
 }
 </style>

components/Menu.vue

@@ -104,9 +104,9 @@ export default {
   // right: 0;
   // top: 0.62rem;
   // bottom: 0;
-  background-color: #fff;
-  // z-index: 100;
   padding: 0 0.15rem;
+  min-height: 100vh;
+  background-color: #fff;
   .first > .cell .cell-title {
     font-size: 0.14rem;
     font-weight: bold;

components/Search.vue

 <template>
-  <div></div>
+  <div class="app-search">
+    <div class="hot-search">
+      <h2 class="hot-search__title">热门搜索</h2>
+      <ul class="hot-search__list">
+        <li v-for="(item, index) in hotList" :key="index">
+          <nuxt-link :to="item.path" v-if="item.path">{{ item.name }}</nuxt-link>
+          <a :href="item.href" v-else-if="item.href" target="_blank">{{ item.name }}</a>
+          <template v-else>{{ item.name }}</template>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      hotList: [
+        { name: '1+x', href: 'https://x.ezijing.com' },
+        { name: '金融', href: 'https://kelley.ezijing.com' },
+        { name: 'MBA', href: 'https://sofia.ezijing.com' },
+        { name: '心理学', href: 'https://ciis.ezijing.com' },
+        { name: '新闻', path: '/about/news' }
+      ]
+    }
+  }
+}
 </script>
+
+<style lang="scss">
+.app-search {
+  padding: 0 0.15rem;
+  min-height: 100vh;
+  background-color: #fff;
+}
+.hot-search {
+}
+.hot-search__title {
+  padding: 0.2rem 0;
+  font-size: 0.12rem;
+  font-weight: 400;
+  color: #333;
+  border-bottom: 1px solid #999;
+}
+.hot-search__list {
+  li {
+    font-size: 0.14rem;
+    color: #333;
+    font-weight: 500;
+    line-height: 0.52rem;
+    border-bottom: 1px solid #999;
+  }
+  a {
+    display: block;
+  }
+}
+</style>

components/TreeItem.vue

@@ -3,19 +3,11 @@
     <div class="cell" :class="{ bold: isFolder }" @click="toggle">
       <div class="cell-title">
         <!-- 站内跳转 -->
-        <template v-if="item.path">
-          <nuxt-link :to="item.path">
-            {{ item.name }}
-          </nuxt-link>
-        </template>
+        <nuxt-link :to="item.path" v-if="item.path">{{ item.name }}</nuxt-link>
         <!-- 外部链接跳转 -->
-        <template v-else-if="item.href">
-          <a :href="item.href" target="_blank">{{ item.name }}</a>
-        </template>
+        <a :href="item.href" target="_blank" v-else-if="item.href">{{ item.name }}</a>
         <!-- 事件 -->
-        <template v-else-if="item.onClick">
-          <div @click="item.onClick">{{ item.name }}</div>
-        </template>
+        <div @click="item.onClick" v-else-if="item.onClick">{{ item.name }}</div>
         <template v-else>{{ item.name }}</template>
       </div>
       <div class="cell-icon" v-if="isFolder">

layouts/default.vue

 <template>
-  <div class="main-layout">
+  <div class="main-layout" :class="{ 'is-fixed': isFixed }">
     <app-header />
-    <Nuxt />
-    <app-footer />
+    <div v-show="!isFixed">
+      <Nuxt />
+      <app-footer />
+    </div>
   </div>
 </template>
 
@@ -10,6 +12,12 @@
 import AppHeader from '@/components/Header'
 import AppFooter from '@/components/Footer'
 export default {
-  components: { AppHeader, AppFooter }
+  components: { AppHeader, AppFooter },
+  computed: {
+    isFixed() {
+      const { searchVisible, menuVisible } = this.$store.state
+      return searchVisible || menuVisible
+    }
+  }
 }
 </script>

nuxt.config.js

@@ -14,8 +14,10 @@ export default {
     },
     meta: [
       { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover'
+      },
       {
         name: 'keywords',
         content:

store/index.js

+export const state = () => ({
+  searchVisible: false,
+  menuVisible: false
+})
+
+export const mutations = {
+  toggleSearch(state, visible) {
+    state.searchVisible = visible
+  },
+  toggleMenu(state, visible) {
+    state.menuVisible = visible
+  }
+}