diff --git a/src/assets/css/rightBoxCommon.scss b/src/assets/css/rightBoxCommon.scss
index b5704259..881032f3 100644
--- a/src/assets/css/rightBoxCommon.scss
+++ b/src/assets/css/rightBoxCommon.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   position: fixed;
   right: 0;
-  top: 50px;
+  top: 0px;
   padding: 0;
   height: calc(100% - 50px);
   width: 700px;
diff --git a/src/components/table/settings/RoleTable.vue b/src/components/table/settings/RoleTable.vue
index 0b45e313..5e41b962 100644
--- a/src/components/table/settings/RoleTable.vue
+++ b/src/components/table/settings/RoleTable.vue
@@ -56,7 +56,7 @@
       </template>
       <template #default="scope">
         <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-view1"></i></button>
+          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
           <el-dropdown size="medium" trigger="hover" @command="tableOperation">
             <div class="table-operation-item table-operation-item--more">
               <i class="cn-icon cn-icon-more-arrow-down"></i>
diff --git a/src/components/table/settings/UserTable.vue b/src/components/table/settings/UserTable.vue
index 51117886..67b6c4ad 100644
--- a/src/components/table/settings/UserTable.vue
+++ b/src/components/table/settings/UserTable.vue
@@ -63,7 +63,7 @@
       </template>
       <template #default="scope">
         <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-view"></i></button>
+          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
           <el-dropdown size="medium" trigger="hover" @command="tableOperation">
             <div class="table-operation-item table-operation-item--more">
               <i class="cn-icon cn-icon-more-arrow-down"></i>
diff --git a/src/views/settings/Roles.vue b/src/views/settings/Roles.vue
index acb265db..e02fdff2 100644
--- a/src/views/settings/Roles.vue
+++ b/src/views/settings/Roles.vue
@@ -34,9 +34,13 @@
         <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
       </template>
     </cn-data-list>
-    <transition name="right-box">
-      <role-box v-if="rightBox.show" :object="object" @close="closeRightBox"></role-box>
-    </transition>
+    <el-drawer
+            v-model="rightBox.show"
+            direction="rtl"
+            :with-header="false"
+            destroy-on-close>
+      <role-box :object="object" @close="closeRightBox"></role-box>
+    </el-drawer>
   </div>
 </template>
 <script>
diff --git a/src/views/settings/User.vue b/src/views/settings/User.vue
index 7622ab0a..fdc3f361 100644
--- a/src/views/settings/User.vue
+++ b/src/views/settings/User.vue
@@ -38,13 +38,16 @@
         <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
       </template>
     </cn-data-list>
-    <transition name="right-box">
+    <el-drawer
+            v-model="rightBox.show"
+            direction="rtl"
+            :with-header="false"
+            destroy-on-close>
       <user-box
-        v-if="rightBox.show"
-        :object="object"
-        @close="closeRightBox"
+              :object="object"
+              @close="closeRightBox"
       />
-    </transition>
+    </el-drawer>
   </div>
 </template>
 <script>