init manu

src/App.vue

 <template>
   <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
+<!--    <nav>-->
+<!--      <router-link to="/">Home</router-link> |-->
+<!--      <router-link to="/about">About</router-link>-->
+<!--    </nav>-->
     <router-view/>
   </div>
 </template>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+/*#app {*/
+/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
+/*  -webkit-font-smoothing: antialiased;*/
+/*  -moz-osx-font-smoothing: grayscale;*/
+/*  text-align: center;*/
+/*  color: #2c3e50;*/
+/*}*/
 
 nav {
   padding: 30px;

src/components/ThreeMenu.vue

+<template>
+  <div class="menu">
+    <div class="cover" :class="[filter.selected!==''?'':'invisible']"></div>
+    <div class="filter fixed">
+      <!-- 一级菜单开始 -->
+      <div class="fmenu">
+        <div :class="{cf:true, active:cfName !=='吃饭'}" class="flex">
+          <div class="sn" :class="[filter.selected==='cf'?'open':'close']" @click="switchFilter" data-name="cf">{{cfName}}</div>
+        </div>
+        <div :class="{sj:true,active:sjName !=='睡觉'}" class="flex">
+          <div class="sn" :class="[filter.selected==='sj'?'open':'close']" @click="switchFilter" data-name="sj">{{sjName}}</div>
+        </div>
+        <div :class="{dd:true,active:ddName !=='打豆豆'}" class="flex">
+          <div class="sn" :class="[filter.selected==='dd'?'open':'close']" @click="switchFilter" data-name="dd">{{ddName}}</div>
+        </div>
+      </div>
+      <!-- 一级菜单结束 -->
+      <!-- 二级菜单开始 -->
+      <div class="fkind" :class="[filter.selected===''?'invisible':'']">
+        <div :class="[filter.selected==='cf'?'':'invisible']" class="item-cf">
+          <div class="tabs">
+            <div :class="{zc:true,on:filter.secondTab==='zc'}" data-name='zc' @click="secondTab" >中餐</div>
+            <div :class="{xc:true,on:filter.secondTab==='xc'}" data-name='xc' @click="secondTab" >西餐</div>
+          </div>
+          <div class="tab-zc" :class="[filter.secondTab==='zc'?'xs':'yc']" v-if="filter.secondTab==='zc'">
+            <div class="left" >
+              <div :data-text="item.name" :data-id="item.id" :class="{active:item.id===filter.threeTabId}" @click="threeTab" v-for="(item,index) in zcs " :key="index">{{item.name}}</div>
+            </div>
+            <div class="right" v-for="(item,index) in zcm" v-if="item.id===filter.threeTabId" :key="index" >
+              <div class="cm" v-for="(t,i) in item.name" :key="i" @click="dosomething" >
+                {{t}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TreeMenu",
+  data () {
+    return {
+      filter: {
+        selected: '', // 一级模块;
+        secondTab: 'zc', // 现有默认;
+        threeTabId: ''
+      },
+      zcs: [
+        {
+          id: 1,
+          name: '河南'
+        },
+        {
+          id: 2,
+          name: '四川'
+        },
+        {
+          id: 3,
+          name: '河北'
+        }
+      ],
+      xcg: ['美国', '英国', '加拿大'],
+      zcm: [
+        {
+          id: 1,
+          name: ['馒头', '烩面', '胡辣汤']
+        },
+        {
+          id: 2,
+          name: ['麻婆豆腐', '辣椒炒肉', '火锅']
+        },
+        {
+          id: 3,
+          name: ['驴肉火烧', '酱汁瓦块鱼', '大饼']
+        }
+      ]
+    }
+  },
+  computed: {
+    cfName () {
+      return '吃饭'
+    },
+    sjName () {
+      return '睡觉'
+    },
+    ddName () {
+      return '打豆豆'
+    }
+  },
+  methods: {
+    // 一级菜单
+    switchFilter (e) {
+      let name = e.currentTarget.dataset.name
+      if (this.filter.selected === name) {
+        name = ''
+      }
+      this.filter.selected = name
+    },
+    // 二级菜单tab栏;
+    secondTab (e) {
+      this.filter.secondTab = e.currentTarget.dataset.name
+    },
+    // 三级菜单;
+    threeTab (e) {
+      this.filter.threeTabId = e.currentTarget.dataset.id
+    },
+    dosomething (e) {
+      let id = e.currentTarget.dataset.id
+      let name = e.currentTarget.dataset.name
+      this.filter.selected = ''
+      alert('头痛！')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+                  .filter{
+.fmenu{
+  display: flex;
+  text-align: center;
+}
+.flex{
+  flex: 1;
+};
+.sn.open{
+  background-color: pink;
+}
+.invisible{
+  display: none;
+}
+.fkind{
+  padding-top: 1.333333rem;
+}
+.tabs{
+  display: flex;
+.on{
+  background-color: green;
+};
+div{
+  flex:1;
+  text-align: center;
+};
+
+}
+.tab-zc{
+  padding-top: 1.333333rem;
+  display: flex;
+.left{
+  flex:1;
+};
+.right{
+  flex: 1;
+}
+}
+.active{
+  background-color: pink;
+}
+}
+.cover{
+  background-color: rgba(0,0,0,.2);
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+  z-index: 4;
+&.invisible {
+   display: none;
+ }
+}
+.fixed{
+  background-color: #fff;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+}
+</style>
\ No newline at end of file

src/router/index.js

@@ -18,7 +18,21 @@ const routes = [
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
   },
-
+  {
+    path: '/junior',
+    name: 'junior',
+    component: () => import('../views/JuniorView.vue')
+  },
+  {
+    path: '/intermediate',
+    name: 'intermediate',
+    component: () => import('../views/IntermediateView.vue')
+  },
+  {
+    path: '/senior',
+    name: 'sunior',
+    component: () => import('../views/SeniorView.vue')
+  }
 
 ]
 

src/views/AboutView.vue

 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+   <threeMenu></threeMenu>
   </div>
 </template>
+
+<script>
+import ThreeMenu from "@/components/ThreeMenu";
+export default {
+  name: "about",
+  components: {
+    ThreeMenu,
+  },
+}
+</script>
\ No newline at end of file

src/views/HomeView.vue

 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div class="junior">
+      <a href="/junior">初级</a>
+    </div>
+    <div class="intermediate">
+      <a href="/intermediate">中级</a>
+    </div>
+    <div class="senior">
+      <a href="/senior">高级</a>
+    </div>
+    <div class="test">
+      <a href="/about">调试菜单</a>
+    </div>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
 export default {
   name: 'HomeView',
-  components: {
-    HelloWorld
-  }
 }
 </script>

src/views/IntermediateView.vue

+<template>
+  <div>
+    <h1>this is intermediateView</h1>
+    <a href="/">back</a>
+    <div class="manu">
+      <ThreeMenu> </ThreeMenu>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThreeMenu from "@/components/ThreeMenu";
+export default {
+  name: "InternediateView",
+  components: {
+    ThreeMenu,
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/JuniorView.vue

+<template>
+  <div>
+    <h1>this is juniorView.</h1>
+    <a href="/">back</a>
+    <div class="manu">
+      <ThreeMenu> </ThreeMenu>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import ThreeMenu from "@/components/ThreeMenu";
+
+export default {
+  name: "JuniorView",
+
+  components: {
+    ThreeMenu,
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/SeniorView.vue

+<template>
+  <div>
+    <h1>this is SeniorView</h1>
+    <a href="/">back</a>
+    <div class="manu">
+      <ThreeMenu> </ThreeMenu>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThreeMenu from "@/components/ThreeMenu";
+
+export default {
+  name: "SeniorView",
+  components: {
+    ThreeMenu,
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file