顶部导航页

src/components/home/HomeAside.vue

@@ -121,6 +121,7 @@ export default {
   //width: 100%;
   height: 100%;
 
+  /*菜单样式*/
   /deep/ .ant-menu-sub {
     box-shadow: none !important;
   }

src/components/home/HomeHeader.vue

@@ -2,19 +2,19 @@
 import logoPng from '@/assets/images/logo.png'
 export default {
   props: {
-    //collapse: Boolean,
+    leftVisible: Boolean,
     isLogin: Boolean,
   },
-  //emits: ['update:collapse'],
-  //setup(props, context) {
-  //  const methods = {
-  //    toggleCollapse() {
-  //      const val = !props.collapse
-  //      context.emit('update:collapse', val)
-  //    },
-  //  }
-  //  return methods
-  //},
+  emits: ['update:leftVisible'],
+  setup(props, context) {
+    const methods = {
+      toggleLeftVisible() {
+        const val = !props.leftVisible
+        context.emit('update:leftVisible', val)
+      },
+    }
+    return methods
+  },
   data() {
     return {
       logoPng,
@@ -31,7 +31,7 @@ export default {
 
 <template>
   <div class="header">
-    <div v-show="isLogin" class="fold">
+    <div v-show="isLogin" class="fold" @click="toggleLeftVisible">
       <a-icon type="unordered-list" class="icon" />
     </div>
     <div class="systemInfo">
@@ -111,6 +111,7 @@ export default {
       vertical-align: top;
       margin-right: 10px;
       margin-top: 15px;
+      pointer-events: none;
     }
     .title {
       display: inline-block;

src/components/home/HomeLeft.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="homeLeft">
+    <a-menu
+        style="height: 100%;width: 200px;display: inline-block"
+        mode="inline"
+        theme="dark"
+    >
+
+      <a-menu-item-group key="g1" >
+        <template slot="title">
+          <div @mouseover="showNav" class="allNavBtn">
+            <div style="height: 12px"></div>
+            <a-icon style="color: white" type="appstore" />
+            <span style="color: white;display: inline-block;margin-left: 12px">全部导航模块</span>
+            <a-icon style="color: white;float: right;margin-right: 15px;padding-top: 3px;font-size: 12px" type="right" />
+          </div>
+        </template>
+      </a-menu-item-group>
+
+      <a-menu-item-group key="common" @mouseover="hideNav" >
+        <template slot="title">
+          <div style="text-align: center;margin-bottom: 12px">
+            <span style="color: white;display: inline-block;margin-left: 12px">常用功能</span>
+          </div>
+        </template>
+
+        <a-menu-item>
+          智能看板
+        </a-menu-item>
+      </a-menu-item-group>
+
+    </a-menu>
+
+    <div class="ioc-nav" v-if="navVisible"  >
+      <NavigationPage />
+    </div>
+
+  </div>
+</template>
+
+<script>
+import NavigationPage from "@/components/home/NavigationPage.vue";
+export default {
+  data() {
+    return {
+      navVisible: false
+    }
+  },
+  components: {
+    NavigationPage
+  },
+  methods: {
+    showNav() {
+      this.navVisible = true;
+    },
+    hideNav() {
+      this.navVisible = false;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@menu-dark-bg: #266a99;
+@menu-dark-submenu-bg: #266a99;
+@menu-dark-color: #fff;
+@menu-dark-arrow-color: #fff;
+@menu-dark-highlight-color: #fff;
+.homeLeft {
+  width: 100%;
+  height: 100%;
+
+  .allNavBtn {
+    width: 100%;
+    cursor: pointer;
+    //text-align: center;
+    padding-bottom: 10px;
+    padding-left: 15%;
+    margin: 12px 0;
+  }
+  .allNavBtn:hover {
+    background-color: @primary-color;
+  }
+
+  .ioc-nav {
+    display: inline-block;
+    vertical-align: top;
+    width: 70%;
+  }
+
+  /deep/ .ant-menu-item-group-title {
+    padding: 0;
+  }
+
+  /*菜单样式*/
+  /deep/ .ant-menu-sub {
+    box-shadow: none !important;
+  }
+  /deep/ .ant-menu-item-selected {
+    color: @menu-dark-selected-item-text-color !important;
+  }
+  .ant-menu-inline-collapsed > .ant-menu-item {
+    padding: 0 !important;
+    margin-left: 0 !important;
+    padding-left: 33% !important;
+  }
+  /deep/ .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
+    padding: 0 !important;
+    margin-left: 0 !important;
+    padding-left: 33% !important;
+  }
+}
+</style>

src/components/home/NavigationPage.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="dashboard">
-    <div class="menu" v-for="menu in menuList" :key="menu.name">
-      <div class="menu-title">{{menu.name}}</div>
-      <ul class="menu-content" >
-        <li class="menu-content-item" v-for="item in menu.children" :key="item.name" >{{ item.name }}</li>
-      </ul>
-    </div>
+  <div class="left-dashboard">
+    <template v-for="menu in menuList">
+      <div class="menu" v-if="menu.name!=='智能看板'" :key="menu.name">
+        <div class="menu-title">{{menu.name}}</div>
+        <ul class="menu-content" >
+          <li class="menu-content-item" v-for="item in menu.children" :key="item.name" >{{ item.name }}</li>
+        </ul>
+      </div>
+    </template>
     <div class="menu sso">
       <div class="menu-title">单点登录</div>
       <div class="menu-content sso-item" v-for="item in ssoList" :key="item.name" >
@@ -40,13 +42,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.dashboard {
+.left-dashboard {
   .menu {
     display: inline-block;
     vertical-align: top;
     width: 150px;
     height: 200px;
-    margin: 10px;
+    margin: 30px;
     .menu-title {
       margin-left: 20px;
       margin-top: 10px;

src/views/HomeView.vue

@@ -3,9 +3,19 @@
   <div class="home">
     <a-layout id="components-layout-demo-top-side-2">
       <a-layout-header class="header">
-        <HomeHeader :collapse.sync="collapse" :is-login="true" />
+        <HomeHeader :leftVisible.sync="leftVisible" :is-login="true" />
       </a-layout-header>
       <a-layout class="main_body">
+        <a-drawer v-if="leftVisible"
+            placement="left"
+            :visible="leftVisible"
+            :get-container="false"
+            :closable="false"
+            @close="closeLeft"
+            width="auto"
+            :wrap-style="{ position: 'absolute' }">
+          <HomeLeft />
+        </a-drawer>
         <a-layout-sider
           v-model="collapse"
           :trigger="null"
@@ -27,16 +37,21 @@
 
 <script>
 import "@/style/common.css";
+import HomeHeader from "@/components/home/HomeHeader.vue";
+import HomeAside from "@/components/home/HomeAside.vue";
+import HomeLeft from "@/components/home/HomeLeft.vue";
 
 export default {
   name: "HomeView",
   components: {
-    HomeHeader: () => import("@/components/home/HomeHeader.vue"),
-    HomeAside: () => import("@/components/home/HomeAside.vue"),
+    HomeHeader,
+    HomeAside,
+    HomeLeft,
   },
   data() {
     return {
       collapse: true, // 侧边栏是否收起
+      leftVisible: false,
       asideWidth: 160,
       contentWidth: "84%",
       contentHeight: 450,
@@ -51,6 +66,9 @@ export default {
     }
   },
   methods: {
+    closeLeft() {
+      this.leftVisible = false
+    },
     judgeHideAside() {
       let name = this.$route.name
       if (['dashboard'].indexOf(name)>-1) {
@@ -66,6 +84,11 @@ export default {
   width: 100%;
   height: 100%;
 
+  /deep/ .ant-drawer-body {
+    padding: 0;
+    height: 100%;
+  }
+
   .header {
     height: 60px;
     padding: 0;
@@ -73,6 +96,7 @@ export default {
   }
   .main_body{
     height:calc(100vh - 60px);
+    position: relative;
   }
 
   .home-page {