页面ui交互

src/views/SystemManage/scss/role.scss

@@ -62,8 +62,7 @@
         color: #666666;
         font-size: 14px;
         background: #f6f8fa;
-        box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8),
-          -4px -4px 4px 0px #ffffff;
+        box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8), -4px -4px 4px 0px #ffffff;
         border-radius: 4px;
         margin-top: 10px;
         cursor: pointer;
@@ -77,7 +76,7 @@
         }
       }
     }
-    .diy-roles{
+    .diy-roles {
       //border: saddlebrown 1px solid;
       width: 215px;
       height: 366px;
@@ -85,12 +84,16 @@
       padding-left: 20px;
       //display: flex;
       //flex-direction: column;
-      overflow:scroll;
-      .diy-role-item{
+      overflow: scroll;
+      .diy-role-item {
+        float: right;
+        box-sizing: border-box;
+        padding-right: 40px;
+        position: relative;
         width: 190px;
         height: 40px;
         border-radius: 4px;
-        border: 1px solid #AEB5C2;
+        border: 1px solid #aeb5c2;
         font-size: 14px;
         color: #333333;
         line-height: 40px;
@@ -98,30 +101,30 @@
         margin-left: -22px;
         cursor: pointer;
         overflow: hidden;
-        &.active{
-          border: 1px solid #055FE7;
-          color: #055FE7;
+        &.active {
+          border: 1px solid #055fe7;
+          color: #055fe7;
         }
-        .diy-edit-title{
+        .diy-edit-title {
           width: 146px;
           height: 19px;
           font-size: 14px;
           color: #333333;
           line-height: 19px;
         }
-        .diy-edit-btn{
+        .diy-edit-btn {
           width: 40px;
           height: 30px;
-          background: #DDEBFF;
+          background: #ddebff;
           box-shadow: 0px 0px 4px 0px rgba(5, 95, 231, 0.3);
-          border-bottom-left-radius:250px;
-          position: relative;
+          border-bottom-left-radius: 250px;
+          position: absolute;
           right: 0;
-          top: -3px;
-          .img{
+          top: 0;
+          .img {
             width: 13px;
             height: 14px;
-            margin-bottom:13px;
+            margin-bottom: 13px;
             cursor: pointer;
           }
         }
@@ -184,8 +187,7 @@
       width: 100%;
       height: 690px;
       background: #ffffff;
-      box-shadow: 1px 0px 3px 0px rgba(5, 95, 231, 0.3),
-        -1px 1px 3px 0px rgba(5, 95, 231, 0.24);
+      box-shadow: 1px 0px 3px 0px rgba(5, 95, 231, 0.3), -1px 1px 3px 0px rgba(5, 95, 231, 0.24);
       border-radius: 10px;
       display: flex;
       flex-direction: row;