add

src/layout/components/Sidebar/SidebarItem.vue

@@ -20,6 +20,7 @@
             <!-- <img class="nav_item" :src="onlyOneChild.meta.imger" /> -->
             <span class="pathName" :class="getClass(item.path)"></span>
           </el-tooltip>
+          <!-- <span class="pathNameer">{{ onlyOneChild.meta.title }}</span> -->
         </el-menu-item>
       </app-link>
     </template>
@@ -160,6 +161,25 @@ export default {
   background-size: 100% 100%;
   transition: all 0.3s;
 }
+.pathNamecosy {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  left: -60%;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
+  background-size: 100% 100%;
+  transition: all 0.3s;
+}
+.pathNameer {
+  margin-left: 40%;
+}
+.pathNameercosy {
+  display: none;
+}
 .account {
   background: url("../../../assets/nav/ic_list_nav_account_default.png")
     no-repeat;

src/layout/components/Sidebar/index.vue

@@ -18,6 +18,7 @@
           :key="index"
           :item="route"
           :base-path="route.path"
+          :leup="leup"
         />
       </el-menu>
     </el-scrollbar>
@@ -31,6 +32,13 @@ import SidebarItem from "./SidebarItem";
 import variables from "@/styles/variables.scss";
 
 export default {
+  props: {
+    // route object
+    leup: {
+      type: Boolean,
+      default: false,
+    },
+  },
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters(["sidebar", "permission_routes"]),
@@ -80,6 +88,11 @@ export default {
       return !this.sidebar.opened;
     },
   },
+  watch: {
+    leup() {
+      console.log(this.leup);
+    },
+  },
 };
 </script>
 

src/layout/index.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="app-wrapper" @change="eveclk">
-    <sidebar
-      class="sidebar-container"
-      id="sidebar-container"
-      style="width: 88px"
-      @mouseover.native="eveclk"
-      @mouseleave.native="upLeft"
-    />
+    <sidebar class="sidebar-container" id="sidebar-container" />
     <div class="main-container">
       <navbar />
       <app-main id="main-containers" />
@@ -101,7 +95,7 @@ export default {
         new: "",
         again: "",
       },
-      left: "0%",
+      leup: true,
       dataRules: {
         //数据项表单验证
         old: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
@@ -115,13 +109,18 @@ export default {
   computed: {
     ...mapGetters(["pwdflag", "outflag", "name"]),
   },
+  mounted() {
+    // document.getElementById("sidebar-container").style.width = "150px";
+  },
   methods: {
     eveclk() {
-      document.getElementById("sidebar-container").style.left = "0%";
+      document.getElementById("sidebar-container").style.width = "150px";
+      this.leup = true;
       // document.getElementById("main-containers").style.paddingLeft = "50px";
     },
     upLeft() {
-      document.getElementById("sidebar-container").style.left = "-2.5%";
+      document.getElementById("sidebar-container").style.width = "48px";
+      this.leup = false;
       // document.getElementById("main-containers").style.paddingLeft = "30px";
     },
     //存储数据项-提交

src/styles/sidebar.scss

@@ -8,7 +8,7 @@
   }
 
   .sidebar-container {
-    width: 48px !important;
+    width: 48px;
     // transition: width 0.28s;
     // width: $sideBarWidth !important;
     background-color: #041741;
@@ -100,7 +100,6 @@
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
-
       &:hover {
         background-color: $subMenuHover !important;
       }
@@ -109,7 +108,7 @@
 
   .hideSidebar {
     .sidebar-container {
-      width: 88px !important;
+      width: 48px;
     }
 
     .main-container {