style:导航样式

 <template>
   <div class="navbar-con">
     <div class="navbar">
-      <!-- <div class="backdrop">
-        <sidebar />
-      </div> -->
-      <div class="right-menu">
-        <div class="dataView pointer" @click="handleDataView">大屏展示</div>
-        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
-          <div class="avatar-wrapper">
-            <span style="padding-right:10px">{{ name }}</span>
-            <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
-          </div>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="a">个人中心</el-dropdown-item>
-            <el-dropdown-item command="b">退出</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+      <div class="sidebarLeft">
+        <sidebarLeft />
+      </div>
+      <div class="sidebarRight d-center">
+        <sidebarRight />
+        <div class="right-menu">
+          <div class="dataView pointer" @click="handleDataView">大屏展示</div>
+          <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
+            <div class="avatar-wrapper">
+              <span style="padding-right:10px">{{ name }}</span>
+              <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="a">个人中心</el-dropdown-item>
+              <el-dropdown-item command="b">退出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import defaultSettings from '@/settings'
-import Sidebar from './Sidebar'
+import sidebarLeft from './Sidebar/sidebarLeft'
+import sidebarRight from './Sidebar/sidebarRight'
 import { mapGetters } from 'vuex'
 export default {
   components: {
-    Sidebar,
+    sidebarLeft,
+    sidebarRight
   },
   computed: {
     ...mapGetters(['sidebar', 'avatar', 'name'])
@@ -46,58 +51,61 @@ export default {
     },
     handleCommand (command) {
       if (command == 'a') {
-      } else {
-
       }
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.dataView {
-  color: #fff;
+/deep/.el-menu--horizontal {
+  display: flex;
+  align-items: center;
 }
 
-.NoticeBar {
-  position: absolute;
-  bottom: 0;
+.menubg {
+  line-height: 30px;
+  color: #FFFFFF;
+  margin-right: 5px;
+  background: linear-gradient(180deg, #0A2580 0%, #2542C9 100%);
 }
 
-.el-dropdown-menu {
-  padding: 0 !important;
-  border: 1px solid #EBEEF5;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  border-radius: 4px 0 0 4px 4px;
-
-  .el-dropdown-menu__item {
-    text-align: center;
-    margin-top: 0 !important;
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #4A4A4A;
-    width: 140px;
-    height: 36px;
-    line-height: 36px;
-  }
+/deep/.el-menu-item {
+  @extend .menubg;
+}
 
-  .el-dropdown-menu__item:nth-child(6) {
-    border-top: 1px solid #EBEEF5;
-  }
+/deep/.el-submenu {
+  @extend .menubg;
+}
 
-  .popper__arrow {
-    top: -11px !important;
-    left: 110px !important;
-    transform: rotate(0deg) scale(2);
-  }
+/deep/.el-submenu__title {
+  line-height: 30px !important;
+  height: 42px !important;
+}
 
-  .el-dropdown-menu__item:not(.is-disabled):hover,
-  .el-dropdown-menu__item:focus {
-    background: #F6F7F9;
-    color: #4A4A4A;
-  }
+/deep/.el-submenu__title span {
+  font-size: 14px;
+}
+
+// 导航选中背景色
+.xuanzhong {
+  background: linear-gradient(180deg, #73551D 0%, #C09C43 100%);
+  font-weight: 700;
+  color: #FFFFFF !important;
+}
+
+/deep/.el-menu-item:hover {
+  @extend .xuanzhong;
+}
+
+/deep/.el-submenu__title:hover {
+  @extend .xuanzhong;
+}
+
+/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
+  @extend .xuanzhong;
 }
 
+
 .navbar {
   height: $headerHeight;
   overflow: hidden;
@@ -108,27 +116,6 @@ export default {
   padding: 0 20px;
   justify-content: space-between;
 
-  .header-logo {
-    width: 300px;
-  }
-
-  .hamburger-container {
-    line-height: 43px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background 0.3s;
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
-
   .right-menu {
     float: right;
     height: 100%;
@@ -136,11 +123,6 @@ export default {
     display: flex;
     align-items: center;
 
-    .function {
-      margin: 0 15px;
-      cursor: pointer;
-    }
-
     .shutdown {
       font-size: 20px;
       margin-left: 15px;

@@ -13,17 +13,8 @@ export default {
     }
   },
   render (h, context) {
-    const { icon, title } = context.props
+    const { title } = context.props
     const vnodes = []
-
-    if (icon) {
-      if (icon.includes('el-icon')) {
-        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
-      } else {
-        vnodes.push(<svg-icon icon-class={icon} />)
-      }
-    }
-
     if (title) {
       vnodes.push(<span slot='title'>{(title)}</span>)
     }
@@ -31,11 +22,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.sub-el-icon {
-  color: currentColor;
-  width: 1em;
-  height: 1em;
-}
-</style>

+<template>
+  <el-menu router :default-active="activeMenu" mode="horizontal">
+    <!-- 权限菜单 -->
+    <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
+    <!-- 菜单全部展示 -->
+    <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" />
+  </el-menu>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+import { asyncRoutes1 } from '@/router'
+export default {
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters(['permission_routes', 'sidebar']),
+    activeMenu () {
+      const route = this.$route
+      const { meta, path } = route
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    variables () {
+      return variables
+    },
+    asyncRoutes () {
+      return asyncRoutes1.slice(0, 3)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.el-menu--horizontal {
+  display: flex;
+  background: none !important;
+}
+</style>
\ No newline at end of file

 <template>
-  <div>
-    <el-menu router :default-active="activeMenu" mode="horizontal">
-      <!-- 权限菜单 -->
-      <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
-      <!-- 菜单全部展示 -->
-      <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" />
-    </el-menu>
-  </div>
+  <el-menu router :default-active="activeMenu" mode="horizontal">
+    <!-- 权限菜单 -->
+    <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
+    <!-- 菜单全部展示 -->
+    <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" />
+  </el-menu>
 </template>
 
 <script>
@@ -31,7 +29,7 @@ export default {
       return variables
     },
     asyncRoutes () {
-      return asyncRoutes1
+      return asyncRoutes1.slice(3, asyncRoutes1.length)
     }
   }
 }

 export { default as AppMain } from './AppMain'
 export { default as Navbar } from './Navbar'
-export { default as Sidebar } from './Sidebar/index.vue'
+export { default as Sidebar } from './Sidebar/sidebarRight.vue'
 export { default as TagsView } from './TagsView/index.vue'

@@ -298,20 +298,6 @@ export const asyncRoutes = [
 
 export const asyncRoutes1 = [
   // 监管首页
-  // {
-  //   path: '/',
-  //   component: Layout1,
-  //   redirect: '/jgHome',
-  //   meta: { title: '首页' },
-  //   children: [
-  //     {
-  //       path: 'jgHome',
-  //       component: () => import('@/views/jgHome/index'),
-  //       name: 'jgHome',
-  //       meta: { title: '首页', icon: 'workbench', affix: true }
-  //     }
-  //   ]
-  // },
   {
     path: '/',
     component: Layout1,

@@ -81,9 +81,7 @@
       </div>
     </div>
   </div>
-
 </template>
-
 <script>
 import drawMixin from "../../utils/drawMixin";
 import { formatTime } from '../../utils/index.js'