fix:角色管理页面样式调整

src/views/system/role/components/RoleDrawer.vue

@@ -1,6 +1,6 @@
 <template>
   <el-drawer :title="title" v-model="drawerOpened" @close="clear">
-    <el-form label-position="left" label-width="80px" :model="formData" :rules="formRules" ref="formInstance">
+    <el-form label-position="right" label-width="80px" :model="formData" :rules="formRules" ref="formInstance">
       <el-form-item label="角色名称" prop="roleName">
         <el-input placeholder="角色名称" v-model="formData.roleName" />
       </el-form-item>

src/views/system/role/role.vue

@@ -4,9 +4,9 @@
       <Breadcrumb />
     </template>
 
-    <div>
-      <el-card class="mb-3 proCard">
-        <el-space align="center">
+    <div class="content">
+      <div class="toolbar">
+        <div>
           <el-input
             :style="{ width: '320px' }"
             v-model="requestParams.queryParam!.roleName"
@@ -14,46 +14,42 @@
             placeholder="请输入角色名称"
             @keyup.enter="queryRolesPage"
           />
-          <el-button type="primary" :icon="Search" @click="queryRolesPage">查询</el-button>
-        </el-space>
-      </el-card>
+          <el-button type="primary" :icon="Search" @click="queryRolesPage" style="margin-left: 20px">查询</el-button>
+        </div>
 
-      <el-card shadow="never">
-        <template #header>
-          <el-button type="primary" @click="openDrawer()" v-permission="PERM_USER.ROLE"> 添加角色 </el-button>
-        </template>
+        <el-button type="primary" @click="openDrawer()" v-permission="PERM_USER.ROLE"> 添加角色 </el-button>
+      </div>
 
-        <el-table :data="roleList">
-          <el-table-column label="角色ID" width="100" prop="id" />
-          <el-table-column label="角色名称" prop="roleName" />
-          <el-table-column label="备注" prop="remark" />
-          <el-table-column label="创建时间" width="200" prop="createdAt" />
-          <el-table-column label="操作" width="160">
-            <template #default="{ row }">
-              <section class="actions">
-                <img src="@/assets/icons/edit.png" @click="openDrawer(row)" v-permission="PERM_USER.ROLE" />
-                <img
-                  src="@/assets/icons/delete.png"
-                  @click="deleteRole(row.id)"
-                  v-permission="{ action: [PERM_USER.ROLE] }"
-                />
-              </section>
-            </template>
-          </el-table-column>
-        </el-table>
+      <el-table :data="roleList">
+        <el-table-column label="角色ID" width="100" prop="id" />
+        <el-table-column label="角色名称" prop="roleName" />
+        <el-table-column label="备注" prop="remark" />
+        <el-table-column label="创建时间" width="200" prop="createdAt" />
+        <el-table-column label="操作" width="160">
+          <template #default="{ row }">
+            <section class="actions">
+              <img src="@/assets/icons/edit.png" @click="openDrawer(row)" v-permission="PERM_USER.ROLE" />
+              <img
+                src="@/assets/icons/delete.png"
+                @click="deleteRole(row.id)"
+                v-permission="{ action: [PERM_USER.ROLE] }"
+              />
+            </section>
+          </template>
+        </el-table-column>
+      </el-table>
 
-        <section class="paginationPosition">
-          <el-pagination
-            background
-            layout="total, sizes, prev, pager, next"
-            :page-sizes="[10, 30, 50]"
-            :total="total"
-            v-model:page-size="requestParams.pageSize"
-            v-model:current-page="requestParams.pageNumber"
-            @change="queryRolesPage"
-          />
-        </section>
-      </el-card>
+      <section class="paginationPosition">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next"
+          :page-sizes="[10, 30, 50]"
+          :total="total"
+          v-model:page-size="requestParams.pageSize"
+          v-model:current-page="requestParams.pageNumber"
+          @change="queryRolesPage"
+        />
+      </section>
 
       <RoleDrawer :title="drawerTitle" ref="drawerInstance" @submitted="onSubmitRole" />
     </div>
@@ -117,4 +113,13 @@
     margin-right: 24px;
     cursor: pointer;
   }
+
+  .content {
+    padding: 20px;
+  }
+  .toolbar {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+  }
 </style>