完成公共头部的改造

src/views/home/index.vue

@@ -19,6 +19,7 @@
               trigger="click"
               height="105px"
               :autoplay="false"
+              :loop='false'
               arrow="always"
               indicator-position="none"
             >

src/views/layout/index.vue

@@ -1,26 +1,45 @@
 <!--  -->
 <template>
-<div class='layout'>
-  <div class="top">
+  <div class="layout">
+    <div class="top" @mouseleave='isShow=0'>
       <div class="left">
-            <img src="@/assets/img/logo.png" alt="">
-            <h2>馆藏管理系统</h2>
+        <img src="@/assets/img/logo.png" alt="" />
+        <h2>馆藏管理系统</h2>
+        <div class="box"
+          @mouseenter='isShow = index'
+        v-for="(item, index) in tabList" :key="index">
+          <a
+          @click="toHome(index)"
+          :class="{ active: $route.meta.myInd === index }"
+        >
+          {{ item.name }}
+          <ul v-show="isShow === index"
+               @mouseenter='isShow = index'
+               >
+            <li v-for="(val, ind) in item.son" :key="ind"
+                @click="skip(item,ind)">{{ val }}</li>
+          </ul>
+        </a>
+        </div>
 
-        <router-link to="/layout/home" :class='{active:$route.meta.myInd===0}'>首页</router-link>
-        <router-link to="/layout/holding0" :class='{active:$route.meta.myInd===1}'>馆藏管理</router-link>
+        <!-- <router-link to="/layout/holding0" :class='{active:$route.meta.myInd===1}'>馆藏管理
+        <ul>
+          <li>藏品登记</li>
+        </ul>
+        </router-link>
         <router-link to="/layout/collect0" :class='{active:$route.meta.myInd===2}'>征集品管理</router-link>
         <router-link to="/layout/statistics0" :class='{active:$route.meta.myInd===3}'>馆藏统计</router-link>
-        <router-link to="/layout/system0" :class='{active:$route.meta.myInd===4}'>系统管理</router-link>
+        <router-link to="/layout/system0" :class='{active:$route.meta.myInd===4}'>系统管理</router-link> -->
       </div>
       <div class="right">
         <div class="img">
-          <img src="@/assets/img/user.png" alt="">
+          <img src="@/assets/img/user.png" alt="" />
         </div>
-          <span>Admin</span>
+        <span>Admin</span>
       </div>
+    </div>
+    <Router-view />
   </div>
-  <Router-view />
-</div>
 </template>
 
 <script>
@@ -35,23 +54,61 @@ export default {
   data () {
     // 这里存放数据
     return {
+      // 控制子菜单显示
+      isShow: 0,
+      tabList: [
+        {
+          name: '首页',
+          push: '/layout/home'
+        },
+        {
+          name: '馆藏管理',
+          push: '/layout/holding',
+          son: [
+            '藏品登记',
+            '入库管理',
+            '出库管理',
+            '藏品总账',
+            '藏品盘核',
+            '藏品注销'
+          ]
+        },
+        {
+          name: '征集品管理',
+          push: '/layout/collect',
+          son: ['collect1', 'collect2', 'collect3']
+        },
+        {
+          name: '馆藏统计',
+          push: '/layout/statistics',
+          son: ['statistics1', 'statistics2', 'statistics3']
+        },
+        {
+          name: '系统管理',
+          push: '/layout/system',
+          son: ['system1', 'system2', 'system3']
+        }
+      ]
     }
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {
-  },
+  watch: {},
   // 方法集合
   methods: {
+    skip (item, ind) {
+      this.$router.push(item.push + ind).catch(() => {})
+      this.isShow = 0
+    },
+    toHome (index) {
+      if (index === 0) this.$router.push('/layout/home')
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
+  mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -62,7 +119,7 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-.layout{
+.layout {
   .top {
     min-width: 1142px;
     display: flex;
@@ -77,25 +134,45 @@ export default {
     }
     display: flex;
     align-items: center;
-    &>img {
+    & > img {
       margin-left: 15px;
     }
     h2 {
       color: #fff;
-      margin-right:30px;
+      margin-right: 30px;
     }
-  .active {
-    color: #fff;
-  }
-    &>a {
+    .active {
+      color: #fff;
+    }
+    .box {
+      position: relative;
       cursor: pointer;
       margin: 0 30px;
+      ul {
+        z-index: 9999;
+        position: absolute;
+        top: 43px;
+        left: -32px;
+        background-color: #001529;
+        li {
+          width: 130px;
+          height: 50px;
+          line-height: 50px;
+          text-align: center;
+          color: #a5acb3;
+          font-size: 14px;
+        }
+        li:hover {
+          background-color: #1890ff;
+          color: #fff;
+        }
+      }
     }
-    &>a:hover {
+    .box:hover a{
       color: #fff;
     }
   }
-  .right{
+  .right {
     display: flex;
     align-items: center;
     margin-right: 50px;
@@ -109,10 +186,9 @@ export default {
         height: 100%;
       }
     }
-    &>span {
+    & > span {
       margin-left: 15px;
     }
   }
 }
-
 </style>