diff --git a/src/assets/css/rightBoxCommon.scss b/src/assets/css/rightBoxCommon.scss
index 881032f3..63976f59 100644
--- a/src/assets/css/rightBoxCommon.scss
+++ b/src/assets/css/rightBoxCommon.scss
@@ -1,15 +1,9 @@
 .right-box, .right-sub-box {
   display: flex;
   flex-direction: column;
-  position: fixed;
-  right: 0;
-  top: 0px;
   padding: 0;
-  height: calc(100% - 50px);
-  width: 700px;
-  box-shadow: 0 0 5px #ccc;
-  background-color: white;
-  z-index: 410;
+  height: 100%;
+  width: 100%;
 
   .el-date-editor {
     .el-input__inner {
@@ -40,9 +34,6 @@
 }
 
 .right-box__container {
-  .right-box-form{
-    width: calc(100% - 60px);
-  }
   height: calc(100% - 130px);
   padding: 0 30px;
   overflow-x: hidden;
@@ -181,12 +172,12 @@
       margin-bottom: 20px;
       width: 300px;
       height: 28px;
-      border: 1px solid var(--theme-color-light-71);
+      border: 1px solid lighten($--color-primary, 60%);
       border-radius: $--border-radius-primary;
-      background-color: var(--theme-color-light-98);
+      background-color: lighten($--color-primary, 95%);
 
       i {
-        color: var(--theme-color);
+        color: $--color-primary;
       }
     }
     .form__flex-container {
@@ -226,7 +217,7 @@
     min-width: 74px;
     padding: 0 15px;
     color: white;
-    background-color: var(--theme-color);
+    background-color: $--color-primary;
     border: none;
     border-radius: 4px;
     outline: none;
@@ -235,7 +226,7 @@
     transition: background-color linear .2s, color linear .1s;
   }
   .footer__btn:hover:not(.footer__btn--disabled) {
-    background-color: var(--theme-color-light-20);
+    background-color: lighten($--color-primary, 10%);
   }
   .footer__btn--light {
     background-color: white;
@@ -244,8 +235,8 @@
   }
   .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
     background-color: white;
-    border-color: var(--theme-color-light-50);
-    color: var(--theme-color);
+    border-color: lighten($--color-primary, 40%);
+    color: $--color-primary;
   }
   .footer__btn--disabled {
     opacity: .6;
diff --git a/src/assets/css/tableCommon.scss b/src/assets/css/tableCommon.scss
index a9798238..5da50aef 100644
--- a/src/assets/css/tableCommon.scss
+++ b/src/assets/css/tableCommon.scss
@@ -91,7 +91,7 @@
     }
     .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
       background-color: $--button-gray-hover-background-color;
-      border: 1px solid #FBCEA4 !important;
+      border: 1px solid $--color-primary !important;
       i {
         color: $--button-gray-active-color;
       }
@@ -110,80 +110,6 @@
       min-width: 36px;
     }
   }
-  .top-tools--sub {
-    .top-tool-left {
-      height: 100%;
-    }
-    .sub-list-title {
-      width: 200px;
-      line-height: 40px;
-      font-size: 16px;
-      color: #202F3F;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-    .sub-list-tabs {
-      height: 100%;
-      display: flex;
-      align-items: center;
-
-      .sub-list-tab {
-        height: 100%;
-        width: 120px;
-        color: #666666;
-        font-size: 14px;
-        text-align: center;
-
-        line-height: 40px;
-
-        &.sub-list-tab--active {
-          border-bottom: 2px solid $--color-primary;
-          color: #FA901C;
-        }
-      }
-
-    }
-  }
-  /* 上滑resize工具条 */
-  .sub-list-resize, .sub-list-resize-copy {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 9px;
-    width: 100%;
-    box-shadow: inset 0 1px 0 0 #BEBEBE;
-    background-color: #e6eaed;
-    position: absolute;
-    z-index: 1;
-
-    user-select: none;
-    color: #5f6368;
-    cursor: ns-resize;
-  }
-  .sub-list-window-control {
-    display: flex;
-    align-items: center;
-    margin-left: 14px;
-    position: absolute;
-    right: 0;
-    height: 44px;
-    z-index: 2;
-
-    .window-control-btn {
-      cursor: pointer;
-      margin-right: 20px;
-    }
-    .window-control-btn>i {
-      color: #999999;
-      font-size: 14px;
-      transition: all .2s;
-    }
-    .window-control-btn>i:hover {
-      color: $--color-primary;
-    }
-  }
-  /* 上滑resize工具条--end */
   .cn-table {
     position: relative;
     padding: 0 20px;
@@ -238,7 +164,7 @@
       .el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td,
       .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
       .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
-        background-color: var(--theme-color-light-96) !important;
+        background-color: lighten($--color-primary, 95%) !important;
       }
       .table-operation-title {
         text-align: center;
diff --git a/src/views/settings/Roles.vue b/src/views/settings/Roles.vue
index 7db3cc82..91d553cb 100644
--- a/src/views/settings/Roles.vue
+++ b/src/views/settings/Roles.vue
@@ -38,6 +38,7 @@
     <el-drawer
             v-model="rightBox.show"
             direction="rtl"
+            :size="700"
             :with-header="false"
             destroy-on-close>
       <role-box :object="object" @close="closeRightBox"></role-box>
diff --git a/src/views/settings/User.vue b/src/views/settings/User.vue
index 403eb882..c4480f8b 100644
--- a/src/views/settings/User.vue
+++ b/src/views/settings/User.vue
@@ -43,6 +43,7 @@
             v-model="rightBox.show"
             direction="rtl"
             :with-header="false"
+            :size="700"
             destroy-on-close>
       <user-box
               :object="object"