bug

src/dashoo.cn/frontend_web/src/assets/styles/base/variables.scss

@@ -58,7 +58,7 @@ $white-darker:              #F0F1F3;
 $main-lighter:              #515e6a;
 $main-light:                #3e4c59;
 $main-dark:                 #283643;
-$main:                      #2b3b49;
+$main:                      #2B3B49;
 $main-darker:               #24313c;
 // $main:                      #001529;
 // $main-darker:               #002140;

src/dashoo.cn/frontend_web/src/components/sidebar1.vue

@@ -1,15 +1,56 @@
 <template>
   <aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
-    <nav class="menu" style="overflow:hidden;position: relative;">
-      <menu-list :items="menus" active-class/>
-    </nav>
+    <div style="height: calc(100vh - 75px); overflow-y: auto; overflow-x: hidden" class="test">
+    <el-menu
+      :collapse="isCollapse"
+      class="el-menu-vertical-demo"
+      :router="true"
+      default-active="/indexlims"
+      background-color="#001529"
+      text-color="#fff"
+      active-text-color="#1890FF"
+      :collapse-transition="false"
+    >
+      <template v-for="(item, index) in menus">
+        <el-menu-item v-if="!item.children" :index="item.url" :key="item" >
+          <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px;"></i>
+          <span slot="title">{{ item.name }}</span>
+        </el-menu-item>
+
+        <el-submenu v-if="item.children" :index="item.name" :key="item">
+          <template slot="title">
+            <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px;"></i>
+            <span slot="title">{{ item.name }}</span>
+          </template>
+          <template v-if="item.children" v-for="sub in item.children" >
+            <el-menu-item v-if="!sub.children"  :index="sub.url"  :key="sub">
+                <!--<i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>-->
+                <span slot="title">{{ sub.name }}</span>
+            </el-menu-item>
+            <el-submenu v-if="sub.children" :index="sub.name" :key="sub">
+              <template slot="title">
+                <i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>
+                <span slot="title">{{ sub.name }}</span>
+              </template>
+              <el-menu-item v-for="sub2 in sub.children" :index="sub2.url" :key="sub2">
+                <span slot="title">{{ sub2.name }}</span>
+              </el-menu-item>
+            </el-submenu>
+          </template>
+
+        </el-submenu>
+      </template>
+    </el-menu>
+    </div>
     <footer class="footer">
-      <a class="toggle icon-before icon-circle-left" title="Toggle navigation menu" @click="toggleMenu"></a>
-      <router-link class="copyright" :to="{ name: 'about' }"> </router-link>
+      <el-button size="mini" type="text" icon="icon-before icon-circle-right" circle v-if="isCollapse == true" @click="floderMenu"></el-button>
+      <el-button size="mini" type="text" icon="icon-before icon-circle-left" circle v-if="isCollapse == false" @click="floderMenu"></el-button>
+      <div v-if="!isCollapse" class="copyright">大数华创</div>
     </footer>
   </aside>
 </template>
 
+
 <script>
 import Vue from 'vue'
 import { mapActions } from 'vuex'
@@ -22,9 +63,14 @@ const MenuGetter = namespace('menu', Getter)
   components: {
     MenuList
   },
+  data() {
+    return {
+      isCollapse: false
+    }
+  },
   methods: {
     ...mapActions(['toggleMenu']),
-    toolfun_gettreejson(rows, idFieldName, pidFieldName, fileds) { 
+    toolfun_gettreejson(rows, idFieldName, pidFieldName, fileds) {
       // 工具方法，将扁平数据转化成tree格式数据
       function nodejsonexists(rows, ParentId) {
         for (var i = 0; i < rows.length; i++) {
@@ -80,7 +126,16 @@ const MenuGetter = namespace('menu', Getter)
         }
       }
       return nodes
+    },
+    floderMenu() {
+      this.isCollapse = !this.isCollapse
+      this.toggleMenu()
     }
+  },
+  watch: {
+    isMenuHidden: function (val) {
+      this.isCollapse = this.isMenuHidden
+    },
   }
 })
 export default class Sidebar extends Vue {
@@ -102,7 +157,7 @@ export default class Sidebar extends Vue {
     }
   }
 
-  //菜单多语言支持 
+  //菜单多语言支持
   translateMenus (menus) {
     return menus.map((menu) => {
       const subMenus = menu.children
@@ -115,3 +170,12 @@ export default class Sidebar extends Vue {
   }
 }
 </script>
+
+<style>
+.test::-webkit-scrollbar {
+   opacity:0.5;
+}
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+  }
+</style>