1.权限详情表格宽度调整；2. 优化权限查看界面样式；3.成员列表增加移除功能

src/components/auth/authRole.vue

@@ -741,7 +741,7 @@ export default {
                 margin-right: 10px;
               }
               &.active {
-                background: rgb(224, 239, 250, 0.8);
+                background: rgba(224, 239, 250, 0.8);
                 color: @fontColor;
               }
 

src/components/auth/authView.vue

@@ -26,14 +26,17 @@ export default {
       {
         title: "手机号",
         dataIndex: "phone",
+        width: "15%",
       },
       {
         title: "邮箱",
         dataIndex: "email",
+        width: "20%",
       },
       {
         title: "单位",
         dataIndex: "unit",
+        width: "20%",
       },
       {
         title: "注册时间",
@@ -46,6 +49,7 @@ export default {
       {
         title: "操作",
         dataIndex: "operation",
+        scopedSlots: { customRender: "operation" },
       },
     ];
     return {
@@ -58,8 +62,6 @@ export default {
         viewSystemInfo: false,
       },
       searchInput: "",
-      // toggleArr: ["角色列表", "成员列表"],
-      // btnChecked: "角色列表",
       roleListData: [
         {
           id: publicFunc.buildGuid("group"),
@@ -238,7 +240,6 @@ export default {
             unit: v.unit,
             registerTime: v.registerTime,
             status: v.status,
-            operation: "移除",
           });
         });
       } else {
@@ -261,6 +262,10 @@ export default {
         this.$message.info("暂无数据!");
       }
     },
+    onDelete(key) {
+      const dataSource = [...this.peopleTableData];
+      this.peopleTableData = dataSource.filter((item) => item.key !== key);
+    },
   },
 };
 </script>
@@ -280,7 +285,7 @@ export default {
             <a-modal
               v-model="visible.viewPeopleInfo"
               title="成员列表"
-              :width="1000"
+              :width="'70%'"
             >
               <div class="dialog-people-content">
                 <div class="dialog-people-content-search">
@@ -296,7 +301,17 @@ export default {
                     :data-source="peopleTableData"
                     :columns="peopleColumns"
                     :scroll="{ y: 200 }"
-                  ></a-table>
+                  >
+                    <template slot="operation" slot-scope="text, record">
+                      <a-popconfirm
+                        v-if="peopleTableData.length"
+                        title="确定移除吗？"
+                        @confirm="onDelete(record.key)"
+                      >
+                        <a href="javascript:;">移除</a>
+                      </a-popconfirm>
+                    </template>
+                  </a-table>
                 </div>
               </div>
             </a-modal>
@@ -310,12 +325,16 @@ export default {
             @click="displaySystemInfo(system.modelList)"
           >
             <div class="top-content">
-              <img :src="requireImg('auth/system_gray.png')" />
+              <div class="icon-img"></div>
               <div class="top-content-name">{{ system.label }}</div>
             </div>
             <div class="bottom-content">权限详情</div>
           </div>
-          <a-modal v-model="visible.viewSystemInfo" title="权限列表">
+          <a-modal
+            v-model="visible.viewSystemInfo"
+            title="权限列表"
+            :width="'50%'"
+          >
             <div class="dialog-content">
               <a-table
                 :data-source="systemTableData"
@@ -330,13 +349,15 @@ export default {
   </div>
 </template>
 <style lang="less" scoped>
+@fontColor: #66beff;
+@hoverBack: #edf5fa;
 .ant-modal-body {
   .dialog-people-content {
     width: 100%;
     height: 100%;
     &-search {
       width: 100%;
-      height: 50px;
+      height: 70px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -367,7 +388,7 @@ export default {
     }
     &-table {
       width: 100%;
-      height: calc(100% - 50px);
+      height: calc(100% - 70px);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -451,6 +472,19 @@ export default {
           border: 1px solid #bebebe;
           border-radius: 4px;
           cursor: pointer;
+          &:hover {
+            .top-content {
+              background: @hoverBack;
+              color: @fontColor;
+              .icon-img {
+                background: url("@/assets/images/auth/details_blue.png")
+                  no-repeat;
+              }
+            }
+            .bottom-content {
+              background: #2ea8e6;
+            }
+          }
           .top-content {
             width: 100%;
             height: 85%;
@@ -459,9 +493,16 @@ export default {
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            // &:hover {
+            //   color: @fontColor;
+            //   background: @hoverBack;
+            // }
             .icon-img {
-              width: 30px;
-              height: 30px;
+              width: 28px;
+              height: 25px;
+              background: url("@/assets/images/auth/details_gray.png") no-repeat
+                center;
+              background-size: 100% 100%;
             }
             &-name {
               width: 60%;