diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 51a97f7..0f6761b 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -137,7 +137,7 @@ ul{
 }
 
 .app-container {
-  margin: 20px;
+  margin: 0 20px 20px 20px;
 }
 
 .components-container {
diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
index 639516a..40ee245 100644
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@@ -94,7 +94,6 @@
   }
 }
 
-
 @mixin breadcrumb-bg{
   [data-theme="dark"] & {
     background-color: $background-color-dark;
@@ -122,17 +121,39 @@
   }
 }
 
-@mixin bg_color() {
+@mixin main_bg_color() {
   [data-theme="dark"] & {
     background-color: $background-color-dark;
     @include font-color($font-color-dark);
   }
   [data-theme="light"] & {
-    background-color: $background-color-light;
+    background-color: transparent;
     @include font-color($font-color-light);
   }
 }
 
+@mixin dropdown_bg() {
+  [data-theme="dark"] & {
+    box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset;
+    background: #02255F;
+  }
+  [data-theme="light"] & {
+    box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.17);
+    background: #fff;
+  }
+}
+
+@mixin dropdown_bg_hover() {
+  [data-theme="dark"] & {
+    background: #13439E;
+    color: #fff;
+  }
+  [data-theme="light"] & {
+    background: #F5F9FC;
+    color: #0348F3;
+  }
+}
+
 @mixin icon_color() {
   [data-theme="dark"] & {
     color: $icon-color-dark;
@@ -142,28 +163,276 @@
   }
 }
 
-@mixin dropdown_bg() {
+@mixin bg_color() {
   [data-theme="dark"] & {
-    box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset;
-    background: #02255F;
+    background-color: $background-color-dark;
+    @include font-color($font-color-dark);
   }
   [data-theme="light"] & {
-    box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.17);
-    background: #fff;
+    background-color: $background-color-light;
+    @include font-color($font-color-light);
   }
 }
 
-@mixin dropdown_bg_hover() {
+// 内容模块 背景-线条-font设置
+@mixin user_cont() {
   [data-theme="dark"] & {
-    background: #13439E;
+    background-color: $background-color-dark;
+    border: $mainContainerBorder;
+    @include font-color($font-color-dark);
+  }
+  [data-theme="light"] & {
+    background-color: $background-color-light;
+    border: none;
+    @include font-color($font-color-light);
+  }
+}
+
+@mixin before_line_color() {
+  [data-theme="dark"] & {
+    border-top: 1px solid $mainColor;
+    border-left: 1px solid $mainColor;
+  }
+  [data-theme="light"] & {
+    border-top: none;
+    border-left: none;
+  }
+}
+
+@mixin after_line_color() {
+  [data-theme="dark"] & {
+    border-right: 1px solid $mainColor;
+    border-bottom: 1px solid $mainColor;
+  }
+  [data-theme="light"] & {
+    border-right: none;
+    border-bottom: none;
+  }
+}
+
+@mixin left_bottom_line_color() {
+  [data-theme="dark"] & {
+    border-bottom: 1px solid $mainColor;
+    border-left: 1px solid $mainColor;
+  }
+  [data-theme="light"] & {
+    border-left: none;
+    border-bottom: none;
+  }
+}
+
+@mixin right_top_line_color() {
+  [data-theme="dark"] & {
+    border-right: 1px solid $mainColor;
+    border-top: 1px solid $mainColor;
+  }
+  [data-theme="light"] & {
+    border-right: none;
+    border-top: none;
+  }
+}
+
+@mixin box_padding{
+  [data-theme="dark"] & {
+    padding: 0 !important;
+    margin-top: 20px;
+  }
+  [data-theme="light"] & {
+    padding: 20px !important;
+  }
+}
+
+@mixin tree_height_min{
+  [data-theme="dark"] & {
+    min-height: calc(100vh - 210px);
+  }
+  [data-theme="light"] & {
+    min-height: calc(100vh - 230px);
+  }
+}
+
+@mixin table_height_min{
+  [data-theme="dark"] & {
+    min-height: calc(100vh - 260px);
+  }
+  [data-theme="light"] & {
+    min-height: calc(100vh - 280px);
+  }
+}
+
+@mixin input_style{
+  [data-theme="dark"] & {
+    border: 1px solid $mainColor;
     color: #fff;
   }
   [data-theme="light"] & {
-    background: #F5F9FC;
+    border: 1px solid #E3E7EE;
+    color: #0C0E1E;
+  }
+}
+
+@mixin tree_font_color{
+  [data-theme="dark"] & {
+    color: $mainColor;
+  }
+  [data-theme="light"] & {
+    color: #0C0E1E;
+  }
+}
+
+@mixin tree_style{
+  @include tree_font_color;
+  [data-theme="dark"] & {
+    padding: 0 30px !important;
+  }
+}
+
+
+
+@mixin tree_children_font{
+  [data-theme="light"] & {
+    color: #545B65;
+  }
+}
+
+
+@mixin tree_children_padding{
+  [data-theme="light"] & {
+    padding: 0 !important;
+  }
+}
+
+@mixin tree_hover{
+  [data-theme="dark"] & {
+    background-color: transparent !important;
+    background-image: $subMenuActiveBg;
+  }
+  [data-theme="light"] & {
+    background-color: #E8F2FF !important;
     color: #0348F3;
   }
 }
 
+@mixin tree_active{
+  [data-theme="dark"] & {
+    background-image: $subMenuActiveBg !important;
+    color: #fff;
+  }
+  [data-theme="light"] & {
+    background-color: #E8F2FF !important;
+    color: #0348F3 !important;
+  }
+}
+
+@mixin elButton-style{
+  [data-theme="dark"] & {
+    border-color: $mainColor;
+    color: #fff;
+  }
+  [data-theme="light"] & {
+    font-weight: bold;
+    border-color: #0348F3;
+    color: #0348F3;
+  }
+}
+
+@mixin elButton-disabled-style{
+  [data-theme="dark"] & {
+    color: #13439E;
+    background-color: transparent;
+    border-color: #13439E;
+  }
+  [data-theme="light"] & {
+    color: #B4C8FB;
+    border-color: #B4C8FB;
+    background-color: #F2F5FE;
+  }
+}
+
+@mixin elButton-hover-style{
+  [data-theme="dark"] & {
+    color: #fff;
+    background-color: #02255F;
+    border-color: $mainColor;
+  }
+  [data-theme="light"] & {
+    background-color: #E8F2FF;
+  }
+}
+
+
+@mixin elTable-style{
+  [data-theme="dark"] & {
+    background-color: #02255f;
+  }
+  [data-theme="light"] & {
+    background-color: #F5F9FC;
+  }
+}
 
+@mixin elTable-font-style{
+  [data-theme="dark"] & {
+    color: $mainColor;
+  }
+  [data-theme="light"] & {
+    color: #0C0E1E;
+  }
+}
 
+@mixin elTable-td-font-style{
+  [data-theme="dark"] & {
+    color: $mainColor;
+    border-bottom: 1px dashed #113D72;
+  }
+  [data-theme="light"] & {
+    color: #545B65;
+    border-bottom: 1px solid #F5F9FC;
+  }
+}
 
+@mixin elTable-hover-style{
+  [data-theme="dark"] & {
+    color: #fff;
+    background-color: #13439E;
+  }
+  [data-theme="light"] & {
+    background-color: #EAF3FB;
+    color: #545B65;
+  }
+}
+
+@mixin checkbox-style{
+  [data-theme="dark"] & {
+    border-color: $mainColor;
+  }
+  [data-theme="light"] & {
+    border-color: #D6D8DD;
+  }
+}
+
+@mixin checkbox-disabled-style{
+  [data-theme="dark"] & {
+    border-color: $mainColor;
+    background: transparent;
+  }
+  [data-theme="light"] & {
+    background-color: #E6E7E9;
+  }
+}
+
+@mixin checkbox-active-style{
+  [data-theme="dark"] & {
+    border-color: $mainColor;
+    background: transparent;
+    &::after{
+      border-color: $mainColor;
+    }
+  }
+  [data-theme="light"] & {
+    border-color:#0348F3;
+    background-color: #0348F3;
+    &::after{
+      border-color: #fff;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index ade36a8..50f223a 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -17,7 +17,7 @@ $font-color-dark : #fff;
 $background-color-light: #fff; //亮色bg主题
 $main-bg-light: #F6F8FC; //亮色bg主题
 $icon-color-light: #1C1C1C;
-$font-color-light : #545B65;
+$font-color-light: #545B65;
 
 $headerHeight: 64px;
 $sideBarWidth: 256px;
diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index 3d4786f..edc1c4b 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -1,17 +1,15 @@
 
 .head-container {
-  padding: 20px;
+  // padding: 20px;
   .filter-item {
-    display: inline-block;
+    // display: inline-block;
     vertical-align: middle;
-    margin-right: 20px;
+    margin-right: 10px;
     input {
-      border: 1px solid $mainColor;
+      @include input_style;
       background-color: transparent;
-      // @include bg_color;
       height: 30px;
       line-height: 30px;
-      color: #fff;
     }
     .iconfont{
       line-height: 30px;
@@ -23,9 +21,9 @@
   .date-item {
     display: inline-block;
     vertical-align: middle;
-    border: 1px solid $mainColor;
     @include bg_color;
-    margin-right: 20px;
+    @include input_style;
+    margin-right: 10px;
     height: 30px !important;
     width: 230px !important;
   }
@@ -45,7 +43,8 @@
   margin-right: 0 !important;
 }
 .container-left{
-  margin-right: 20px;
+  // margin-right: 20px;
+  // @include box_padding;
 }
 .container-left,
 .container-right,
@@ -54,8 +53,7 @@
 .header-container-wrap{
   position: relative;
   min-height: 100%;
-  padding: 0 !important;
-  border: $mainContainerBorder;
+  @include user_cont;
   min-height: calc(100vh - 190px);
   &::before,
   &::after{
@@ -68,14 +66,12 @@
   &::before{
     top: -1px;
     left: -1px;
-    border-top: 1px solid $mainColor;
-    border-left: 1px solid $mainColor;
+    @include before_line_color;
   }
   &::after{
     right: -1px;
     bottom: -1px;
-    border-right: 1px solid $mainColor;
-    border-bottom: 1px solid $mainColor;
+    @include after_line_color;
   }
 }
 
@@ -110,6 +106,8 @@
 
 // xu  el-button
 .head-search{
+  display: flex;
+  justify-content: flex-start;
   margin-bottom: 20px;
   .el-button{
     margin-left: 0;
@@ -120,24 +118,19 @@
 .el-button,
 .el-button--info.is-plain{
   font-size: 14px;
-  color: #fff;
-  border-color: $mainColor;
   background-color: transparent;
+  @include elButton-style;
 }
 .el-button.is-disabled,
 .el-button.is-disabled:hover, 
 .el-button.is-disabled:focus{
-  color: #13439E;
-  background-color: transparent;
-  border-color: #13439E;
+  @include elButton-disabled-style;
 }
 .el-button:hover,
 .el-button:focus,
 .el-button--info.is-plain:hover,
 .el-button--info.is-plain:focus{
-  color: #fff;
-  background-color: #02255F;
-  border-color: $mainColor;
+  @include elButton-hover-style;
 }
 
 .el-button--mini{
@@ -182,21 +175,18 @@
 .left-bottom-line{
   bottom: -1px;
   left: -1px;
-  border-bottom: 1px solid $mainColor;
-  border-left: 1px solid $mainColor;
+  @include left_bottom_line_color;
 }
 
 .right-top-line{
   right: -1px;
   top: -1px;
-  border-right: 1px solid $mainColor;
-  border-top: 1px solid $mainColor;
+  @include right_top_line_color;
 }
 .right-bottom-line{
   right: -1px;
   bottom: -1px;
-  border-right: 1px solid $mainColor;
-  border-bottom: 1px solid $mainColor;
+  @include after_line_color;
 }
 .el-tree{
   background: transparent !important;
@@ -204,47 +194,49 @@
     background-color: transparent !important;
   }
   .is-current>.el-tree-node__content {    
-    background-image: $subMenuActiveBg !important;
-    color: #fff;
+    @include tree_active;
   }
   .el-tree-node__content{
-    padding: 0 30px !important;
     height: 40px;
-    color: $mainColor;
+    @include tree_style;
     background-color: transparent;
     .el-tree-node__label{
       font-size: 16px;
       font-weight: 600;
     }
     &:hover{
-      background-color: transparent !important;
-      background-image: $subMenuActiveBg;
+      @include tree_hover;
     }
   }
   .el-tree-node__expand-icon{
     font-size: 16px;
-    color: $mainColor;
+    @include tree_font_color;
   }
   .el-tree-node__children{
     padding: 0 18px;
     .el-tree-node__content{
+      @include tree_children_padding;
       height: 30px;
     }
     .el-tree-node__label{
+      @include tree_children_font;
       font-size: 14px;
       font-weight: normal;
+
     }
   }
 
 }
 .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
-  background-color: transparent;
-  background-image: $subMenuActiveBg;
+  @include tree_hover;
+}
+.el-tree .el-tree-node__children .is-current .el-tree-node__label{
+  @include tree_active;
 }
 
 .el-date-editor .el-range-input{
   background: transparent;
-  color: #fff;
+  @include tree_font_color;
 }
 
 // table
@@ -261,12 +253,11 @@
   .el-table__header-wrapper,
   .el-table__header{
     th.el-table__cell{
-      background-color: #02255F;
-      // border-top: 1px solid #113D72;
+      @include elTable-style;
       border-bottom: none;
       &>.cell{
-        font-size: 16px;
-        color: $mainColor;
+        font-size: 14px;
+        @include elTable-font-style;
       }
     }
   }
@@ -274,9 +265,8 @@
   .el-table__body-wrapper,
   .el-table__fixed-right{
     td.el-table__cell{
-      color: $mainColor;
+      @include elTable-td-font-style;
       font-size: 14px;
-      border-bottom: 1px dashed #113D72;
       padding: 5px 0;
     }
   }
@@ -288,24 +278,21 @@
     background-color: transparent;
   }
   
-  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-checked .el-checkbox__inner{
+    @include checkbox-active-style;
+  }
+
   .el-checkbox__input.is-disabled .el-checkbox__inner{
-    border-color: $mainColor;
-    background: transparent;
-    &::after{
-      border-color: $mainColor;
-    }
+    @include checkbox-disabled-style;
   }
 
   .el-table__body tr.hover-row > td, 
   .el-table__body tr.hover-row.current-row > td, 
   .el-table__body tr.hover-row.el-table__row--striped > td, 
   .el-table__body tr.hover-row.el-table__row--striped.current-row > td {
-    color: #fff;
-    background-color: #13439E;
+    @include elTable-hover-style;
     .el-checkbox__input.is-checked .el-checkbox__inner{
-      background: #fff;
-      border-color: #fff;
+      @include checkbox-active-style;
     }
   }
   .el-button{
@@ -332,11 +319,9 @@
 .el-table__body tr.el-table__row:focus>td.el-table__cell,
 .el-table__body tr.current-row:hover>td.el-table__cell, 
 .el-table__body tr.current-row:focus>td.el-table__cell{
-  color: #fff;
-  background-color: #13439E;
+  @include elTable-hover-style;
   .el-checkbox__input.is-checked .el-checkbox__inner{
-    background: #fff;
-    border-color: #fff;
+    @include checkbox-active-style;
   }
 }
 
@@ -346,7 +331,7 @@
 
 .el-checkbox__inner{
   background: transparent;
-  border-color: $mainColor;
+  @include checkbox-style;
 }
 
 .el-icon-arrow-right:before{
@@ -357,8 +342,10 @@
 }
 // 分页
 .el-pagination{
-  padding: 2px 10px;
-  margin: 10px 0 !important;
+  display: flex;
+  justify-content: flex-end;
+  // padding: 2px 10px;
+  margin: 64px 0 10px 0 !important;
   .el-pagination__total{
     color: $mainColor;
   }
@@ -906,7 +893,7 @@ input[type ='number'] {
   color: #fff;
 }
 .el-table__header-wrapper{
-  background-color: #02255f;
+  @include elTable-style;
 }
 
 .svg-style{
@@ -927,18 +914,22 @@ input[type ='number'] {
 
 .el-select-dropdown,
 .el-dropdown-menu{
-  top: 46px !important;
   margin: 0;
   padding: 17px 0;
   @include dropdown_bg;
   border: none;
 }
+.el-dropdown-menu{
+  top: 46px !important;
+}
 .el-select-dropdown__item{
-  color: $mainColor;
+  // color: $mainColor;
+  @include icon_color;
 }
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover{
-  background-color: #13439E;
+  // background-color: #13439E;
+  @include dropdown_bg_hover;
 }
 
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 6bf3d14..2422b9f 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -74,7 +74,7 @@ export default {
   position: relative;
   flex: 1;
   font-size: 14px;
-  line-height: 50px;
+  line-height: 55px;
   padding-left: 30px;
   &::before {
     position: absolute;
diff --git a/src/components/Crud/CRUD.operation.vue b/src/components/Crud/CRUD.operation.vue
index 28a019f..4da7464 100644
--- a/src/components/Crud/CRUD.operation.vue
+++ b/src/components/Crud/CRUD.operation.vue
@@ -4,7 +4,8 @@
       <!--左侧插槽-->
       <slot name="left" />
       <!-- type="primary" -->
-      <el-button v-if="crud.optShow.add" v-permission="permission.add" size="mini" icon="el-icon-plus" @click="crud.toAdd">
+      <el-button v-if="crud.optShow.add" v-permission="permission.add" size="mini" @click="crud.toAdd">
+        <i class="iconfont icon-xinzeng" />
         新增
       </el-button>
       <!-- type="success" -->
@@ -31,7 +32,7 @@
         </div>
       </div>
     </el-dialog>
-    <el-button-group v-if="crud.optShow.group" class="crud-opts-right">
+    <!-- <el-button-group v-if="crud.optShow.group" class="crud-opts-right">
       <el-button size="mini" plain type="info" icon="el-icon-search" @click="toggleSearch()" />
       <el-button size="mini" icon="el-icon-refresh" @click="crud.refresh()" />
       <el-popover placement="bottom-end" width="150" trigger="click">
@@ -45,7 +46,7 @@
           {{ item.label }}
         </el-checkbox>
       </el-popover>
-    </el-button-group>
+    </el-button-group> -->
     <slot name="rightButtonGroup" />
   </div>
 </template>
@@ -203,7 +204,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .crud-opts {
   display: -webkit-flex;
   display: flex;
@@ -225,4 +226,7 @@ export default {
   color: #fff;
   font-size: 16px;
 }
+.iconfont{
+  font-size: 12px !important;
+}
 </style>
diff --git a/src/components/Crud/RR.operation.vue b/src/components/Crud/RR.operation.vue
index 4e3e62e..4c6ec9a 100644
--- a/src/components/Crud/RR.operation.vue
+++ b/src/components/Crud/RR.operation.vue
@@ -1,9 +1,9 @@
 <!--搜索与重置-->
 <template>
-  <span>
-    <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
-    <el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
-  </span>
+  <div class="search-btn-box">
+    <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
+    <el-button v-if="crud.optShow.reset" class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
+  </div>
 </template>
 <script>
 import { crud } from '@crud/crud'
@@ -19,10 +19,64 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+@mixin btn_blue_style{
+  [data-theme="light"] & {
+    background-color: #0348F3;
+    border-color: #0348F3;
+    color: #fff !important;
+  }
+}
+
+@mixin btn_blue_hover{
+  [data-theme="light"] & {
+    background-color: #4579FA;
+    border-color: #4579FA;
+  }
+}
+
+@mixin btn_white_style{
+  [data-theme="light"] & {
+    background-color: #fff;
+    border-color: #E3E7EE;
+    color: #545B65 !important;
+  }
+}
+
+@mixin btn_white_hover{
+  [data-theme="light"] & {
+    background-color: #F7F9FA;
+  }
+}
+
+@mixin btn_hover{
+  [data-theme="dark"] & {
+    background-color: #02255F;
+  }
+  [data-theme="light"] & {
+    background-color: #0348F3;
+  }
+}
+.search-btn-box{
+  display: flex;
+  justify-content: flex-start;
+  .filter-search{
+    @include btn_blue_style;
+    &:hover{
+      @include btn_blue_hover;
+    }
+  }
+  .filter-refresh{
+    @include btn_white_style;
+    &:hover{
+      @include btn_white_hover;
+    }
+  }
+}
+
 .el-button{
   background-color: #3A99FD;
     &:hover{
-      background-color: #02255F;
+      @include btn_hover;
     }
 }
 </style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index ac1e6c7..684177e 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -28,10 +28,9 @@ export default {
 .app-main {
   /* 100= navbar  100  */
   min-height: calc(100vh - 64px);
-  width: 100%;
-  margin-top: 50px;
+  margin-top: 55px;
   position: relative;
-  @include bg_color;
+  @include main_bg_color;
   overflow: hidden;
 }
 
@@ -41,14 +40,26 @@ export default {
 
 .hasTagsView {
   .app-main {
-    /* 84 = navbar + tags-view = 64 + 50 */
-    min-height: calc(100vh - 114px);
+    /* 119px = navbar + tags-view = 64 + 55 */
+    min-height: calc(100vh - 119px);
   }
 
   .fixed-header+.app-main {
     padding-top: $headerHeight;
   }
 }
+
+.hideSidebar{
+  .app-main{
+    max-width: calc(100vw - 54px);
+  }
+}
+
+.openSidebar{
+  .app-main{
+    max-width: calc(100vw - 256px);
+  }
+}
 </style>
 
 <style lang="scss">
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 8867bb3..4bdce20 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -4,7 +4,7 @@
 
     <div class="right-menu">
       <!-- 主题切换 -->
-      <div class="themeBox">
+      <div class="themeBox" style="font-size:12px; margin-right:20px; cursor: pointer;">
         <span @click="changetheme('dark')">深色主题</span>
         <span @click="changetheme('light')">浅色主题</span>
       </div>
@@ -41,7 +41,7 @@
           <div class="user-img-cover">
             <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar" :onerror="defaultImg">
           </div>
-          <div class="user-name">Lucky</div>
+          <div class="user-name">{{ user.username }}</div>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c090a94..ce69794 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -131,7 +131,7 @@ export default {
     @include shadow-set;
     z-index: 100;
     .hamburger-container {
-      line-height: 48px;
+      line-height: 53px;
       height: 100%;
       padding: 0 6px 0 20px;
       cursor: pointer;
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index c6deaea..c8d67b2 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,28 +1,27 @@
 <template>
   <div class="app-container">
-    <el-row class="container-main" :gutter="20">
+    <div class="container-main" style="justify-content: flex-start;">
       <!--侧边部门数据-->
-      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
-
-        <div class="head-container" style="padding-left:0">
+      <div class="elect-cont-left">
+        <div class="head-container">
           <el-input v-model="deptName" clearable size="small" placeholder="输入部门名称搜索" prefix-icon="el-icon-search" class="filter-item" @input="getDeptDatas" />
         </div>
-        <div class="container-left" style="min-height: calc(100vh - 262px)">
+        <div class="container-left">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <el-tree :data="deptDatas" :load="getDeptDatas" :props="defaultProps" :expand-on-click-node="false" lazy @node-click="handleNodeClick" />
         </div>
-      </el-col>
+      </div>
       <!--用户数据-->
-      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
+      <div class="elect-cont-right">
         <!--工具栏-->
-        <div class="head-container" style="padding:20px 0">
+        <div class="head-container">
           <div v-if="crud.props.searchToggle" class="head-search">
             <!-- 搜索 -->
             <el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者邮箱搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
             <date-range-picker v-model="query.createTime" class="date-item" />
             <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
-              <i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
+              <i slot="prefix" class="iconfont icon-zhuangtai" />
               <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
             </el-select>
             <rrOperation />
@@ -31,7 +30,7 @@
             <el-button slot="right" icon="el-icon-refresh-left" size="mini" :disabled="!crud.selections.length" @click="handlePwdReset(crud.selections)">密码重置</el-button>
           </crudOperation>
         </div>
-        <div class="container-right" style="min-height: calc(100vh - 312px);">
+        <div class="container-right">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <!--表单渲染-->
@@ -97,37 +96,37 @@
           <!--表格渲染-->
           <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="crud.selectionChangeHandler">
             <el-table-column :selectable="checkboxT" type="selection" align="center" width="55" />
-            <el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" />
-            <el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
-            <el-table-column prop="gender" label="性别" />
-            <el-table-column :show-overflow-tooltip="true" prop="phone" width="100" label="电话" />
-            <el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
+            <el-table-column :show-overflow-tooltip="true" prop="username" label="账号" />
+            <el-table-column :show-overflow-tooltip="true" prop="nickName" label="用户名" />
+            <el-table-column prop="gender" label="性别" width="60" />
+            <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话" />
+            <el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱" />
             <el-table-column :show-overflow-tooltip="true" prop="dept" label="部门">
               <template slot-scope="scope">
                 <div>{{ scope.row.dept.name }}</div>
               </template>
             </el-table-column>
-            <el-table-column label="状态" align="center" prop="enabled">
+            <el-table-column label="状态" align="center" prop="enabled" width="60">
               <template slot-scope="scope">
                 <el-switch v-model="scope.row.enabled" :disabled="user.id === scope.row.id" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" />
               </template>
             </el-table-column>
-            <el-table-column :show-overflow-tooltip="true" prop="createTime" width="145" label="创建日期">
+            <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
               <template slot-scope="scope">
                 <div>{{ scope.row.createTime | parseTime }}</div>
               </template>
             </el-table-column>
-            <el-table-column v-if="checkPer(['admin','user:edit','user:del'])" label="操作" width="120" align="center" fixed="right">
+            <!-- <el-table-column v-if="checkPer(['admin','user:edit','user:del'])" label="操作" width="120" align="center" fixed="right">
               <template slot-scope="scope">
                 <udOperation :data="scope.row" :permission="permission" :disabled-dle="scope.row.id === user.id" />
               </template>
-            </el-table-column>
+            </el-table-column> -->
           </el-table>
           <!--分页组件-->
           <pagination />
         </div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -141,7 +140,7 @@ import { getAllJob } from '@/api/system/job'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
-import udOperation from '@crud/UD.operation'
+// import udOperation from '@crud/UD.operation'
 import pagination from '@crud/Pagination'
 import DateRangePicker from '@/components/DateRangePicker'
 import Treeselect from '@riophae/vue-treeselect'
@@ -153,7 +152,7 @@ let userJobs = []
 const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'true', roles: [], jobs: [], dept: { id: null }, phone: null }
 export default {
   name: 'User',
-  components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
+  components: { Treeselect, crudOperation, rrOperation, pagination, DateRangePicker },
   cruds() {
     return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
   },
@@ -465,11 +464,53 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
+.elect-cont-left{
+  width: 265px;
+  margin-right: 20px;
+  @include bg_color;
+  @include box_padding;
+  .head-container{
+    margin-bottom: 20px;
+  }
+  .container-left{
+    @include tree_height_min;
+  }
+}
+.elect-cont-right{
+  // padding: 20px;
+  @include bg_color;
+  @include box_padding;
+  .head-container{
+    margin-bottom: 20px;
+  }
+  .container-right{
+    @include table_height_min;
+  }
+}
+.hideSidebar{
+  // siderbar-收起 54 + 间距 60 + treeLeft 265
+  .elect-cont-right{
+    width: calc(100vw - 379px);
+  }
+}
+.openSidebar{
+  // siderbar-展开 256 + 间距 60 + treeLeft 265
+  .elect-cont-right{
+    width: calc(100vw - 581px);
+  }
+}
+
 ::v-deep .vue-treeselect__control,
 ::v-deep .vue-treeselect__placeholder,
 ::v-deep .vue-treeselect__single-value {
   height: 30px;
   line-height: 30px;
 }
+
+.icon-zhuangtai{
+  font-size: 14px;
+}
 </style>