qj-common 4.3.0 → 4.3.2

package/src/views/layout/theme/darkBlue/components/LeftNavbar.3.vue

@@ -1,191 +1,191 @@
-<template>
-    <div :class="{'is-active':sidebar.appNavOpen}" class="el-menu-vertical-demo" :style="{height:height+'px'}">
-        <div class="tool-menu-svg">
-           <a class="logo-container">
-               <img src="../assets/logo.png">
-           </a>
-        </div>
-        <scroll-bar class="app-scroll-container">
-
-          <el-menu
-            default-active="2"
-            class="el-menu-vertical-demo"
-            background-color="#fff"
-            @open="handleOpen"
-            @close="handleClose">
-            <el-submenu v-for="item in appList.list" :key="item.menuJspath" :index="item.menuJspath || item.proappMenuCode">
-              <template slot="title">
-                <i class="iconfont icon-shangpinguanli" :class="item.proappMenuRemark"></i>
-                <span>{{item.menuName}}</span>
-              </template>
-              <el-menu-item  v-for="itemT in item.children" v-if="itemT.children===null" :key="itemT.menuJspath" :index="itemT.menuJspath || itemT.proappMenuCode">{{itemT.menuName}}</el-menu-item>
-              <el-submenu v-for="itemT in item.children" v-if="itemT.children!==null" :key="itemT.menuJspath" :index="itemT.menuJspath || itemT.proappMenuCode">
-                <template slot="title">{{itemT.menuName}}</template>
-                <el-menu-item v-for="itemTr in itemT.children" :key="itemTr.menuJspath" :index="itemTr.menuJspath || itemTr.proappMenuCode">{{itemTr.menuName}}</el-menu-item>
-              </el-submenu>
-            </el-submenu>
-
-          </el-menu>
-       </scroll-bar>
-
-    </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import ScrollBar from "#/components/ScrollBar";
-
-export default {
-  components: { ScrollBar },
-  data() {
-    return {
-      appActive: process.env.APP_PATH, // 当前点击的项目名称
-      height: document.documentElement.clientHeight - 58 - 40,
-      isCollapse: true
-    };
-  },
-  mounted() {
-    window.addEventListener("resize", this.heightChange);
-    console.log(this.appList, "applist");
-  },
-  computed: {
-    ...mapGetters(["appList", "sidebar"])
-  },
-  methods: {
-    handleSelect(key, keyPath) {
-      if (!key) {
-        return;
-      }
-      var url = "";
-      this.appList.list.forEach(item => {
-        if (item.menuJspath === key) {
-          url = item.menuAction;
-        }
-      });
-      window.location.href = url;
-      console.log(key, keyPath);
-    },
-    handleOpen(key, keyPath) {
-      console.log(key, keyPath);
-    },
-    handleClose(key, keyPath) {
-      console.log(key, keyPath);
-    },
-    heightChange() {
-      this.height = document.documentElement.clientHeight - 58 - 40;
-    }
-  }
-};
-</script>
-<style>
-/* .el-submenu__title {
-  padding: 0 !important;
-} */
-.el-menu-item-group__title {
-  padding: 0px !important;
-}
-</style>
-
-<style rel="stylesheet" lang="scss" scoped>
-.el-menu-vertical-demo {
-  /* position: absolute; */
-  width: 196px;
-  /* left: 0;
-      top:0;
-      bottom: 0; */
-  background: #fff;
-  transition: width 0.43s;
-  overflow: overlay;
-}
-.el-menu-vertical-demo.is-active {
-  width: 50px;
-}
-.el-menu-vertical {
-  width: 100%;
-  height: 100%;
-  border-right: none;
-}
-
-.el-menu-item:hover,
-.el-menu-item:hover a,
-.el-menu-item:hover a i {
-  background: #243646 !important;
-  color: #fff;
-}
-.el-menu-item.is-active,
-.el-menu-item.is-active a,
-.el-menu-item.is-active a i {
-  background: #243646 !important;
-  color: #fff;
-}
-.el-menu-item.is-active {
-  border-right: 3px solid #243646;
-}
-// #app .nest-menu .el-submenu > .el-submenu__title,
-// #app .el-submenu .el-menu-item {
-//   background: none;
-// }
-.logo-container {
-  overflow: hidden;
-  display: inline-block;
-  width: 48px;
-  height: 80px;
-  border-radius: 50%;
-  background: #eee;
-  margin: 5px auto;
-  text-align: center;
-}
-.logo-container img {
-  width: 100%;
-  max-width:145px;
-  max-height:50px;
-  border-radius: 50%;
-}
-.el-submenu .el-menu-item {
-  min-width: 196px;
-}
-.tool-menu-svg {
-  font-size: 14px;
-  width: 196px;
-  height: 190px;
-  text-align: center;
-  position: absolute;
-  z-index: 12;
-  background: #fff;
-  /* box-shadow: -5px 2px 10px 0 #333; */
-}
-.app-scroll-container {
-  /*    margin-top: 72px;
-        padding-bottom: 72px;*/
-  margin-top: 190px;
-}
-.app-scroll-container.scroll-container {
-  background: #fff;
-}
-.el-menu-custom {
-  margin-left: 34px;
-  width: 140px;
-}
-.el-menu-list {
-  /* border-top: 1px solid #666; */
-  min-width: 160px !important;
-  border-left: 1px solid #999;
-  padding: 0px !important;
-}
-
-.el-menu-list i {
-  width: 20px;
-  height: 1px;
-  background: #999;
-  display: inline-block;
-}
-.el-menu-list span {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #666;
-  margin-right: 6px;
-}
-</style>
-
+<template>
+    <div :class="{'is-active':sidebar.appNavOpen}" class="el-menu-vertical-demo" :style="{height:height+'px'}">
+        <div class="tool-menu-svg">
+           <a class="logo-container">
+               <img src="../assets/logo.png">
+           </a>
+        </div>
+        <scroll-bar class="app-scroll-container">
+
+          <el-menu
+            default-active="2"
+            class="el-menu-vertical-demo"
+            background-color="#fff"
+            @open="handleOpen"
+            @close="handleClose">
+            <el-submenu v-for="item in appList.list" :key="item.menuJspath" :index="item.menuJspath || item.proappMenuCode">
+              <template slot="title">
+                <i class="iconfont icon-shangpinguanli" :class="item.proappMenuRemark"></i>
+                <span>{{item.menuName}}</span>
+              </template>
+              <el-menu-item  v-for="itemT in item.children" v-if="itemT.children===null" :key="itemT.menuJspath" :index="itemT.menuJspath || itemT.proappMenuCode">{{itemT.menuName}}</el-menu-item>
+              <el-submenu v-for="itemT in item.children" v-if="itemT.children!==null" :key="itemT.menuJspath" :index="itemT.menuJspath || itemT.proappMenuCode">
+                <template slot="title">{{itemT.menuName}}</template>
+                <el-menu-item v-for="itemTr in itemT.children" :key="itemTr.menuJspath" :index="itemTr.menuJspath || itemTr.proappMenuCode">{{itemTr.menuName}}</el-menu-item>
+              </el-submenu>
+            </el-submenu>
+
+          </el-menu>
+       </scroll-bar>
+
+    </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import ScrollBar from "#/components/ScrollBar";
+
+export default {
+  components: { ScrollBar },
+  data() {
+    return {
+      appActive: process.env.APP_PATH, // 当前点击的项目名称
+      height: document.documentElement.clientHeight - 58 - 40,
+      isCollapse: true
+    };
+  },
+  mounted() {
+    window.addEventListener("resize", this.heightChange);
+    console.log(this.appList, "applist");
+  },
+  computed: {
+    ...mapGetters(["appList", "sidebar"])
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      if (!key) {
+        return;
+      }
+      var url = "";
+      this.appList.list.forEach(item => {
+        if (item.menuJspath === key) {
+          url = item.menuAction;
+        }
+      });
+      window.location.href = url;
+      console.log(key, keyPath);
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    heightChange() {
+      this.height = document.documentElement.clientHeight - 58 - 40;
+    }
+  }
+};
+</script>
+<style>
+/* .el-submenu__title {
+  padding: 0 !important;
+} */
+.el-menu-item-group__title {
+  padding: 0px !important;
+}
+</style>
+
+<style rel="stylesheet" lang="scss" scoped>
+.el-menu-vertical-demo {
+  /* position: absolute; */
+  width: 196px;
+  /* left: 0;
+      top:0;
+      bottom: 0; */
+  background: #fff;
+  transition: width 0.43s;
+  overflow: overlay;
+}
+.el-menu-vertical-demo.is-active {
+  width: 50px;
+}
+.el-menu-vertical {
+  width: 100%;
+  height: 100%;
+  border-right: none;
+}
+
+.el-menu-item:hover,
+.el-menu-item:hover a,
+.el-menu-item:hover a i {
+  background: #243646 !important;
+  color: #fff;
+}
+.el-menu-item.is-active,
+.el-menu-item.is-active a,
+.el-menu-item.is-active a i {
+  background: #243646 !important;
+  color: #fff;
+}
+.el-menu-item.is-active {
+  border-right: 3px solid #243646;
+}
+// #app .nest-menu .el-submenu > .el-submenu__title,
+// #app .el-submenu .el-menu-item {
+//   background: none;
+// }
+.logo-container {
+  overflow: hidden;
+  display: inline-block;
+  width: 48px;
+  height: 80px;
+  border-radius: 50%;
+  background: #eee;
+  margin: 5px auto;
+  text-align: center;
+}
+.logo-container img {
+  width: 100%;
+  max-width:145px;
+  max-height:50px;
+  border-radius: 50%;
+}
+.el-submenu .el-menu-item {
+  min-width: 196px;
+}
+.tool-menu-svg {
+  font-size: 14px;
+  width: 196px;
+  height: 190px;
+  text-align: center;
+  position: absolute;
+  z-index: 12;
+  background: #fff;
+  /* box-shadow: -5px 2px 10px 0 #333; */
+}
+.app-scroll-container {
+  /*    margin-top: 72px;
+        padding-bottom: 72px;*/
+  margin-top: 190px;
+}
+.app-scroll-container.scroll-container {
+  background: #fff;
+}
+.el-menu-custom {
+  margin-left: 34px;
+  width: 140px;
+}
+.el-menu-list {
+  /* border-top: 1px solid #666; */
+  min-width: 160px !important;
+  border-left: 1px solid #999;
+  padding: 0px !important;
+}
+
+.el-menu-list i {
+  width: 20px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+}
+.el-menu-list span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #666;
+  margin-right: 6px;
+}
+</style>
+