🌈 style: 修改了活动管理的样式

src/views/activityManage/activity.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card>
+    <el-card class="card1" style="margin-bottom: 1vh;">
         <div class="condition">
             <div class="condition-item1">
                 <el-text size="large">活动名称：</el-text>
@@ -29,9 +29,13 @@
         </div>
     </el-card>
 
-    <el-button type="success" @click="showAdd = true" style="margin-top: 1vh;">新增活动</el-button>
 
-    <el-card style="margin-top: 1vh;height:80vh;">
+
+    <el-card class="card2">
+        <div class="add-item">
+            <el-button type="success" @click="showAdd = true" style="margin-top: 1vh;">新增活动</el-button>
+        </div>
+        <div>
             <el-table :data="tableData" style="width: 82vw;height:70vh;" :row-style="{ height: '50px' }">
                 <el-table-column type="index" label="序号" width="100px" fixed="left">
                     <template #default="scope">
@@ -69,16 +73,20 @@
                     </template>
                 </el-table-column>
             </el-table>
+        </div>
 
-        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
+        <div style="margin-top: 20px;display: flex;">
+            <el-pagination background v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
                 layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" style="margin-top: 1vh;"
                 @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
     </el-card>
 
     <el-dialog v-model="showAdd" width="20vw" draggable align-center style="background-color: rgb(243,250,254);">
         <div class="add-item">
             <el-text size="large">活动名称：</el-text>
-            <el-input v-model="addForm.activityName" style="width: 12vw" placeholder="请输入活动名称" maxlength="100" clearable />
+            <el-input v-model="addForm.activityName" style="width: 12vw" placeholder="请输入活动名称" maxlength="100"
+                clearable />
         </div>
         <div class="add-item">
             <el-text size="large">业绩归属：</el-text>
@@ -111,7 +119,8 @@
     <el-dialog v-model="showEdit" width="20vw" draggable align-center style="background-color: rgb(243,250,254);">
         <div class="edit-item">
             <el-text size="large">活动名称：</el-text>
-            <el-input v-model="editForm.activityName" style="width: 12vw" placeholder="请输入活动名称" maxlength="100" clearable />
+            <el-input v-model="editForm.activityName" style="width: 12vw" placeholder="请输入活动名称" maxlength="100"
+                clearable />
         </div>
 
         <div class="edit-item">
@@ -450,7 +459,36 @@ onMounted(() => {
     console.log('看看adminData', adminData.value)
 })
 </script>
-<style>
+<style scoped lang="scss">
+// 搜索的卡片样式
+.card1 {
+    background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+    background: #E7F4FD;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+    background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+    background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+    background-color: #E5EBFE !important;
+}
+
 .condition {
     display: flex;
     align-items: center;

src/views/permissions/rolePermission.vue

@@ -694,10 +694,8 @@ onMounted(async function () {
 
       <div style="margin-top: 20px;display: flex;">
         <el-pagination background :current-page="getRoleObj.pageNum" :page-size="getRoleObj.pageSize"
-                       :page-sizes="[5, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
-                       :total="roleTotal"
-                       @size-change="handleRolePageSizeChange"
-                       @current-change="handleRoleCurrentChange"></el-pagination>
+          :page-sizes="[5, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="roleTotal"
+          @size-change="handleRolePageSizeChange" @current-change="handleRoleCurrentChange"></el-pagination>
       </div>
     </el-card>
   </div>
@@ -722,8 +720,7 @@ onMounted(async function () {
           <el-input v-model="addRole.roleName" placeholder="请输入角色名称" style="width: 220px" />
         </el-form-item>
         <el-form-item prop="parentName" label="上级角色:">
-          <el-select v-model="addRole.parentId" placeholder="请选择上级角色" style="width: 220px" @change="getLists"
-                     clearable>
+          <el-select v-model="addRole.parentId" placeholder="请选择上级角色" style="width: 220px" @change="getLists" clearable>
             <el-option v-for="item in permissionList" :key="item.value" :label="item.label"
               :value="item.value"></el-option>
           </el-select>