用户、角色管理

src/style/common.styl

@@ -191,6 +191,8 @@
   color: #606266;
   font-size: 14px;
   word-break: break-all;
+.form_wraper
+  width 100%
 .form
   width 100%
   _fj(flex-start)
@@ -234,10 +236,13 @@
   padding: 0 15px;
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   width: 100%;
+.form_item__textarea
+  line-height 23px
+  height 69px
 .form_item__radio
   color: #606266;
   font-weight: 500;
-  line-height: 1;
+  line-height: 40px;
   position: relative;
   cursor: pointer;
   display: inline-block;
@@ -256,14 +261,25 @@
   padding: 2px
   position: relative;
   vertical-align: middle;
-  border 1px solid $gray1
+  border 1px solid $green1
+  background-color #fff
   border-radius 50%
 .radio__label
   display: inline-block;
   font-size: 14px;
   padding-left: 10px;
 .icon_radio_checked
-  color $red2
+  background-color $green1
+.radio__original
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
 .el-select
   width 100%
 .el-select:hover .el-input__inner, .el-input__inner
@@ -298,7 +314,6 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      white-space: nowrap;
       text-align: center;
       position: sticky;
       top: -1px;
@@ -314,7 +329,6 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      white-space: nowrap;
       padding: 12px 10px;
       border-bottom: 1px dashed $gray1;
       border-right: 1px dashed $gray1;
@@ -333,3 +347,70 @@
 	position: sticky;
 	left: 0;
 	z-index: 99;
+.grid_button
+  padding 6px 12px
+
+// tree
+.tree
+  position: relative;
+  cursor: default;
+  background: #fff;
+  color: #606266;
+.tree-node
+  white-space: nowrap;
+  outline: none;
+.tree-node__content
+  display: flex;
+  align-items: center;
+  height: 26px;
+  cursor: pointer;
+.icon_tree-node__expand
+  cursor: pointer;
+  color: #c0c4cc;
+  font-size: 12px;
+  transform: rotate(0deg);
+  transition: transform .3s ease-in-out;
+  padding: 6px;
+  &::before
+    content: '\e65b'
+.icon_caret_right
+  transform rotate(-90deg)
+.checkbox__input
+  color: #606266;
+  font-weight: 500;
+  font-size: 12px;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  user-select: none;
+  margin-right: 8px
+  cursor: pointer;
+.icon_checkbox
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  display: inline-block;
+  padding: 2px;
+  position: relative;
+  vertical-align: middle;
+  color #fff
+  border: 1px solid $green1
+  background-color: #fff;
+  border-radius 3px
+  &::before
+    content: '\E608'
+.icon_checkbox_checked
+  background-color $green1
+.checkbox__original
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  margin: 0;
+  width: 0;
+  height: 0;
+  z-index: -1;
+.tree-node__label
+  font-size: 14px
+.tree-node__children
+  overflow hidden