修改

kuangshp · kuangshp · commit 2b18b169a4d6 · 2020-06-01T15:33:28.000+08:00
diff --git a/src/components/menus/Menus.vue b/src/components/menus/Menus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebae">
+  <div class="sidebar">
     <el-menu
       class="sidebar-el-menu"
       :default-active="onRoutes"
@@ -46,12 +46,13 @@ export default {
 
 <style scoped lang="scss">
 .sidebar {
-  display: block;
+  /* display: block;
   position: absolute;
   left: 0;
   top: 70px;
   bottom: 0;
-  overflow-y: scroll;
+  overflow-y: scroll; */
+  float: left;
 }
 .sidebar::-webkit-scrollbar {
   width: 0;
@@ -63,7 +64,4 @@ export default {
 .sidebar-el-menu:not(.el-menu--collapse) {
   width: 240px;
 }
-.sidebar > ul {
-  height: 100%;
-}
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
@@ -21,14 +21,16 @@
 
 import AppHeader from './header/Index.vue';
 import Sidebar from './sidebar/Index.vue';
-import { mapActions } from 'vuex';
+import { mapState } from 'vuex';
 export default {
   components: {
     AppHeader,
     Sidebar,
   },
-  methods: {
-    ...mapActions(['sidebarOpened'])
+  computed: {
+    ...mapState({
+      sidebarOpened: state => state.view.sidebarOpened,
+    })
   }
 }
 </script>
@@ -40,23 +42,6 @@ export default {
   top: 50px;
   right: 0;
   bottom: 0;
-  > * {
-    transition: all 1s;
-  }
-  .sidebar {
-    width: 230px;
-    height: inherit;
-    background: #fff;
-    box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.12);
-    margin-right: 10px;
-    overflow-y: auto;
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    top: 50px;
-    right: 0;
-    transform: translateX(0);
-  }
   .view {
     margin-left: 240px;
     background: #f0f0f0;
@@ -65,14 +50,8 @@ export default {
   }
 }
 .sidebar-close {
-  > * {
-    transition: all 1s;
-  }
-  .sidebar {
-    transform: translateX(-100%);
-  }
   .view {
-    margin-left: 0;
+    margin-left: 64px;
   }
 }
 </style>
diff --git a/src/layout/header/Index.vue b/src/layout/header/Index.vue
@@ -97,7 +97,6 @@ export default {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    transition: width 0.3s;
     .log1 {
       width: 240px;
       height: 40px;
@@ -127,7 +126,6 @@ export default {
       padding: 5px;
       margin-top: 4px;
       cursor: pointer;
-      transition: color 0.3s;
     }
     .trigger:hover {
       background: #40a9ff;
