style(ui): 修改框架整体布局颜色

src/components/Breadcrumb/index.vue

@@ -94,7 +94,7 @@ export default {
 <style lang="scss" scoped>
 .bread-container {
   display: block;
-  margin-bottom:8px;
+  margin-bottom: 20px;
   .icon {
     width: 18px;
     height: 18px;

src/components/CrudTable/CrudTable.vue

@@ -382,7 +382,7 @@ export default class CrudTable extends Vue {
   @Prop({ type: Boolean, default: false }) fullHeight!: boolean;
 
   // 高度minus
-  @Prop({ type: Number, default: 245 }) maxHeightMinus!: number;
+  @Prop({ type: Number, default: 270 }) maxHeightMinus!: number;
 
   // el-table height
   @Prop(Number) height!: number;

src/store/modules/app.ts

@@ -10,7 +10,7 @@ const app = {
   state: {
     sidebar: {
       // 侧边栏隐藏状态
-      opened: 1,
+      opened: 0,
     },
     config: {
       // 密码长度

src/views/layout/Layout.vue

@@ -5,13 +5,15 @@
 @createDate 2018年11月13日14:50:08
 -->
 <template>
-  <div :class="classObj"
-       class="app-wrapper">
+  <div class="app-wrapper">
     <!-- 导航栏 -->
     <Header />
     <!-- 左侧菜单 -->
     <Menu />
-    <div class="main-container">
+    <div class="main-container"
+         :class="{
+       'hideSidebar':!sidebar
+    }">
       <!-- TAB标签页 -->
       <!-- <TagsView /> -->
       <!-- 面包屑导航 -->
@@ -26,9 +28,10 @@
 
 <script>
 import Breadcrumb from '@/components/Breadcrumb/index.vue';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 import { AppMain, Header, Menu } from './components/index.ts';
 
-export default {
+@Component({
   name: 'Layout',
   components: {
     AppMain,
@@ -37,18 +40,12 @@ export default {
     Breadcrumb,
     Menu,
   },
-  computed: {
-    sidebar() {
-      return this.$store.state.app.sidebar;
-    },
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-      };
-    },
-  },
-};
+})
+export default class Layout extends Vue {
+  get sidebar() {
+    return this.$store.getters.sidebar.opened;
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -61,8 +58,13 @@ export default {
   // 主体区域
   .main-container {
     background: #f0f3f7;
-    padding: 0 50px 10px;
-    height: calc(100% - 90px);
+    margin-left: 220px;
+    padding: 20px 30px 30px;
+    box-sizing: border-box;
+    height: calc(100% - 64px);
+    &.hideSidebar {
+      margin-left: 80px;
+    }
   }
 }
 </style>

src/views/layout/components/Header.vue

@@ -7,14 +7,20 @@
 
 <template>
   <div>
-    <el-header height="80px"
-               class="navHeader"
-               style="background:#f0f3f7">
+    <el-header height="64px"
+               style="background:#fff">
       <div class="title-container">
         <img class="header_logo"
              src="@/assets/logo.png">
         <span class="title">{{title}}</span>
       </div>
+      <!-- 折叠侧边栏按钮 -->
+      <Hamburger :toggle-click="toggleSideBar"
+                 :is-active="!!sidebar"
+                 class="hamburger-container"
+                 :class="{
+                   isActive:!sidebar
+                 }" />
       <!-- 姓名及下拉菜单 -->
       <div class="user-container">
         <img :src="photo"
@@ -37,13 +43,13 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { mapGetters } from 'vuex';
-// import Hamburger from '@/components/Hamburger/Hamburger.vue';
+import Hamburger from '@/components/Hamburger/Hamburger.vue';
 import PersonInfoCard from './PersonInfoCard.vue';
 
 @Component({
   name: 'Header',
   components: {
-    // Hamburger,
+    Hamburger,
     PersonInfoCard,
   },
   computed: {
@@ -71,6 +77,10 @@ export default class Header extends Vue {
     this.$refs.personInfoCard.showDialog();
   }
 
+  toggleSideBar() {
+    this.$store.dispatch('ToggleSideBar');
+  }
+
   logOut() {
     this.$store.dispatch('clearToken');
   }
@@ -84,13 +94,13 @@ export default class Header extends Vue {
 <style rel="stylesheet/scss" lang="scss" scoped>
 .title-container {
   display: inline-block;
-  padding-left: 50px;
+  padding-left: 20px;
   text-align: center;
-  height: 80px;
-  line-height: 80px;
+  height: 64px;
+  line-height: 64px;
   .header_logo {
-    width: 3em;
-    height: 3em;
+    width: 42px;
+    height: 42px;
     vertical-align: -13px;
     margin-right: 20px;
     border-radius: 50%;
@@ -110,6 +120,12 @@ export default class Header extends Vue {
 .el-header {
   color: black;
   padding-left: 0px !important;
+  .hamburger-container {
+    display: block;
+    position: absolute;
+    top: 20px;
+    right: 280px;
+  }
   .logo {
     width: 2em;
     height: 2em;
@@ -120,14 +136,14 @@ export default class Header extends Vue {
 .elevator {
   float: right;
   line-height: 100px;
-  height: 80px;
+  height: 64px;
   margin-right: 50px;
 }
 // 姓名及下拉菜单
 .user-container {
-  height: 80px;
+  height: 64px;
   float: right;
-  line-height: 80px;
+  line-height: 64px;
   text-align: center;
   .photo {
     width: 3em;

src/views/layout/components/Menu.vue

@@ -6,14 +6,17 @@
 -->
 <template>
   <!-- 导航菜单+滚动条 -->
-  <el-menu collapse
+  <el-menu :collapse="!sidebar"
            :default-active="$route.path"
            unique-opened
            mode="vertical"
-           background-color="#f5e8e8"
-           text-color="#000"
-           active-text-color="#3f51b5"
-           class="menu">
+           background-color="#ebeef5"
+           text-color="#333"
+           active-text-color="#616dad"
+           class="menu"
+            :class="{
+         'hideSidebar':!sidebar
+       }">
     <!-- 菜单项组件 -->
     <MenuItem :routes="routers" />
   </el-menu>
@@ -34,9 +37,10 @@ import MenuItem from './MenuItem.vue';
     ...mapGetters(['routers']),
   },
 })
-
 export default class Menu extends Vue {
-
+  get sidebar() {
+    return this.$store.getters.sidebar.opened;
+  }
 }
 </script>
 <style scoped>
@@ -46,18 +50,32 @@ export default class Menu extends Vue {
 </style>
 <style lang="scss" scoped>
 .menu {
-  overflow-x: hidden;
-  overflow-y: auto;
+  top: 64px;
+  width: 220px;
+  padding-left:15px;
+  bottom: 0;
+  left: 0 !important;
+  right: none !important;
+  overflow: auto;
   position: fixed;
-  left:0;
-  z-index:200;
-  width: 34px;
-  top: 100px;
-  max-height:80%;
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-   &::-webkit-scrollbar {
-    display: none;
+  height: 100%;
+  .el-menu {
+    height: 100%;
+  }
+  &.hideSidebar {
+    width: 64px;
+    padding: 0;
+    /deep/.el-submenu__title,
+    /deep/.el-menu-item {
+      padding-left: 16px !important;
+      height: auto;
+    }
+     /deep/.el-submenu {
+      padding-left: 0 !important;
+    }
+    /deep/.el-submenu__icon-arrow {
+      display: none;
+    }
   }
 }
 </style>

src/views/layout/components/MenuItem.vue

@@ -77,7 +77,14 @@ export default class MenuItem extends Vue {
   height: 22px !important;
   vertical-align: -0.4em !important;
 }
-
+.hideSidebar .SvgIcon {
+  width: 32px !important;
+  height: 32px !important;
+  margin-top: 25px;
+  margin-left: 0px;
+  margin-right: 50px;
+  vertical-align: -0.4em !important;
+}
 .hideSidebar .menu-indent {
   display: block;
   text-indent: 1em;