样式修改

-$color-primary: #20a0ff;//#18c79c
+$color-primary: #1a4496;//#18c79c

 <template>
 <template>
-    <el-row class="container">
+    <el-row class="container darkmenu">
         <el-col :span="24" class="header">
         <el-col :span="24" class="header">
             <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
             <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
                 {{collapsed?'':sysName}}
                 {{collapsed?'':sysName}}
@@ -156,7 +156,6 @@
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
     @import '~scss_vars';
     @import '~scss_vars';
-
     .container {
     .container {
         position: absolute;
         position: absolute;
         top: 0px;
         top: 0px;
@@ -165,7 +164,7 @@
         .header {
         .header {
             height: 60px;
             height: 60px;
             line-height: 60px;
             line-height: 60px;
-            background: $color-primary;
+            background: $color-primary url("/static/images/air-banner.png");
             color:#fff;
             color:#fff;
             .userinfo {
             .userinfo {
                 text-align: right;
                 text-align: right;
@@ -228,9 +227,6 @@
                 // position: absolute;
                 // position: absolute;
                 // top: 0px;
                 // top: 0px;
                 // bottom: 0px;
                 // bottom: 0px;
-                .el-menu{
-                    height: 100%;
-                }
                 .collapsed{
                 .collapsed{
                     width:60px;
                     width:60px;
                     .item{
                     .item{
@@ -267,16 +263,21 @@
                 // bottom: 0px;
                 // bottom: 0px;
                 // left: 230px;
                 // left: 230px;
                 overflow-y: scroll;
                 overflow-y: scroll;
-                padding: 20px;
+                padding: 10px;
                 .breadcrumb-container {
                 .breadcrumb-container {
                     //margin-bottom: 15px;
                     //margin-bottom: 15px;
                     .title {
                     .title {
                         width: 200px;
                         width: 200px;
                         float: left;
                         float: left;
                         color: #475669;
                         color: #475669;
+                        margin-left: 10px;
                     }
                     }
                     .breadcrumb-inner {
                     .breadcrumb-inner {
                         float: right;
                         float: right;
+                        margin-right:10px;
+                    }
+                    .el-breadcrumb{
+                        line-height:36px;
                     }
                     }
                 }
                 }
                 .content-wrapper {
                 .content-wrapper {
@@ -286,4 +287,42 @@
             }
             }
         }
         }
     }
     }
+</style>
+<style lang="scss">
+    .darkmenu{
+        .main {
+            aside {
+                .el-menu{
+                    height: 100%;
+                    background: #606060;
+                    .el-menu-item {
+                        i{
+                            color: white;
+                        }
+                        color: white;
+                    }
+                    .el-menu-item.is-active{
+                        color:#e6a23c;
+                    }
+                    .el-menu-item:hover,.el-menu-item:focus{
+                        background-color: #1a4496;
+                    }
+                    .el-submenu {
+                        ul.el-menu.el-menu--inline{
+                            background: #303030;
+                        }
+                        .el-submenu__title {
+                            color: white;
+                            i{
+                                color: white;
+                            }
+                        }
+                        .el-submenu__title:hover {
+                            background-color: #1a4496;
+                        }
+                    }
+                }
+            }
+        }
+    }
 </style>
 </style>

@@ -955,9 +955,6 @@ export default {
      margin-bottom: 0;
      margin-bottom: 0;
    }
    }
   }
   }
-  .el-col {
-    border-radius: 4px;
-  }
   .bg-purple-dark {
   .bg-purple-dark {
     background: #99a9bf;
     background: #99a9bf;
   }
   }
@@ -968,7 +965,6 @@ export default {
     background: #e5e9f2;
     background: #e5e9f2;
   }
   }
   .grid-content {
   .grid-content {
-    border-radius: 4px;
     min-height: 36px;
     min-height: 36px;
   }
   }
   .row-bg {
   .row-bg {

@@ -46,7 +46,7 @@
 			</el-table-column>
 			</el-table-column>
 			<el-table-column label="操作" width="250">
 			<el-table-column label="操作" width="250">
 				<template slot-scope="scope">
 				<template slot-scope="scope">
-					<el-button size="small" @click="roleEdit(scope.$index, scope.row)">权限配置</el-button>
+					<el-button size="small" @click="roleEdit(scope.$index, scope.row)">角色配置</el-button>
 					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
 					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
 				</template>
 				</template>
@@ -168,7 +168,7 @@
 				<el-form-item label="账号">
 				<el-form-item label="账号">
 					<span>{{roleEditForm.username}}</span>
 					<span>{{roleEditForm.username}}</span>
 				</el-form-item>
 				</el-form-item>
-				<el-tree :data="roles" :props="treeDefaultProps" show-checkbox highlight-current node-key="roleId" ref="tree" @check-change="treeHandleCheckChange">
+				<el-tree :data="roles" :props="treeDefaultProps" show-checkbox highlight-current check-strictly node-key="roleId"  ref="tree" @check-change="treeHandleCheckChange">
 				</el-tree>
 				</el-tree>
 			</el-form>
 			</el-form>