数据中心添加周三开发 周四演示

src/layout/index.vue

@@ -5,7 +5,7 @@
     :style="{ '--current-color': theme }"
   >
     <div class="newVersionSystem">
-      <new-menu class="newMenuWidth" />
+      <new-menu class="newMenuWidth" :class="{'closeWidth':$route.path.includes('settingMenu')}"/>
       <div class="newMenuAppMain">
         <tags-view v-if="showTagsView"/>
         <app-main/>
@@ -15,23 +15,23 @@
 </template>
 
 <script>
-import router from "@/router";
+import router from '@/router'
-import RightPanel from "@/components/RightPanel";
+import RightPanel from '@/components/RightPanel'
-import notFound from "@/views/error/404";
+import notFound from '@/views/error/404'
 import {
   AppMain,
   Navbar,
   Settings,
   Sidebar,
   TagsView,
-  NewMenu,
+  NewMenu
-} from "./components";
+} from './components'
-import ResizeMixin from "./mixin/ResizeHandler";
+import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from "vuex";
+import { mapState } from 'vuex'
-import variables from "@/assets/styles/variables.scss";
+import variables from '@/assets/styles/variables.scss'
 
 export default {
-  name: "Layout",
+  name: 'Layout',
   components: {
     AppMain,
     Navbar,
@@ -40,7 +40,7 @@ export default {
     Sidebar,
     TagsView,
     NewMenu,
-    notFound,
+    notFound
   },
   mixins: [ResizeMixin],
   computed: {
@@ -53,34 +53,34 @@ export default {
       conciseMenu: (state) => state.settings.conciseMenu,
       needTagsView: (state) => state.settings.tagsView,
       showTagsView: (state) => state.settings.showTagsView,
-      fixedHeader: (state) => state.settings.fixedHeader,
+      fixedHeader: (state) => state.settings.fixedHeader
     }),
     classObj() {
       return {
         // hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === "mobile",
+        mobile: this.device === 'mobile'
-      };
+      }
     },
     variables() {
-      return variables;
+      return variables
-    },
+    }
   },
   data() {
     return {
       childrenType: false,
-      childrenWidth: "1200px",
+      childrenWidth: '1200px'
-    };
+    }
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch("app/closeSideBar", {
+      this.$store.dispatch('app/closeSideBar', {
-        withoutAnimation: false,
+        withoutAnimation: false
-      });
+      })
-    },
+    }
-  },
+  }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -94,25 +94,37 @@ export default {
   width: 100%;
   // padding: 0 8px;
   background: #ffffff;
+
   &.mobile.openSidebar {
     position: fixed;
     top: 0;
   }
 }
+
 .newVersionSystem {
   display: flex;
   height: 100%;
   width: 100%;
 }
+
 .newMenuWidth {
   width: 114px;
   background-color: #fff;
+  transition: all .3s;
+  opacity: 1;
 }
+
+.closeWidth {
+  width: 0px !important;
+  opacity: 0;
+}
+
 .newMenuAppMain {
-  width: calc(100% - 114px);
+  flex: 1;
   overflow: hidden;
   background-color: #f5f5f5;
 }
+
 .drawer-bg {
   background: #000;
   opacity: 0.3;
@@ -122,18 +134,21 @@ export default {
   position: absolute;
   z-index: 999;
 }
+
 .defaultMuneStyle {
   width: calc(100% - 160px);
   margin-left: 160px;
   height: 100%;
   // padding:10px;
 }
+
 .conciseMenuStyle {
   width: calc(100% - 70px);
   margin-left: 70px;
   padding: 10px;
   height: 100%;
 }
+
 .fixed-header {
   position: fixed;
   top: 0;
@@ -154,6 +169,7 @@ export default {
 .mobile .fixed-header {
   width: 100%;
 }
+
 .webConcat {
   position: fixed;
   top: 50px;