fix： 修改右弹窗的组件

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;

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>

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>

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">
+    <el-drawer
-      <role-box v-if="rightBox.show" :object="object" @close="closeRightBox"></role-box>
+            v-model="rightBox.show"
-    </transition>
+            direction="rtl"
+            :with-header="false"
+            destroy-on-close>
+      <role-box :object="object" @close="closeRightBox"></role-box>
+    </el-drawer>
   </div>
 </template>
 <script>

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"
       />
-    </transition>
+    </el-drawer>
   </div>
 </template>
 <script>