🌈 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,56 +29,64 @@
         </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-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">
-                    <span>{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column prop="activityName" label="活动名称" width="150px" show-overflow-tooltip />
-            <el-table-column prop="businessBelong" label="业绩归属地" width="150px" />
-            <el-table-column prop="areaName" label="归属地" width="150px" />
-            <el-table-column prop="startTime" label="开始时间" width="200px">
-                <template #default="scope">
-                    {{ moment(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="endTime" label="结束时间" width="200px">
-                <template #default="scope">
-                    {{
-                        moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss')
-                    }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="status" label="状态" width="150px">
-                <template #default="scope">
-                    {{ scope.row.status === '0' ? '未开始' :
-                        scope.row.status === '1' ? '进行中' :
-                            scope.row.status === '2' ? '已结束' : scope.row.status
-                    }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="creatorName" label="添加人" width="150px" />
-            <el-table-column prop="operation" label="操作" width="220px">
-                <template #default="scope">
-                    <el-button type="primary" text @click="editOpen(scope.row)">编辑</el-button>
-                    <el-button type="danger" text @click="openDel(scope.row)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
 
-        <el-pagination 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" />
+    <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">
+                        <span>{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="activityName" label="活动名称" width="150px" show-overflow-tooltip />
+                <el-table-column prop="businessBelong" label="业绩归属地" width="150px" />
+                <el-table-column prop="areaName" label="归属地" width="150px" />
+                <el-table-column prop="startTime" label="开始时间" width="200px">
+                    <template #default="scope">
+                        {{ moment(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="endTime" label="结束时间" width="200px">
+                    <template #default="scope">
+                        {{
+                            moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss')
+                        }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="status" label="状态" width="150px">
+                    <template #default="scope">
+                        {{ scope.row.status === '0' ? '未开始' :
+                            scope.row.status === '1' ? '进行中' :
+                                scope.row.status === '2' ? '已结束' : scope.row.status
+                        }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="creatorName" label="添加人" width="150px" />
+                <el-table-column prop="operation" label="操作" width="220px">
+                    <template #default="scope">
+                        <el-button type="primary" text @click="editOpen(scope.row)">编辑</el-button>
+                        <el-button type="danger" text @click="openDel(scope.row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <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">
@@ -231,7 +240,7 @@ const handleAdd = async function () {
         ElMessage.error('请选择结束时间')
         return
     }
-    if(addForm.value.businessBelong === '客户归属地'){
+    if (addForm.value.businessBelong === '客户归属地') {
         addForm.value.area = []
     }
 
@@ -290,7 +299,7 @@ const handleEdit = async function () {
         ElMessage.error('请选择结束时间')
         return
     }
-    if(editForm.value.businessBelong === '客户归属地'){
+    if (editForm.value.businessBelong === '客户归属地') {
         editForm.value.area = []
     }
 
@@ -436,11 +445,11 @@ const validateActivityName = (name) => {
     }
     return true;
 };
-const handleSizeChange = function(val){
+const handleSizeChange = function (val) {
     pagination.pageSize = val
     getActivity()
 }
-const handleCurrentChange = function(val){
+const handleCurrentChange = function (val) {
     pagination.pageNum = val
     getActivity()
 }
@@ -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

@@ -1,16 +1,16 @@
 <script setup>
-import {nextTick, onMounted, reactive, ref} from 'vue'
-import {ElMessage} from 'element-plus'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
 import _ from 'lodash'
 import request from '@/util/http'
 import API from '@/util/http'
-import {useAdminStore} from "@/store/index.js"
-import {storeToRefs} from "pinia"
+import { useAdminStore } from "@/store/index.js"
+import { storeToRefs } from "pinia"
 
 const adminStore = useAdminStore();
-const {adminData, menuTree} = storeToRefs(adminStore);
-import {permissionMapping, findMenuById} from "@/utils/menuTreePermission.js"
-import {tr} from 'element-plus/es/locales.mjs'
+const { adminData, menuTree } = storeToRefs(adminStore);
+import { permissionMapping, findMenuById } from "@/utils/menuTreePermission.js"
+import { tr } from 'element-plus/es/locales.mjs'
 
 // 表单验证ref
 const Ref = ref(null)
@@ -139,7 +139,7 @@ const handleDialogClose = function () {
 const permissionList = ref([])
 const getRoles = async function () {
   try {
-    const res = await API({url: '/role/selectAll'})
+    const res = await API({ url: '/role/selectAll' })
     permissionList.value = res.data.map(item => ({
       label: item.roleName,
       value: item.id
@@ -238,7 +238,7 @@ const getLists = async function () {
     }
     const res = await API({
       url: '/menu/tree',
-      data: {id: roleId}
+      data: { id: roleId }
     })
     data.value = res.data
     data.value = filterPermission(data.value)
@@ -248,7 +248,7 @@ const getLists = async function () {
     if (addRole.value.parentId && addRole.value.parentId !== 2) {
       const result = await API({
         url: '/general/roleMarket',
-        data: {id: addRole.value.parentId}
+        data: { id: addRole.value.parentId }
       })
       if (result.code === 200) {
         if (typeof result.data === 'string' && result.data) {
@@ -306,17 +306,17 @@ const goldenBeanMenuIds = new Set([
 //   23// 金豆客户账户明细
 const filterGoldenBeanMenus = (tree) => {
   return tree
-      .filter(item => {
-        // 排除金豆相关的顶层菜单
-        if (goldenBeanMenuIds.has(item.id)) {
-          return false
-        }
-        // 递归处理子菜单
-        if (item.children && item.children.length > 0) {
-          item.children = filterGoldenBeanMenus(item.children)
-        }
-        return true
-      })
+    .filter(item => {
+      // 排除金豆相关的顶层菜单
+      if (goldenBeanMenuIds.has(item.id)) {
+        return false
+      }
+      // 递归处理子菜单
+      if (item.children && item.children.length > 0) {
+        item.children = filterGoldenBeanMenus(item.children)
+      }
+      return true
+    })
 }
 // 过滤权限模块(????????)俺不会
 const filterPermission = (tree) => {
@@ -331,7 +331,7 @@ const filterPermission = (tree) => {
 }
 // 处理编辑角色权限时的勾选事件
 const handleEditRolePermissionCheck = (checkedNodes, checkedInfo) => {
-  const {checkedKeys, checkedNodes: allCheckedNodes} = checkedInfo
+  const { checkedKeys, checkedNodes: allCheckedNodes } = checkedInfo
 
   // 判断是否有选中的节点
   if (allCheckedNodes.length === 0) {
@@ -356,7 +356,7 @@ const handleEditRolePermissionCheck = (checkedNodes, checkedInfo) => {
 //用于标记是否勾选频道管理
 const ifHasChannel = ref(false)
 const handleCheckChange = async (checkedNodes, checkedInfo) => {
-  const {checkedKeys, checkedNodes: allCheckedNodes} = checkedInfo
+  const { checkedKeys, checkedNodes: allCheckedNodes } = checkedInfo
 
   // 判断是否有选中的节点
   if (allCheckedNodes.length === 0) {
@@ -492,7 +492,7 @@ const permissionEditRoleInit = async function (row) {
     // 调用 /tree 接口，使用上级角色 ID 获取权限列表
     const res = await API({
       url: '/menu/tree',
-      data: {id: roleId}
+      data: { id: roleId }
     });
     data.value = res.data;
     data.value = filterPermission(data.value)
@@ -602,11 +602,11 @@ const selectParentNodesForSubmit = (treeData, nodeId, checkedKeys) => {
 
 const Rolerules = reactive({
   roleName: [
-    {required: true, message: '请输入角色名称', trigger: 'blur'},
-    {min: 2, max: 20, message: '角色名称长度应在2-20个字符之间', trigger: 'blur'}
+    { required: true, message: '请输入角色名称', trigger: 'blur' },
+    { min: 2, max: 20, message: '角色名称长度应在2-20个字符之间', trigger: 'blur' }
   ],
   market: [
-    {required: true, message: '请选择归属地区', trigger: 'change'}
+    { required: true, message: '请选择归属地区', trigger: 'change' }
   ],
   checkedKeys: [
     {
@@ -643,7 +643,7 @@ onMounted(async function () {
     <el-card class="card1" style="margin-bottom: 1vh;">
       <div style="display: flex;">
         <el-text size="large">角色名称：</el-text>
-        <el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable/>
+        <el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable />
         <div style="margin-left: auto;">
           <el-button type="primary" @click="searchRole()" :disabled="!canLook" v-if="canLook">查询</el-button>
           <el-button type="success" @click="reset()">重置</el-button>
@@ -654,21 +654,21 @@ onMounted(async function () {
     <el-card class="card2">
       <div class="add-item">
         <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()" :disabled="!canAdd"
-                   v-if="canAdd">新增角色
+          v-if="canAdd">新增角色
         </el-button>
       </div>
       <div>
         <el-table :data="roleData" style="width: 82vw;height:71.3vh" show-overflow-tooltip
-                  :row-style="{ height: '56px' }">
+          :row-style="{ height: '56px' }">
           <el-table-column type="index" label="序号" width="100px" fixed="left">
             <template #default="scope">
               <span>{{
-                  scope.$index + 1 + (getRoleObj.pageNum - 1) * getRoleObj.pageSize
-                }}</span>
+                scope.$index + 1 + (getRoleObj.pageNum - 1) * getRoleObj.pageSize
+              }}</span>
             </template>
           </el-table-column>
 
-          <el-table-column prop="roleName" label="角色名称"/>
+          <el-table-column prop="roleName" label="角色名称" />
           <el-table-column prop="fatherName" label="上级角色">
             <template #default="scope">
               {{ scope.row.fatherName || '-' }}
@@ -684,7 +684,7 @@ onMounted(async function () {
           <el-table-column prop="operation" label="操作" width="200px">
             <template #default="scope">
               <el-button type="warning" text @click="permissionEditRoleInit(scope.row)"
-                         :disabled="(scope.row.id === 2) || (scope.row.id === 1) || !canEdit" v-if="canEdit">
+                :disabled="(scope.row.id === 2) || (scope.row.id === 1) || !canEdit" v-if="canEdit">
                 编辑
               </el-button>
             </template>
@@ -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>
@@ -705,8 +703,8 @@ onMounted(async function () {
   <!-- 角色菜单树展示 -->
   <el-dialog v-model="menuTreeVisible" :title='`权限详情：${currentRoleName}`' width="600px">
     <el-tree :data="currentRoleMenuTree" node-key="id" :props="{ label: 'menuName', children: 'children' }"
-             show-checkbox check-strictly :expand-on-click-node="false"
-             :default-expanded-keys="currentRoleMenuTree.map(item => item.id)" :default-checked-keys="Rolecheckedkeys"/>
+      show-checkbox check-strictly :expand-on-click-node="false"
+      :default-expanded-keys="currentRoleMenuTree.map(item => item.id)" :default-checked-keys="Rolecheckedkeys" />
     <template #footer>
       <el-button @click="menuTreeVisible = false" type="primary">关闭</el-button>
     </template>
@@ -714,30 +712,29 @@ onMounted(async function () {
 
   <!-- 新增角色 -->
   <el-dialog v-model="permissionAddVisible" title="新增角色" width="800px" :close-on-click-modal="false"
-             @close="handleDialogClose">
+    @close="handleDialogClose">
     <template #footer>
       <el-form ref="Ref" :rules="Rolerules" :model="addRole" label-width="auto"
-               style="max-width: 600px; align-items: center">
+        style="max-width: 600px; align-items: center">
         <el-form-item prop="roleName" label="角色名称:" required>
-          <el-input v-model="addRole.roleName" placeholder="请输入角色名称" style="width: 220px"/>
+          <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>
+              :value="item.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item prop="market" label="归属地区:" required>
           <el-select v-model="addRole.market" placeholder="请选择归属地区" style="width: 220px" clearable>
-            <el-option v-for="item in addRoleMarket" :key="item" :label="item" :value="item"/>
+            <el-option v-for="item in addRoleMarket" :key="item" :label="item" :value="item" />
           </el-select>
           <text>(此地区无实际意义，仅用于各分部负责人查看其地区角色)</text>
         </el-form-item>
         <el-form-item prop="checkedKeys" label="权限列表:" required>
           <el-tree v-if="data.length > 0" :data="data" show-checkbox node-key="id"
-                   :props="{ label: 'menuName', children: 'children' }" :checked-keys="addRole.checkedKeys"
-                   :check-strictly="false" @check="handleCheckChange">
+            :props="{ label: 'menuName', children: 'children' }" :checked-keys="addRole.checkedKeys"
+            :check-strictly="false" @check="handleCheckChange">
             <template #default="{ node }">
               <span>{{ node.label }}</span>
             </template>
@@ -746,9 +743,9 @@ onMounted(async function () {
             <span style="color: #999;">暂无数据</span>
           </div>
         </el-form-item>
-        <el-form-item v-show="ifHasChannel"  label="频道名称:" required>
+        <el-form-item v-show="ifHasChannel" label="频道名称:" required>
           <el-select v-model="addRole.channel" placeholder="请选择频道" style="width: 220px" filterable clearable>
-            <el-option v-for="item in channelList" :key="item" :label="item" :value="item"/>
+            <el-option v-for="item in channelList" :key="item" :label="item" :value="item" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -766,25 +763,25 @@ onMounted(async function () {
   <el-dialog v-model="permissionEditRoleVisible" title="编辑角色" width="800px" :close-on-click-modal="false">
     <template #footer>
       <el-form ref="Ref" :rules="Rolerules" :model="permissionEditRoleObj" label-width="auto"
-               style="max-width: 600px; align-items: center">
+        style="max-width: 600px; align-items: center">
         <el-form-item prop="roleName" label="角色名称:" required>
-          <el-input v-model="permissionEditRoleObj.roleName" placeholder="请输入角色名称" style="width: 220px"/>
+          <el-input v-model="permissionEditRoleObj.roleName" placeholder="请输入角色名称" style="width: 220px" />
         </el-form-item>
         <el-form-item prop="parentName" label="上级角色:">
           <el-input v-model="permissionEditRoleObj.parentName" placeholder="无上级角色" disabled style="width: 220px">
             <el-option v-for="item in permissionList" :key="item.value" :label="item.label"
-                       :value="item.value"></el-option>
+              :value="item.value"></el-option>
           </el-input>
         </el-form-item>
         <el-form-item prop="market" label="归属地区" required>
-          <el-input v-model="permissionEditRoleObj.market" placeholder="请输入归属地区" style="width: 220px" disabled/>
+          <el-input v-model="permissionEditRoleObj.market" placeholder="请输入归属地区" style="width: 220px" disabled />
           <text>(此地区无实际意义，仅用于各分部负责人查看其地区角色)</text>
         </el-form-item>
         <el-form-item prop="checkedKeys" label="权限列表:" required>
           <el-tree v-if="data.length > 0" :data="data" show-checkbox node-key="id" ref="treeRef"
-                   :props="{ label: 'menuName', children: 'children' }"
-                   :default-checked-keys="permissionEditRoleObj.checkedKeys" :check-strictly="false"
-                   @check="handleEditRolePermissionCheck">
+            :props="{ label: 'menuName', children: 'children' }"
+            :default-checked-keys="permissionEditRoleObj.checkedKeys" :check-strictly="false"
+            @check="handleEditRolePermissionCheck">
             <!-- <template #default="{ node, data }"> data删掉了，不影响功能 -->
             <template #default="{ node }">
               <span>{{ node.label }}</span>
@@ -797,7 +794,7 @@ onMounted(async function () {
 
         <el-form-item v-show="ifHasChannel" label="频道名称:" required>
           <el-select v-model="permissionEditRoleObj.channel" placeholder="请选择频道" style="width: 220px" clearable>
-            <el-option v-for="item in channelList" :key="item" :label="item" :value="item"/>
+            <el-option v-for="item in channelList" :key="item" :label="item" :value="item" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -833,7 +830,7 @@ onMounted(async function () {
 :deep(.el-table__header-wrapper),
 :deep(.el-table__body-wrapper),
 :deep(.el-table__cell),
-  /* 表格 */
+/* 表格 */
 :deep(.el-table__body td) {
   background-color: #F3FAFE !important;
 }