角色管理-tree

src/assets/styles/mixin.scss

@@ -251,6 +251,43 @@
   }
 }
 
+@mixin tree_tab_style{
+  [data-theme="dark"] & {
+    border-bottom: 1px solid $mainColor;
+  }
+  [data-theme="light"] & {
+    border-bottom: 1px solid #E3E7EE;
+  }
+}
+
+@mixin tree_tab_item{
+  [data-theme="dark"] & {
+    padding: 15px 0;
+  }
+  [data-theme="light"] & {
+    color: #A6ADB6;
+    padding-bottom: 15px;
+  }
+}
+
+@mixin tree_tab_item_active{
+  [data-theme="dark"] & {
+    border-bottom: 3px solid #3a99fd;
+  }
+  [data-theme="light"] & {
+    color: #000;
+    border-bottom: 3px solid #0348F3;
+  }
+}
+
+@mixin tree_no_header{
+  [data-theme="dark"] & {
+    margin-top:120px;
+    min-height: calc(100vh - 260px);
+    padding: 0 20px;
+  }
+}
+
 @mixin table_height_min{
   [data-theme="dark"] & {
     min-height: calc(100vh - 260px);

src/assets/styles/yxk-admin.scss

@@ -8,6 +8,7 @@
   }
   .container-left{
     @include tree_height_min;
+    @include tree_no_header;
   }
 }
 .elect-cont-right{
@@ -1533,3 +1534,26 @@ input[type ='number'] {
   }
 }
 
+// 角色权限选择
+.tree-tab {
+  display: flex;
+  justify-content: space-between;
+  align-items: first baseline; 
+  @include tree_tab_style;
+  span.role-span{
+    display: block;
+    font-size: 14px;
+    @include tree_tab_item;
+    line-height: 26px;
+    &.role-tab-active{
+      font-size: 16px;
+      @include tree_tab_item_active;
+    }
+  }
+  .el-button--mini{
+    width: 46px;
+    height: 26px;
+    padding: 0;
+  }
+}
+

src/views/system/role/index.vue

@@ -88,17 +88,18 @@
         <div class="container-left">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          <div slot="header" class="clearfix">
+          <div slot="header" class="tree-tab">
             <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
-              <span class="role-span">菜单分配</span>
+              <span class="role-span role-tab-active">菜单分配</span>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
+              <span class="role-span">全宗范围</span>
             </el-tooltip>
             <el-button
               v-permission="['admin','roles:edit']"
               :disabled="!showButton"
               :loading="menuLoading"
-              icon="el-icon-check"
               size="mini"
-              style="float: right; padding: 6px 9px"
               @click="saveMenu"
             >保存</el-button>
           </div>
@@ -347,32 +348,6 @@ export default {
 }
 </script>
 
-<!-- <style rel="stylesheet/scss" lang="scss">
-  .role-span {
-    font-weight: bold;color: #303133;
-    font-size: 15px;
-  }
-</style> -->
+<style rel="stylesheet/scss" lang="scss">
 
-<!-- <style rel="stylesheet/scss" lang="scss" scoped>
-.head-container{
-  padding: 0 0 20px 0;
-}
-::v-deep .el-input-number .el-input__inner {
-  text-align: left;
-}
-::v-deep .vue-treeselect__multi-value{
-  margin-bottom: 0;
-}
-::v-deep .vue-treeselect__multi-value-item{
-  border: 0;
-  padding: 0;
-}
-::v-deep .el-table__body tr.current-row > td{
-  color: #fff;
-  background-color: #13439E;
-}
-::v-deep .el-table__header{
-  border-top: 1px solid #113D72;
-} -->
-<!-- </style> -->
+</style>