优化工资管理页面UI样式，统一现代化设计风格

- 统一所有工资列表页面样式，采用灰色系渐变配色方案 - 优化页面头部、搜索区域、表格容器样式，添加渐变背景和阴影效果 - 修复表格固定列和多选框的z-index问题，确保多选框可正常点击 - 统一按钮样式，使用灰色渐变替代蓝色 - 添加图标hover动画效果（缩放和旋转） - 优化表格行hover效果，使用渐变背景和位移动画 - 统一字体大小、间距、圆角等设计元素涉及页面： - assistants.vue (店助工资) - director.vue (总监工资) - business-unit-managers.vue (事业部经理工资) - major-project-directors.vue (大项目总监工资) - major-project-teachers.vue (大项目老师工资) - cienceTeacher.vue (科学老师工资) - tech-general-managers.vue (技术总经理工资) - tech-stock.vue (技术库存) - shop.vue (门店工资) - shop-stock.vue (门店库存) - headquarters-stock.vue (总部库存) - healthCoach.vue (健康师工资)

优化工资管理页面UI样式，统一现代化设计风格
- 统一所有工资列表页面样式，采用灰色系渐变配色方案 - 优化页面头部、搜索区域、表格容器样式，添加渐变背景和阴影效果 - 修复表格固定列和多选框的z-index问题，确保多选框可正常点击 - 统一按钮样式，使用灰色渐变替代蓝色 - 添加图标hover动画效果（缩放和旋转） - 优化表格行hover效果，使用渐变背景和位移动画 - 统一字体大小、间距、圆角等设计元素涉及页面： - assistants.vue (店助工资) - director.vue (总监工资) - business-unit-managers.vue (事业部经理工资) - major-project-directors.vue (大项目总监工资) - major-project-teachers.vue (大项目老师工资) - cienceTeacher.vue (科学老师工资) - tech-general-managers.vue (技术总经理工资) - tech-stock.vue (技术库存) - shop.vue (门店工资) - shop-stock.vue (门店库存) - headquarters-stock.vue (总部库存) - healthCoach.vue (健康师工资)
“wangming”
1 parent c715e03d
Showing 12 changed files with 4608 additions and 799 deletions
antis-ncc-admin/src/views/wageManagement/assistants.vue
antis-ncc-admin/src/views/wageManagement/business-unit-managers.vue
antis-ncc-admin/src/views/wageManagement/cienceTeacher.vue
antis-ncc-admin/src/views/wageManagement/director.vue
antis-ncc-admin/src/views/wageManagement/headquarters-stock.vue
antis-ncc-admin/src/views/wageManagement/healthCoach.vue
antis-ncc-admin/src/views/wageManagement/major-project-directors.vue
antis-ncc-admin/src/views/wageManagement/major-project-teachers.vue
antis-ncc-admin/src/views/wageManagement/shop-stock.vue
antis-ncc-admin/src/views/wageManagement/shop.vue
antis-ncc-admin/src/views/wageManagement/tech-general-managers.vue
antis-ncc-admin/src/views/wageManagement/tech-stock.vue
@@ -7,36 +7,17 @@
         <p class="page-desc">管理店助工资数据，包括业绩、提成、阶段奖励、补贴、扣款等信息</p>
       </div>
       <div class="header-right">
-        <el-button 
-          type="warning" 
-          icon="el-icon-upload2"
-          @click="showImportDialog"
-          :loading="importLoading"
-        >
+        <el-button type="warning" icon="el-icon-upload2" @click="showImportDialog" :loading="importLoading">
           导入
         </el-button>
-        <el-button 
-          type="success" 
-          icon="el-icon-download"
-          @click="handleExport"
-          :loading="exportLoading"
-          :disabled="!list || list.length === 0"
-        >
+        <el-button type="success" icon="el-icon-download" @click="handleExport" :loading="exportLoading"
+          :disabled="!list || list.length === 0">
           导出
         </el-button>
-        <el-button 
-          type="primary" 
-          icon="el-icon-cpu"
-          @click="showCalculateDialog"
-          :loading="calculateLoading"
-        >
+        <el-button type="primary" icon="el-icon-cpu" @click="showCalculateDialog" :loading="calculateLoading">
           计算工资
         </el-button>
-        <el-button 
-          icon="el-icon-refresh" 
-          @click="getList"
-          :loading="loading"
-        >
+        <el-button icon="el-icon-refresh" @click="getList" :loading="loading">
           刷新
         </el-button>
       </div>
@@ -46,29 +27,12 @@
     <div class="search-container">
       <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="50px">
         <el-form-item label="月份" prop="month">
-          <el-date-picker
-            v-model="queryParams.month"
-            type="month"
-            placeholder="选择月份"
-            format="yyyyMM"
-            value-format="yyyyMM"
-            style="width: 200px"
-          />
+          <el-date-picker v-model="queryParams.month" type="month" placeholder="选择月份" format="yyyyMM"
+            value-format="yyyyMM" style="width: 200px" />
         </el-form-item>
         <el-form-item label="门店" prop="storeId">
-          <el-select 
-            v-model="queryParams.storeId" 
-            placeholder="请选择门店"
-            clearable
-            filterable
-            style="width: 200px"
-          >
-            <el-option
-              v-for="store in storeList"
-              :key="store.id"
-              :label="store.fullName"
-              :value="store.id"
-            />
+          <el-select v-model="queryParams.storeId" placeholder="请选择门店" clearable filterable style="width: 200px">
+            <el-option v-for="store in storeList" :key="store.id" :label="store.fullName" :value="store.id" />
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -79,30 +43,13 @@
       <!-- 批量操作区域 -->
       <div class="batch-action-container" v-if="selectedRows.length > 0">
         <span class="selected-count">已选择 {{ selectedRows.length }} 条记录</span>
-        <el-button 
-          type="warning" 
-          icon="el-icon-lock"
-          size="small"
-          @click="handleBatchLock"
-          :loading="lockLoading"
-        >
+        <el-button type="warning" icon="el-icon-lock" size="small" @click="handleBatchLock" :loading="lockLoading">
           批量锁定
         </el-button>
-        <el-button 
-          type="success" 
-          icon="el-icon-unlock"
-          size="small"
-          @click="handleBatchUnlock"
-          :loading="lockLoading"
-        >
+        <el-button type="success" icon="el-icon-unlock" size="small" @click="handleBatchUnlock" :loading="lockLoading">
           批量解锁
         </el-button>
-        <el-button 
-          type="info" 
-          icon="el-icon-close"
-          size="small"
-          @click="handleClearSelection"
-        >
+        <el-button type="info" icon="el-icon-close" size="small" @click="handleClearSelection">
           取消选择
         </el-button>
       </div>
@@ -110,16 +57,8 @@
     <!-- 数据表格 -->
     <div class="table-container">
-      <NCC-table 
-        ref="table"
-        v-loading="loading" 
-        :data="list" 
-        border 
-        stripe
-        height="calc(100vh - 420px)"
-        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
-        @selection-change="handleSelectionChange"
-      >
+      <NCC-table ref="table" v-loading="loading" :data="list" border stripe height="calc(100vh - 420px)"
+        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" @selection-change="handleSelectionChange">
         <!-- 多选列 -->
         <el-table-column type="selection" width="55" align="center" fixed="left" />
         <!-- 基本信息 -->
@@ -358,32 +297,15 @@
         <!-- 操作列 -->
         <el-table-column label="操作" width="250" align="center" fixed="right">
           <template slot-scope="scope">
-            <el-button
-              type="primary"
-              size="mini"
-              icon="el-icon-view"
-              @click="handleViewDetail(scope.row)"
-            >
+            <el-button type="primary" size="mini" icon="el-icon-view" @click="handleViewDetail(scope.row)">
               详情
             </el-button>
-            <el-button
-              v-if="scope.row.IsLocked === 1"
-              type="success"
-              size="mini"
-              icon="el-icon-unlock"
-              @click="handleUnlock(scope.row)"
-              :loading="lockLoading"
-            >
+            <el-button v-if="scope.row.IsLocked === 1" type="success" size="mini" icon="el-icon-unlock"
+              @click="handleUnlock(scope.row)" :loading="lockLoading">
               解锁
             </el-button>
-            <el-button
-              v-else
-              type="warning"
-              size="mini"
-              icon="el-icon-lock"
-              @click="handleLock(scope.row)"
-              :loading="lockLoading"
-            >
+            <el-button v-else type="warning" size="mini" icon="el-icon-lock" @click="handleLock(scope.row)"
+              :loading="lockLoading">
               锁定
             </el-button>
           </template>
@@ -392,74 +314,38 @@
     </div>
     <!-- 计算工资弹窗 -->
-    <el-dialog
-      title="计算店助工资"
-      :visible="calculateDialogVisible"
-      width="500px"
-      :close-on-click-modal="false"
-      @close="handleCalculateDialogClose"
-    >
+    <el-dialog title="计算店助工资" :visible="calculateDialogVisible" width="500px" :close-on-click-modal="false"
+      @close="handleCalculateDialogClose">
       <el-form label-width="100px" label-position="right">
         <el-form-item label="选择月份" required>
-          <el-date-picker
-            v-model="calculateMonth"
-            type="month"
-            placeholder="请选择月份"
-            format="yyyyMM"
-            value-format="yyyyMM"
-            style="width: 100%"
-          />
+          <el-date-picker v-model="calculateMonth" type="month" placeholder="请选择月份" format="yyyyMM"
+            value-format="yyyyMM" style="width: 100%" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="handleCalculateDialogClose">取消</el-button>
-        <el-button 
-          type="primary" 
-          @click="handleCalculateConfirm"
-          :loading="calculateLoading"
-        >
+        <el-button type="primary" @click="handleCalculateConfirm" :loading="calculateLoading">
           确定
         </el-button>
       </div>
     </el-dialog>
     <!-- 详情弹窗 -->
-    <assistant-detail-dialog
-      :visible.sync="detailDialogVisible"
-      :detail-data="currentDetailData"
-      @close="handleDetailDialogClose"
-    />
+    <assistant-detail-dialog :visible.sync="detailDialogVisible" :detail-data="currentDetailData"
+      @close="handleDetailDialogClose" />
     <!-- 导入弹窗 -->
-    <el-dialog
-      title="导入店助工资数据"
-      :visible="importDialogVisible"
-      width="500px"
-      :close-on-click-modal="false"
-      @close="handleImportDialogClose"
-    >
-      <el-upload
-        ref="upload"
-        action=""
-        :auto-upload="false"
-        :on-change="handleFileChange"
-        :file-list="fileList"
-        :limit="1"
-        accept=".xlsx,.xls"
-        drag
-      >
+    <el-dialog title="导入店助工资数据" :visible="importDialogVisible" width="500px" :close-on-click-modal="false"
+      @close="handleImportDialogClose">
+      <el-upload ref="upload" action="" :auto-upload="false" :on-change="handleFileChange" :file-list="fileList"
+        :limit="1" accept=".xlsx,.xls" drag>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">只能上传.xlsx/.xls文件，且不超过10MB</div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
         <el-button @click="handleImportDialogClose">取消</el-button>
-        <el-button 
-          type="primary" 
-          @click="handleImportConfirm"
-          :loading="importLoading"
-          :disabled="!importFile"
-        >
+        <el-button type="primary" @click="handleImportConfirm" :loading="importLoading" :disabled="!importFile">
           确定
         </el-button>
       </div>
@@ -538,7 +424,7 @@ export default {
         // 处理年月：从month选择器中提取年份和月份
         let year = ''
         let month = ''
-        
+
         if (this.queryParams.month && this.queryParams.month.length === 6) {
           // yyyyMM 格式，如 202512
           year = this.queryParams.month.substring(0, 4)
@@ -546,8 +432,8 @@ export default {
         } else if (this.queryParams.year && this.queryParams.month) {
           // 分别选择年份和月份
           year = this.queryParams.year
-          month = this.queryParams.month.length === 6 
-            ? this.queryParams.month.substring(4, 6) 
+          month = this.queryParams.month.length === 6
+            ? this.queryParams.month.substring(4, 6)
             : this.queryParams.month
         } else {
           // 使用默认值（当前年月）
@@ -576,7 +462,7 @@ export default {
         }
       } catch (error) {
         console.error('获取店助工资列表失败:', error)
-        this.$message.error('获取数据失败'+error)
+        this.$message.error('获取数据失败' + error)
       } finally {
         this.loading = false
       }
@@ -801,11 +687,11 @@ export default {
         // 生成文件名
         const now = new Date()
-        const timestamp = now.getFullYear() + 
-          String(now.getMonth() + 1).padStart(2, '0') + 
-          String(now.getDate()).padStart(2, '0') + 
-          String(now.getHours()).padStart(2, '0') + 
-          String(now.getMinutes()).padStart(2, '0') + 
+        const timestamp = now.getFullYear() +
+          String(now.getMonth() + 1).padStart(2, '0') +
+          String(now.getDate()).padStart(2, '0') +
+          String(now.getHours()).padStart(2, '0') +
+          String(now.getMinutes()).padStart(2, '0') +
           String(now.getSeconds()).padStart(2, '0')
         const fileName = `店助工资_${timestamp}.xlsx`
@@ -1045,26 +931,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -1076,40 +981,168 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .batch-action-container {
-  margin-top: 15px;
-  padding: 12px;
-  background: #f0f9ff;
-  border-radius: 4px;
+  margin-top: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(144, 147, 153, 0.3);
   display: flex;
   align-items: center;
   gap: 12px;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.1);
   .selected-count {
-    color: #409EFF;
-    font-weight: 500;
+    color: #606266;
+    font-weight: 600;
     margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .el-button {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .store-name,
@@ -1120,28 +1153,276 @@ export default {
   .store-icon,
   .employee-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .store-icon,
+  &:hover .employee-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
+  // 确保多选框列可以点击 - 全局设置，最高优先级
+  .el-table__column--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+  }
+
+  .el-checkbox {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .el-checkbox__input {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  .el-checkbox__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  td.el-table__cell--selection,
+  th.el-table__cell--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+    background-color: #ffffff !important;
+    cursor: pointer;
+
+    .cell {
+      pointer-events: auto !important;
+      z-index: 1001 !important;
+      position: relative;
+    }
+  }
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
+      }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  // 固定列样式修复
+  .el-table__fixed,
+  .el-table__fixed-right {
+    z-index: 5 !important;
+    background-color: #ffffff;
+    height: 100% !important;
+
+    // 确保多选框可以点击 - 选择列需要最高的z-index
+    .el-table__column--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+    }
+
+    // 确保选择列单元格可以点击
+    td.el-table__cell--selection,
+    th.el-table__cell--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+      background-color: #ffffff !important;
+      cursor: pointer;
+
+      .cell {
+        pointer-events: auto !important;
+        z-index: 1001 !important;
+        position: relative;
+      }
+    }
+
+    // 确保多选框本身可以点击
+    .el-checkbox {
+      z-index: 1001 !important;
+      position: relative;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__input {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__inner {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    &::before {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      z-index: 4 !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    }
+
+    .el-table__fixed-header-wrapper {
+      height: auto !important;
+      background-color: #ffffff;
+
+      th {
+        background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+        z-index: 6 !important;
+        padding: 14px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列header需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .el-table__fixed-body-wrapper {
+      background-color: #ffffff;
+      height: auto !important;
+      max-height: 100% !important;
+      overflow-y: auto !important;
+
+      td {
+        background-color: #ffffff !important;
+        z-index: 6 !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列cell需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+
+      .el-table__row {
+        height: auto !important;
+
+        &.el-table__row--striped {
+          td {
+            background-color: #fafafa !important;
+          }
+        }
+      }
+    }
+
+    th {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+      z-index: 6 !important;
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列header需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    td {
+      background-color: #ffffff !important;
+      z-index: 6 !important;
+      padding: 12px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列cell需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
       }
     }
   }
+
+  // 固定列补丁
+  .el-table__fixed-right-patch {
+    background-color: #ffffff;
+    z-index: 4 !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
+
+  // 确保固定列和主表格的header高度一致
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th,
+  .el-table__fixed-right-header-wrapper th {
+    padding: 14px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+
+  // 确保固定列和主表格的body行高一致
+  .el-table__body-wrapper td,
+  .el-table__fixed-body-wrapper td,
+  .el-table__fixed-right-body-wrapper td {
+    padding: 12px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
 }
 </style>
-
@@ -7,36 +7,17 @@
         <p class="page-desc">管理事业部总经理/经理工资数据，包括提成、补贴、扣款等信息</p>
       </div>
       <div class="header-right">
-        <el-button 
-          type="warning" 
-          icon="el-icon-upload2"
-          @click="showImportDialog"
-          :loading="importLoading"
-        >
+        <el-button type="warning" icon="el-icon-upload2" @click="showImportDialog" :loading="importLoading">
           导入
         </el-button>
-        <el-button 
-          type="success" 
-          icon="el-icon-download"
-          @click="handleExport"
-          :loading="exportLoading"
-          :disabled="!list || list.length === 0"
-        >
+        <el-button type="success" icon="el-icon-download" @click="handleExport" :loading="exportLoading"
+          :disabled="!list || list.length === 0">
           导出
         </el-button>
-        <el-button 
-          type="primary" 
-          icon="el-icon-cpu"
-          @click="showCalculateDialog"
-          :loading="calculateLoading"
-        >
+        <el-button type="primary" icon="el-icon-cpu" @click="showCalculateDialog" :loading="calculateLoading">
           计算工资
         </el-button>
-        <el-button 
-          icon="el-icon-refresh" 
-          @click="getList"
-          :loading="loading"
-        >
+        <el-button icon="el-icon-refresh" @click="getList" :loading="loading">
           刷新
         </el-button>
       </div>
@@ -46,22 +27,11 @@
     <div class="search-container">
       <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="50px">
         <el-form-item label="月份" prop="month">
-          <el-date-picker
-            v-model="queryParams.month"
-            type="month"
-            placeholder="选择月份"
-            format="yyyyMM"
-            value-format="yyyyMM"
-            style="width: 200px"
-          />
+          <el-date-picker v-model="queryParams.month" type="month" placeholder="选择月份" format="yyyyMM"
+            value-format="yyyyMM" style="width: 200px" />
         </el-form-item>
         <el-form-item label="类型" prop="managerType">
-          <el-select 
-            v-model="queryParams.managerType" 
-            placeholder="请选择类型"
-            clearable
-            style="width: 200px"
-          >
+          <el-select v-model="queryParams.managerType" placeholder="请选择类型" clearable style="width: 200px">
             <el-option label="全部" :value="null" />
             <el-option label="经理" :value="0" />
             <el-option label="总经理" :value="1" />
@@ -83,30 +53,13 @@
       <!-- 批量操作区域 -->
       <div class="batch-action-container" v-if="selectedRows.length > 0">
         <span class="selected-count">已选择 {{ selectedRows.length }} 条记录</span>
-        <el-button 
-          type="warning" 
-          icon="el-icon-lock"
-          size="small"
-          @click="handleBatchLock"
-          :loading="lockLoading"
-        >
+        <el-button type="warning" icon="el-icon-lock" size="small" @click="handleBatchLock" :loading="lockLoading">
           批量锁定
         </el-button>
-        <el-button 
-          type="success" 
-          icon="el-icon-unlock"
-          size="small"
-          @click="handleBatchUnlock"
-          :loading="lockLoading"
-        >
+        <el-button type="success" icon="el-icon-unlock" size="small" @click="handleBatchUnlock" :loading="lockLoading">
           批量解锁
         </el-button>
-        <el-button 
-          type="info" 
-          icon="el-icon-close"
-          size="small"
-          @click="handleClearSelection"
-        >
+        <el-button type="info" icon="el-icon-close" size="small" @click="handleClearSelection">
           取消选择
         </el-button>
       </div>
@@ -114,16 +67,8 @@
     <!-- 数据表格 -->
     <div class="table-container">
-      <NCC-table 
-        ref="table"
-        v-loading="loading" 
-        :data="list" 
-        border 
-        stripe
-        height="calc(100vh - 420px)"
-        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
-        @selection-change="handleSelectionChange"
-      >
+      <NCC-table ref="table" v-loading="loading" :data="list" border stripe height="calc(100vh - 420px)"
+        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" @selection-change="handleSelectionChange">
         <!-- 多选列 -->
         <el-table-column type="selection" width="55" align="center" fixed="left" />
         <!-- 基本信息 -->
@@ -329,41 +274,19 @@
         <!-- 操作列 -->
         <el-table-column label="操作" width="350" align="center" fixed="right">
           <template slot-scope="scope">
-            <el-button
-              type="primary"
-              size="mini"
-              icon="el-icon-view"
-              @click="handleViewDetail(scope.row)"
-            >
+            <el-button type="primary" size="mini" icon="el-icon-view" @click="handleViewDetail(scope.row)">
               详情
             </el-button>
-            <el-button
-              type="info"
-              size="mini"
-              icon="el-icon-document"
-              @click="showStorePerformanceDetail(scope.row)"
-              v-if="scope.row.StorePerformanceDetail"
-            >
+            <el-button type="info" size="mini" icon="el-icon-document" @click="showStorePerformanceDetail(scope.row)"
+              v-if="scope.row.StorePerformanceDetail">
               门店明细
             </el-button>
-            <el-button
-              v-if="scope.row.IsLocked === 1"
-              type="success"
-              size="mini"
-              icon="el-icon-unlock"
-              @click="handleUnlock(scope.row)"
-              :loading="lockLoading"
-            >
+            <el-button v-if="scope.row.IsLocked === 1" type="success" size="mini" icon="el-icon-unlock"
+              @click="handleUnlock(scope.row)" :loading="lockLoading">
               解锁
             </el-button>
-            <el-button
-              v-else
-              type="warning"
-              size="mini"
-              icon="el-icon-lock"
-              @click="handleLock(scope.row)"
-              :loading="lockLoading"
-            >
+            <el-button v-else type="warning" size="mini" icon="el-icon-lock" @click="handleLock(scope.row)"
+              :loading="lockLoading">
               锁定
             </el-button>
           </template>
@@ -372,51 +295,29 @@
     </div>
     <!-- 计算工资弹窗 -->
-    <el-dialog
-      title="计算事业部总经理/经理工资"
-      :visible="calculateDialogVisible"
-      width="500px"
-      :close-on-click-modal="false"
-      @close="handleCalculateDialogClose"
-    >
+    <el-dialog title="计算事业部总经理/经理工资" :visible="calculateDialogVisible" width="500px" :close-on-click-modal="false"
+      @close="handleCalculateDialogClose">
       <el-form label-width="100px" label-position="right">
         <el-form-item label="选择月份" required>
-          <el-date-picker
-            v-model="calculateMonth"
-            type="month"
-            placeholder="请选择月份"
-            format="yyyyMM"
-            value-format="yyyyMM"
-            style="width: 100%"
-          />
+          <el-date-picker v-model="calculateMonth" type="month" placeholder="请选择月份" format="yyyyMM"
+            value-format="yyyyMM" style="width: 100%" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="handleCalculateDialogClose">取消</el-button>
-        <el-button 
-          type="primary" 
-          @click="handleCalculateConfirm"
-          :loading="calculateLoading"
-        >
+        <el-button type="primary" @click="handleCalculateConfirm" :loading="calculateLoading">
           确定
         </el-button>
       </div>
     </el-dialog>
     <!-- 详情弹窗 -->
-    <business-unit-manager-detail-dialog
-      :visible.sync="detailDialogVisible"
-      :detail-data="currentDetailData"
-      @close="handleDetailDialogClose"
-    />
+    <business-unit-manager-detail-dialog :visible.sync="detailDialogVisible" :detail-data="currentDetailData"
+      @close="handleDetailDialogClose" />
     <!-- 门店业绩明细弹窗 -->
-    <el-dialog
-      title="门店业绩明细"
-      :visible="storePerformanceDetailVisible"
-      width="1200px"
-      @close="handleStorePerformanceDetailClose"
-    >
+    <el-dialog title="门店业绩明细" :visible="storePerformanceDetailVisible" width="1200px"
+      @close="handleStorePerformanceDetailClose">
       <el-table :data="storePerformanceDetailList" border stripe max-height="500">
         <el-table-column prop="StoreName" label="门店名称" width="150" align="center" fixed="left" />
         <el-table-column prop="StoreLifeline" label="门店生命线" width="120" align="center">
@@ -463,35 +364,17 @@
     </el-dialog>
     <!-- 导入弹窗 -->
-    <el-dialog
-      title="导入事业部总经理/经理工资数据"
-      :visible="importDialogVisible"
-      width="500px"
-      :close-on-click-modal="false"
-      @close="handleImportDialogClose"
-    >
-      <el-upload
-        ref="upload"
-        action=""
-        :auto-upload="false"
-        :on-change="handleFileChange"
-        :file-list="fileList"
-        :limit="1"
-        accept=".xlsx,.xls"
-        drag
-      >
+    <el-dialog title="导入事业部总经理/经理工资数据" :visible="importDialogVisible" width="500px" :close-on-click-modal="false"
+      @close="handleImportDialogClose">
+      <el-upload ref="upload" action="" :auto-upload="false" :on-change="handleFileChange" :file-list="fileList"
+        :limit="1" accept=".xlsx,.xls" drag>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">只能上传.xlsx/.xls文件，且不超过10MB</div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
         <el-button @click="handleImportDialogClose">取消</el-button>
-        <el-button 
-          type="primary" 
-          @click="handleImportConfirm"
-          :loading="importLoading"
-          :disabled="!importFile"
-        >
+        <el-button type="primary" @click="handleImportConfirm" :loading="importLoading" :disabled="!importFile">
           确定
         </el-button>
       </div>
@@ -559,7 +442,7 @@ export default {
         // 处理年月：从month选择器中提取年份和月份
         let year = ''
         let month = ''
-        
+
         if (this.queryParams.month && this.queryParams.month.length === 6) {
           // yyyyMM 格式，如 202512
           year = this.queryParams.month.substring(0, 4)
@@ -567,8 +450,8 @@ export default {
         } else if (this.queryParams.year && this.queryParams.month) {
           // 分别选择年份和月份
           year = this.queryParams.year
-          month = this.queryParams.month.length === 6 
-            ? this.queryParams.month.substring(4, 6) 
+          month = this.queryParams.month.length === 6
+            ? this.queryParams.month.substring(4, 6)
             : this.queryParams.month
         } else {
           // 使用默认值（当前年月）
@@ -1056,11 +939,11 @@ export default {
         // 生成文件名
         const now = new Date()
-        const timestamp = now.getFullYear() + 
-          String(now.getMonth() + 1).padStart(2, '0') + 
-          String(now.getDate()).padStart(2, '0') + 
-          String(now.getHours()).padStart(2, '0') + 
-          String(now.getMinutes()).padStart(2, '0') + 
+        const timestamp = now.getFullYear() +
+          String(now.getMonth() + 1).padStart(2, '0') +
+          String(now.getDate()).padStart(2, '0') +
+          String(now.getHours()).padStart(2, '0') +
+          String(now.getMinutes()).padStart(2, '0') +
           String(now.getSeconds()).padStart(2, '0')
         const fileName = `事业部总经理经理工资_${timestamp}.xlsx`
@@ -1081,26 +964,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -1112,40 +1014,168 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .batch-action-container {
-  margin-top: 15px;
-  padding: 12px;
-  background: #f0f9ff;
-  border-radius: 4px;
+  margin-top: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(144, 147, 153, 0.3);
   display: flex;
   align-items: center;
   gap: 12px;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.1);
   .selected-count {
-    color: #409EFF;
-    font-weight: 500;
+    color: #606266;
+    font-weight: 600;
     margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .el-button {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .employee-name {
@@ -1154,28 +1184,275 @@ export default {
   gap: 6px;
   .employee-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .employee-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
+  // 确保多选框列可以点击 - 全局设置，最高优先级
+  .el-table__column--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+  }
+
+  .el-checkbox {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .el-checkbox__input {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  .el-checkbox__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  td.el-table__cell--selection,
+  th.el-table__cell--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+    background-color: #ffffff !important;
+    cursor: pointer;
+
+    .cell {
+      pointer-events: auto !important;
+      z-index: 1001 !important;
+      position: relative;
+    }
+  }
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
+      }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  // 固定列样式修复
+  .el-table__fixed,
+  .el-table__fixed-right {
+    z-index: 5 !important;
+    background-color: #ffffff;
+    height: 100% !important;
+
+    // 确保多选框可以点击 - 选择列需要最高的z-index
+    .el-table__column--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+    }
+
+    // 确保选择列单元格可以点击
+    td.el-table__cell--selection,
+    th.el-table__cell--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+      background-color: #ffffff !important;
+      cursor: pointer;
+
+      .cell {
+        pointer-events: auto !important;
+        z-index: 1001 !important;
+        position: relative;
+      }
+    }
+
+    // 确保多选框本身可以点击
+    .el-checkbox {
+      z-index: 1001 !important;
+      position: relative;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__input {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__inner {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    &::before {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      z-index: 4 !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    }
+
+    .el-table__fixed-header-wrapper {
+      height: auto !important;
+      background-color: #ffffff;
+
+      th {
+        background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+        z-index: 6 !important;
+        padding: 14px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列header需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .el-table__fixed-body-wrapper {
+      background-color: #ffffff;
+      height: auto !important;
+      max-height: 100% !important;
+      overflow-y: auto !important;
+
+      td {
+        background-color: #ffffff !important;
+        z-index: 6 !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列cell需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+
+      .el-table__row {
+        height: auto !important;
+
+        &.el-table__row--striped {
+          td {
+            background-color: #fafafa !important;
+          }
+        }
+      }
+    }
+
+    th {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+      z-index: 6 !important;
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列header需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    td {
+      background-color: #ffffff !important;
+      z-index: 6 !important;
+      padding: 12px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列cell需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
       }
     }
   }
+
+  // 固定列补丁
+  .el-table__fixed-right-patch {
+    background-color: #ffffff;
+    z-index: 4 !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
+
+  // 确保固定列和主表格的header高度一致
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th,
+  .el-table__fixed-right-header-wrapper th {
+    padding: 14px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+
+  // 确保固定列和主表格的body行高一致
+  .el-table__body-wrapper td,
+  .el-table__fixed-body-wrapper td,
+  .el-table__fixed-right-body-wrapper td {
+    padding: 12px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
 }
 </style>
-
@@ -1164,26 +1164,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -1195,40 +1214,168 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .batch-action-container {
-  margin-top: 15px;
-  padding: 12px;
-  background: #f0f9ff;
-  border-radius: 4px;
+  margin-top: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(144, 147, 153, 0.3);
   display: flex;
   align-items: center;
   gap: 12px;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.1);
   .selected-count {
-    color: #409EFF;
-    font-weight: 500;
+    color: #606266;
+    font-weight: 600;
     margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .el-button {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .store-name,
@@ -1239,27 +1386,276 @@ export default {
   .store-icon,
   .employee-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .store-icon,
+  &:hover .employee-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
+  // 确保多选框列可以点击 - 全局设置，最高优先级
+  .el-table__column--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+  }
+
+  .el-checkbox {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .el-checkbox__input {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  .el-checkbox__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  td.el-table__cell--selection,
+  th.el-table__cell--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+    background-color: #ffffff !important;
+    cursor: pointer;
+
+    .cell {
+      pointer-events: auto !important;
+      z-index: 1001 !important;
+      position: relative;
+    }
+  }
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
       }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  // 固定列样式修复
+  .el-table__fixed,
+  .el-table__fixed-right {
+    z-index: 5 !important;
+    background-color: #ffffff;
+    height: 100% !important;
+
+    // 确保多选框可以点击 - 选择列需要最高的z-index
+    .el-table__column--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+    }
+
+    // 确保选择列单元格可以点击
+    td.el-table__cell--selection,
+    th.el-table__cell--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+      background-color: #ffffff !important;
+      cursor: pointer;
+
+      .cell {
+        pointer-events: auto !important;
+        z-index: 1001 !important;
+        position: relative;
+      }
+    }
+
+    // 确保多选框本身可以点击
+    .el-checkbox {
+      z-index: 1001 !important;
+      position: relative;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__input {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
     }
+
+    .el-checkbox__inner {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    &::before {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      z-index: 4 !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    }
+
+    .el-table__fixed-header-wrapper {
+      height: auto !important;
+      background-color: #ffffff;
+
+      th {
+        background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+        z-index: 6 !important;
+        padding: 14px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列header需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .el-table__fixed-body-wrapper {
+      background-color: #ffffff;
+      height: auto !important;
+      max-height: 100% !important;
+      overflow-y: auto !important;
+
+      td {
+        background-color: #ffffff !important;
+        z-index: 6 !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列cell需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+
+      .el-table__row {
+        height: auto !important;
+
+        &.el-table__row--striped {
+          td {
+            background-color: #fafafa !important;
+          }
+        }
+      }
+    }
+
+    th {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+      z-index: 6 !important;
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列header需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    td {
+      background-color: #ffffff !important;
+      z-index: 6 !important;
+      padding: 12px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列cell需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+  }
+
+  // 固定列补丁
+  .el-table__fixed-right-patch {
+    background-color: #ffffff;
+    z-index: 4 !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
+
+  // 确保固定列和主表格的header高度一致
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th,
+  .el-table__fixed-right-header-wrapper th {
+    padding: 14px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+
+  // 确保固定列和主表格的body行高一致
+  .el-table__body-wrapper td,
+  .el-table__fixed-body-wrapper td,
+  .el-table__fixed-right-body-wrapper td {
+    padding: 12px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
   }
 }
 </style>
@@ -1010,26 +1010,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -1041,40 +1060,168 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .batch-action-container {
-  margin-top: 15px;
-  padding: 12px;
-  background: #f0f9ff;
-  border-radius: 4px;
+  margin-top: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(144, 147, 153, 0.3);
   display: flex;
   align-items: center;
   gap: 12px;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.1);
   .selected-count {
-    color: #409EFF;
-    font-weight: 500;
+    color: #606266;
+    font-weight: 600;
     margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .el-button {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .store-name,
@@ -1085,27 +1232,276 @@ export default {
   .store-icon,
   .employee-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .store-icon,
+  &:hover .employee-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
+  // 确保多选框列可以点击 - 全局设置，最高优先级
+  .el-table__column--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+  }
+
+  .el-checkbox {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .el-checkbox__input {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  .el-checkbox__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  td.el-table__cell--selection,
+  th.el-table__cell--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+    background-color: #ffffff !important;
+    cursor: pointer;
+
+    .cell {
+      pointer-events: auto !important;
+      z-index: 1001 !important;
+      position: relative;
+    }
+  }
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
       }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  // 固定列样式修复
+  .el-table__fixed,
+  .el-table__fixed-right {
+    z-index: 5 !important;
+    background-color: #ffffff;
+    height: 100% !important;
+
+    // 确保多选框可以点击 - 选择列需要最高的z-index
+    .el-table__column--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+    }
+
+    // 确保选择列单元格可以点击
+    td.el-table__cell--selection,
+    th.el-table__cell--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+      background-color: #ffffff !important;
+      cursor: pointer;
+
+      .cell {
+        pointer-events: auto !important;
+        z-index: 1001 !important;
+        position: relative;
+      }
+    }
+
+    // 确保多选框本身可以点击
+    .el-checkbox {
+      z-index: 1001 !important;
+      position: relative;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__input {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
     }
+
+    .el-checkbox__inner {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    &::before {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      z-index: 4 !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    }
+
+    .el-table__fixed-header-wrapper {
+      height: auto !important;
+      background-color: #ffffff;
+
+      th {
+        background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+        z-index: 6 !important;
+        padding: 14px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列header需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .el-table__fixed-body-wrapper {
+      background-color: #ffffff;
+      height: auto !important;
+      max-height: 100% !important;
+      overflow-y: auto !important;
+
+      td {
+        background-color: #ffffff !important;
+        z-index: 6 !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列cell需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+
+      .el-table__row {
+        height: auto !important;
+
+        &.el-table__row--striped {
+          td {
+            background-color: #fafafa !important;
+          }
+        }
+      }
+    }
+
+    th {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+      z-index: 6 !important;
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列header需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    td {
+      background-color: #ffffff !important;
+      z-index: 6 !important;
+      padding: 12px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列cell需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+  }
+
+  // 固定列补丁
+  .el-table__fixed-right-patch {
+    background-color: #ffffff;
+    z-index: 4 !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
+
+  // 确保固定列和主表格的header高度一致
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th,
+  .el-table__fixed-right-header-wrapper th {
+    padding: 14px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+
+  // 确保固定列和主表格的body行高一致
+  .el-table__body-wrapper td,
+  .el-table__fixed-body-wrapper td,
+  .el-table__fixed-right-body-wrapper td {
+    padding: 12px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
   }
 }
 </style>
@@ -416,26 +416,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -447,24 +466,137 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .month-name {
@@ -473,13 +605,18 @@ export default {
   gap: 6px;
   .month-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .month-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 .highlight {
-  color: #409EFF;
+  color: #606266;
   font-weight: 600;
 }
@@ -489,20 +626,60 @@ export default {
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
+      }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
       }
     }
   }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
 }
 </style>
@@ -1359,26 +1359,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -1390,40 +1409,169 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #66b1ff 0%, #409EFF 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .batch-action-container {
-  margin-top: 15px;
-  padding: 12px;
-  background: #f0f9ff;
-  border-radius: 4px;
+  margin-top: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(144, 147, 153, 0.3);
   display: flex;
   align-items: center;
   gap: 12px;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.1);
   .selected-count {
-    color: #409EFF;
-    font-weight: 500;
+    color: #606266;
+    font-weight: 600;
     margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .el-button {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  // 确保表格容器内的内容不透明
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .store-name,
@@ -1434,28 +1582,346 @@ export default {
   .store-icon,
   .employee-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .store-icon,
+  &:hover .employee-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
+  // 确保多选框列可以点击 - 全局设置，最高优先级
+  .el-table__column--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+  }
+
+  .el-checkbox {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .el-checkbox__input {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  .el-checkbox__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  td.el-table__cell--selection,
+  th.el-table__cell--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+    background-color: #ffffff !important;
+    cursor: pointer;
+
+    .cell {
+      pointer-events: auto !important;
+      z-index: 1001 !important;
+      position: relative;
+    }
+  }
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
+      &:hover {
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
+      }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  // 固定列样式修复
+  .el-table__fixed,
+  .el-table__fixed-right {
+    z-index: 5 !important;
+    background-color: #ffffff;
+    height: 100% !important;
+
+    // 确保多选框可以点击 - 选择列需要最高的z-index
+    .el-table__column--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+    }
+
+    // 确保选择列单元格可以点击
+    td.el-table__cell--selection,
+    th.el-table__cell--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+      background-color: #ffffff !important;
+      cursor: pointer;
+
+      .cell {
+        pointer-events: auto !important;
+        z-index: 1001 !important;
+        position: relative;
+      }
+    }
+
+    // 确保多选框本身可以点击
+    .el-checkbox {
+      z-index: 1001 !important;
+      position: relative;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__input {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__inner {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    &::before {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      z-index: 4 !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    }
+
+    .el-table__fixed-header-wrapper {
+      height: auto !important;
+      background-color: #ffffff;
+
+      th {
+        background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+        z-index: 6 !important;
+        padding: 14px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列header需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .el-table__fixed-body-wrapper {
+      background-color: #ffffff;
+      height: auto !important;
+      max-height: 100% !important;
+      overflow-y: auto !important;
+
+      td {
+        background-color: #ffffff !important;
+        z-index: 10;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+      }
+
+      .el-table__row {
+        height: auto !important;
+
+        &.el-table__row--striped {
+          td {
+            background-color: #fafafa !important;
+          }
+        }
+      }
+    }
+
+    th {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+      z-index: 6 !important;
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列header需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    td {
+      background-color: #ffffff !important;
+      z-index: 6 !important;
+      padding: 12px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+          // 选择列cell需要最高z-index
+          &.el-table__cell--selection {
+            z-index: 1000 !important;
+            pointer-events: auto !important;
+          }
+    }
+  }
+
+  // 固定列补丁
+  .el-table__fixed-right-patch {
+    background-color: #ffffff;
+    z-index: 4 !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
+
+  // 确保固定列和主表格的header高度一致
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th,
+  .el-table__fixed-right-header-wrapper th {
+    padding: 14px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+
+  // 确保固定列和主表格的body行高一致
+  .el-table__body-wrapper td,
+  .el-table__fixed-body-wrapper td,
+  .el-table__fixed-right-body-wrapper td {
+    padding: 12px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+}
+
+// 操作按钮样式
+::v-deep .el-table {
+  .el-button {
+    border-radius: 6px;
+    padding: 6px 14px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    }
+
+    &.el-button--primary {
+      background: linear-gradient(135deg, #606266 0%, #909399 100%);
+      border: none;
+
+      &:hover {
+        background: linear-gradient(135deg, #909399 0%, #606266 100%);
+      }
+    }
+
+    &.el-button--success {
+      background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+      border: none;
+
+      &:hover {
+        background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+      }
+    }
+
+    &.el-button--warning {
+      background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+      border: none;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
       }
     }
   }
 }
+
+// 标签样式
+::v-deep .el-tag {
+  border-radius: 6px;
+  font-weight: 500;
+  padding: 4px 10px;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+// 滚动条美化
+::v-deep .el-table__body-wrapper {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(240, 242, 245, 0.5);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #c0c4cc 0%, #909399 100%);
+    border-radius: 4px;
+    transition: background 0.3s;
+
+    &:hover {
+      background: linear-gradient(135deg, #909399 0%, #606266 100%);
+    }
+  }
+}
 </style>
@@ -7,35 +7,16 @@
         <p class="page-desc">管理大项目主管工资数据，包括业绩、提成、补贴、扣款等信息</p>
       </div>
       <div class="header-right">
-        <el-button 
-          type="warning" 
-          icon="el-icon-upload2"
-          @click="showImportDialog"
-          :loading="importLoading"
-        >
+        <el-button type="warning" icon="el-icon-upload2" @click="showImportDialog" :loading="importLoading">
           导入
         </el-button>
-        <el-button 
-          type="success" 
-          icon="el-icon-download"
-          @click="handleExport"
-          :loading="exportLoading"
-        >
+        <el-button type="success" icon="el-icon-download" @click="handleExport" :loading="exportLoading">
           导出
         </el-button>
-        <el-button 
-          type="primary" 
-          icon="el-icon-cpu"
-          @click="showCalculateDialog"
-          :loading="calculateLoading"
-        >
+        <el-button type="primary" icon="el-icon-cpu" @click="showCalculateDialog" :loading="calculateLoading">
           计算工资
         </el-button>
-        <el-button 
-          icon="el-icon-refresh" 
-          @click="getList"
-          :loading="loading"
-        >
+        <el-button icon="el-icon-refresh" @click="getList" :loading="loading">
           刷新
         </el-button>
       </div>
@@ -45,23 +26,11 @@
     <div class="search-container">
       <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="50px">
         <el-form-item label="月份" prop="month">
-          <el-date-picker
-            v-model="queryParams.month"
-            type="month"
-            placeholder="选择月份"
-            format="yyyyMM"
-            value-format="yyyyMM"
-            style="width: 200px"
-          />
+          <el-date-picker v-model="queryParams.month" type="month" placeholder="选择月份" format="yyyyMM"
+            value-format="yyyyMM" style="width: 200px" />
         </el-form-item>
         <el-form-item label="岗位" prop="position">
-          <el-select 
-            v-model="queryParams.position" 
-            placeholder="请选择岗位"
-            clearable
-            filterable
-            style="width: 200px"
-          >
+          <el-select v-model="queryParams.position" placeholder="请选择岗位" clearable filterable style="width: 200px">
             <el-option label="全部" :value="''" />
             <el-option label="大项目一部" value="大项目一部" />
             <el-option label="大项目二部" value="大项目二部" />
@@ -83,30 +52,13 @@
       <!-- 批量操作区域 -->
       <div class="batch-action-container" v-if="selectedRows.length > 0">
         <span class="selected-count">已选择 {{ selectedRows.length }} 条记录</span>
-        <el-button 
-          type="warning" 
-          icon="el-icon-lock"
-          size="small"
-          @click="handleBatchLock"
-          :loading="lockLoading"
-        >
+        <el-button type="warning" icon="el-icon-lock" size="small" @click="handleBatchLock" :loading="lockLoading">
           批量锁定
         </el-button>
-        <el-button 
-          type="success" 
-          icon="el-icon-unlock"
-          size="small"
-          @click="handleBatchUnlock"
-          :loading="lockLoading"
-        >
+        <el-button type="success" icon="el-icon-unlock" size="small" @click="handleBatchUnlock" :loading="lockLoading">
           批量解锁
         </el-button>
-        <el-button 
-          type="info" 
-          icon="el-icon-close"
-          size="small"
-          @click="handleClearSelection"
-        >
+        <el-button type="info" icon="el-icon-close" size="small" @click="handleClearSelection">
           取消选择
         </el-button>
       </div>
@@ -114,16 +66,8 @@
     <!-- 数据表格 -->
     <div class="table-container">
-      <NCC-table 
-        ref="table"
-        v-loading="loading" 
-        :data="list" 
-        border 
-        stripe
-        height="calc(100vh - 420px)"
-        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
-        @selection-change="handleSelectionChange"
-      >
+      <NCC-table ref="table" v-loading="loading" :data="list" border stripe height="calc(100vh - 420px)"
+        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" @selection-change="handleSelectionChange">
         <!-- 多选列 -->
         <el-table-column type="selection" width="55" align="center" fixed="left" />
         <!-- 基本信息 -->
@@ -350,41 +294,19 @@
         <!-- 操作列 -->
         <el-table-column label="操作" width="350" align="center" fixed="right">
           <template slot-scope="scope">
-            <el-button
-              type="primary"
-              size="mini"
-              icon="el-icon-view"
-              @click="showDetail(scope.row)"
-            >
+            <el-button type="primary" size="mini" icon="el-icon-view" @click="showDetail(scope.row)">
               详情
             </el-button>
-            <el-button
-              type="info"
-              size="mini"
-              icon="el-icon-document"
-              @click="showStoreDetail(scope.row)"
-              v-if="scope.row.StoreDetail"
-            >
+            <el-button type="info" size="mini" icon="el-icon-document" @click="showStoreDetail(scope.row)"
+              v-if="scope.row.StoreDetail">
               门店明细
             </el-button>
-            <el-button
-              v-if="scope.row.IsLocked === 1"
-              type="success"
-              size="mini"
-              icon="el-icon-unlock"
-              @click="handleUnlock(scope.row)"
-              :loading="lockLoading"
-            >
+            <el-button v-if="scope.row.IsLocked === 1" type="success" size="mini" icon="el-icon-unlock"
+              @click="handleUnlock(scope.row)" :loading="lockLoading">
               解锁
             </el-button>
-            <el-button
-              v-else
-              type="warning"
-              size="mini"
-              icon="el-icon-lock"
-              @click="handleLock(scope.row)"
-              :loading="lockLoading"
-            >
+            <el-button v-else type="warning" size="mini" icon="el-icon-lock" @click="handleLock(scope.row)"
+              :loading="lockLoading">
               锁定
             </el-button>
           </template>
@@ -393,64 +315,41 @@
     </div>
     <!-- 计算工资弹窗 -->
-    <el-dialog
-      title="计算大项目主管工资"
-      :visible="calculateDialogVisible"
-      width="500px"
-      :close-on-click-modal="false"
-      @close="handleCalculateDialogClose"
-    >
+    <el-dialog title="计算大项目主管工资" :visible="calculateDialogVisible" width="500px" :close-on-click-modal="false"
+      @close="handleCalculateDialogClose">
       <el-form label-width="100px" label-position="right">
         <el-form-item label="选择月份" required>
-          <el-date-picker
-            v-model="calculateMonth"
-            type="month"
-            placeholder="请选择月份"
-            format="yyyyMM"
-            value-format="yyyyMM"
-            style="width: 100%"
-          />
+          <el-date-picker v-model="calculateMonth" type="month" placeholder="请选择月份" format="yyyyMM"
+            value-format="yyyyMM" style="width: 100%" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="handleCalculateDialogClose">取消</el-button>
-        <el-button 
-          type="primary" 
-          @click="handleCalculateConfirm"
-          :loading="calculateLoading"
-        >
+        <el-button type="primary" @click="handleCalculateConfirm" :loading="calculateLoading">
           确定
         </el-button>
       </div>
     </el-dialog>
     <!-- 详情弹窗 -->
-    <major-project-director-detail-dialog
-      :visible="detailVisible"
-      :detail-data="currentDetailData"
-      @close="handleDetailClose"
-    />
+    <major-project-director-detail-dialog :visible="detailVisible" :detail-data="currentDetailData"
+      @close="handleDetailClose" />
     <!-- 门店明细弹窗 -->
-    <el-dialog
-      title="门店明细"
-      :visible="storeDetailVisible"
-      width="1000px"
-      @close="handleStoreDetailClose"
-    >
+    <el-dialog title="门店明细" :visible="storeDetailVisible" width="1000px" @close="handleStoreDetailClose">
       <el-table :data="storeDetailList" border stripe max-height="500">
         <el-table-column prop="StoreName" label="门店名称" width="200" align="center" fixed="left" />
-        <el-table-column prop="BillingAmount" label="开单金额"  align="center">
+        <el-table-column prop="BillingAmount" label="开单金额" align="center">
           <template slot-scope="scope">
             <span>{{ formatMoney(scope.row.BillingAmount) }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="RefundAmount" label="退卡金额"  align="center">
+        <el-table-column prop="RefundAmount" label="退卡金额" align="center">
           <template slot-scope="scope">
             <span>{{ formatMoney(scope.row.RefundAmount) }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="TotalPerformance" label="总业绩"  align="center">
+        <el-table-column prop="TotalPerformance" label="总业绩" align="center">
           <template slot-scope="scope">
             <span>{{ formatMoney(scope.row.TotalPerformance) }}</span>
           </template>
@@ -462,35 +361,17 @@
     </el-dialog>
     <!-- 导入弹窗 -->
-    <el-dialog
-      title="导入大项目主管工资数据"
-      :visible="importDialogVisible"
-      width="500px"
-      :close-on-click-modal="false"
-      @close="handleImportDialogClose"
-    >
-      <el-upload
-        ref="upload"
-        action=""
-        :auto-upload="false"
-        :on-change="handleFileChange"
-        :file-list="fileList"
-        :limit="1"
-        accept=".xlsx,.xls"
-        drag
-      >
+    <el-dialog title="导入大项目主管工资数据" :visible="importDialogVisible" width="500px" :close-on-click-modal="false"
+      @close="handleImportDialogClose">
+      <el-upload ref="upload" action="" :auto-upload="false" :on-change="handleFileChange" :file-list="fileList"
+        :limit="1" accept=".xlsx,.xls" drag>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">只能上传.xlsx/.xls文件，且不超过10MB</div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
         <el-button @click="handleImportDialogClose">取消</el-button>
-        <el-button 
-          type="primary" 
-          @click="handleImportConfirm"
-          :loading="importLoading"
-          :disabled="!importFile"
-        >
+        <el-button type="primary" @click="handleImportConfirm" :loading="importLoading" :disabled="!importFile">
           确定
         </el-button>
       </div>
@@ -558,7 +439,7 @@ export default {
         // 处理年月：从month选择器中提取年份和月份
         let year = ''
         let month = ''
-        
+
         if (this.queryParams.month && this.queryParams.month.length === 6) {
           // yyyyMM 格式，如 202512
           year = this.queryParams.month.substring(0, 4)
@@ -566,8 +447,8 @@ export default {
         } else if (this.queryParams.year && this.queryParams.month) {
           // 分别选择年份和月份
           year = this.queryParams.year
-          month = this.queryParams.month.length === 6 
-            ? this.queryParams.month.substring(4, 6) 
+          month = this.queryParams.month.length === 6
+            ? this.queryParams.month.substring(4, 6)
             : this.queryParams.month
         } else {
           // 使用默认值（当前年月）
@@ -1055,11 +936,11 @@ export default {
         // 生成文件名
         const now = new Date()
-        const timestamp = now.getFullYear() + 
-          String(now.getMonth() + 1).padStart(2, '0') + 
-          String(now.getDate()).padStart(2, '0') + 
-          String(now.getHours()).padStart(2, '0') + 
-          String(now.getMinutes()).padStart(2, '0') + 
+        const timestamp = now.getFullYear() +
+          String(now.getMonth() + 1).padStart(2, '0') +
+          String(now.getDate()).padStart(2, '0') +
+          String(now.getHours()).padStart(2, '0') +
+          String(now.getMinutes()).padStart(2, '0') +
           String(now.getSeconds()).padStart(2, '0')
         const fileName = `大项目主管工资_${timestamp}.xlsx`
@@ -1096,26 +977,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -1127,40 +1027,168 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .batch-action-container {
-  margin-top: 15px;
-  padding: 12px;
-  background: #f0f9ff;
-  border-radius: 4px;
+  margin-top: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(144, 147, 153, 0.3);
   display: flex;
   align-items: center;
   gap: 12px;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.1);
   .selected-count {
-    color: #409EFF;
-    font-weight: 500;
+    color: #606266;
+    font-weight: 600;
     margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .el-button {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .employee-name {
@@ -1169,28 +1197,275 @@ export default {
   gap: 6px;
   .employee-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .employee-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
+  // 确保多选框列可以点击 - 全局设置，最高优先级
+  .el-table__column--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+  }
+
+  .el-checkbox {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .el-checkbox__input {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  .el-checkbox__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  td.el-table__cell--selection,
+  th.el-table__cell--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+    background-color: #ffffff !important;
+    cursor: pointer;
+
+    .cell {
+      pointer-events: auto !important;
+      z-index: 1001 !important;
+      position: relative;
+    }
+  }
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
+      }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  // 固定列样式修复
+  .el-table__fixed,
+  .el-table__fixed-right {
+    z-index: 5 !important;
+    background-color: #ffffff;
+    height: 100% !important;
+
+    // 确保多选框可以点击 - 选择列需要最高的z-index
+    .el-table__column--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+    }
+
+    // 确保选择列单元格可以点击
+    td.el-table__cell--selection,
+    th.el-table__cell--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+      background-color: #ffffff !important;
+      cursor: pointer;
+
+      .cell {
+        pointer-events: auto !important;
+        z-index: 1001 !important;
+        position: relative;
+      }
+    }
+
+    // 确保多选框本身可以点击
+    .el-checkbox {
+      z-index: 1001 !important;
+      position: relative;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__input {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__inner {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    &::before {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      z-index: 4 !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    }
+
+    .el-table__fixed-header-wrapper {
+      height: auto !important;
+      background-color: #ffffff;
+
+      th {
+        background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+        z-index: 6 !important;
+        padding: 14px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列header需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .el-table__fixed-body-wrapper {
+      background-color: #ffffff;
+      height: auto !important;
+      max-height: 100% !important;
+      overflow-y: auto !important;
+
+      td {
+        background-color: #ffffff !important;
+        z-index: 6 !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列cell需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+
+      .el-table__row {
+        height: auto !important;
+
+        &.el-table__row--striped {
+          td {
+            background-color: #fafafa !important;
+          }
+        }
+      }
+    }
+
+    th {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+      z-index: 6 !important;
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列header需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    td {
+      background-color: #ffffff !important;
+      z-index: 6 !important;
+      padding: 12px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列cell需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
       }
     }
   }
+
+  // 固定列补丁
+  .el-table__fixed-right-patch {
+    background-color: #ffffff;
+    z-index: 4 !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
+
+  // 确保固定列和主表格的header高度一致
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th,
+  .el-table__fixed-right-header-wrapper th {
+    padding: 14px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+
+  // 确保固定列和主表格的body行高一致
+  .el-table__body-wrapper td,
+  .el-table__fixed-body-wrapper td,
+  .el-table__fixed-right-body-wrapper td {
+    padding: 12px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
 }
 </style>
-
@@ -1145,26 +1145,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -1176,40 +1195,168 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .batch-action-container {
-  margin-top: 15px;
-  padding: 12px;
-  background: #f0f9ff;
-  border-radius: 4px;
+  margin-top: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(144, 147, 153, 0.3);
   display: flex;
   align-items: center;
   gap: 12px;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.1);
   .selected-count {
-    color: #409EFF;
-    font-weight: 500;
+    color: #606266;
+    font-weight: 600;
     margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .el-button {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .store-name,
@@ -1220,27 +1367,276 @@ export default {
   .store-icon,
   .employee-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .store-icon,
+  &:hover .employee-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
+  // 确保多选框列可以点击 - 全局设置，最高优先级
+  .el-table__column--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+  }
+
+  .el-checkbox {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .el-checkbox__input {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  .el-checkbox__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  td.el-table__cell--selection,
+  th.el-table__cell--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+    background-color: #ffffff !important;
+    cursor: pointer;
+
+    .cell {
+      pointer-events: auto !important;
+      z-index: 1001 !important;
+      position: relative;
+    }
+  }
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
       }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  // 固定列样式修复
+  .el-table__fixed,
+  .el-table__fixed-right {
+    z-index: 5 !important;
+    background-color: #ffffff;
+    height: 100% !important;
+
+    // 确保多选框可以点击 - 选择列需要最高的z-index
+    .el-table__column--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+    }
+
+    // 确保选择列单元格可以点击
+    td.el-table__cell--selection,
+    th.el-table__cell--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+      background-color: #ffffff !important;
+      cursor: pointer;
+
+      .cell {
+        pointer-events: auto !important;
+        z-index: 1001 !important;
+        position: relative;
+      }
+    }
+
+    // 确保多选框本身可以点击
+    .el-checkbox {
+      z-index: 1001 !important;
+      position: relative;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__input {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
     }
+
+    .el-checkbox__inner {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    &::before {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      z-index: 4 !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    }
+
+    .el-table__fixed-header-wrapper {
+      height: auto !important;
+      background-color: #ffffff;
+
+      th {
+        background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+        z-index: 6 !important;
+        padding: 14px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列header需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .el-table__fixed-body-wrapper {
+      background-color: #ffffff;
+      height: auto !important;
+      max-height: 100% !important;
+      overflow-y: auto !important;
+
+      td {
+        background-color: #ffffff !important;
+        z-index: 6 !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列cell需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+
+      .el-table__row {
+        height: auto !important;
+
+        &.el-table__row--striped {
+          td {
+            background-color: #fafafa !important;
+          }
+        }
+      }
+    }
+
+    th {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+      z-index: 6 !important;
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列header需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    td {
+      background-color: #ffffff !important;
+      z-index: 6 !important;
+      padding: 12px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列cell需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+  }
+
+  // 固定列补丁
+  .el-table__fixed-right-patch {
+    background-color: #ffffff;
+    z-index: 4 !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
+
+  // 确保固定列和主表格的header高度一致
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th,
+  .el-table__fixed-right-header-wrapper th {
+    padding: 14px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+
+  // 确保固定列和主表格的body行高一致
+  .el-table__body-wrapper td,
+  .el-table__fixed-body-wrapper td,
+  .el-table__fixed-right-body-wrapper td {
+    padding: 12px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
   }
 }
 </style>
@@ -788,26 +788,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -819,24 +838,137 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .store-name {
@@ -845,32 +977,77 @@ export default {
   gap: 6px;
   .store-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .store-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 .highlight {
-  color: #409EFF;
+  color: #606266;
   font-weight: 600;
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
+      }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
       }
     }
   }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
 }
 </style>
@@ -1189,26 +1189,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -1220,40 +1239,168 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .batch-action-container {
-  margin-top: 15px;
-  padding: 12px;
-  background: #f0f9ff;
-  border-radius: 4px;
+  margin-top: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(144, 147, 153, 0.3);
   display: flex;
   align-items: center;
   gap: 12px;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.1);
   .selected-count {
-    color: #409EFF;
-    font-weight: 500;
+    color: #606266;
+    font-weight: 600;
     margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .el-button {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .store-name,
@@ -1264,27 +1411,276 @@ export default {
   .store-icon,
   .employee-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .store-icon,
+  &:hover .employee-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
+  // 确保多选框列可以点击 - 全局设置，最高优先级
+  .el-table__column--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+  }
+
+  .el-checkbox {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .el-checkbox__input {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  .el-checkbox__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  td.el-table__cell--selection,
+  th.el-table__cell--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+    background-color: #ffffff !important;
+    cursor: pointer;
+
+    .cell {
+      pointer-events: auto !important;
+      z-index: 1001 !important;
+      position: relative;
+    }
+  }
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
       }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  // 固定列样式修复
+  .el-table__fixed,
+  .el-table__fixed-right {
+    z-index: 5 !important;
+    background-color: #ffffff;
+    height: 100% !important;
+
+    // 确保多选框可以点击 - 选择列需要最高的z-index
+    .el-table__column--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+    }
+
+    // 确保选择列单元格可以点击
+    td.el-table__cell--selection,
+    th.el-table__cell--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+      background-color: #ffffff !important;
+      cursor: pointer;
+
+      .cell {
+        pointer-events: auto !important;
+        z-index: 1001 !important;
+        position: relative;
+      }
+    }
+
+    // 确保多选框本身可以点击
+    .el-checkbox {
+      z-index: 1001 !important;
+      position: relative;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__input {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
     }
+
+    .el-checkbox__inner {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    &::before {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      z-index: 4 !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    }
+
+    .el-table__fixed-header-wrapper {
+      height: auto !important;
+      background-color: #ffffff;
+
+      th {
+        background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+        z-index: 6 !important;
+        padding: 14px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列header需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .el-table__fixed-body-wrapper {
+      background-color: #ffffff;
+      height: auto !important;
+      max-height: 100% !important;
+      overflow-y: auto !important;
+
+      td {
+        background-color: #ffffff !important;
+        z-index: 6 !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列cell需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+
+      .el-table__row {
+        height: auto !important;
+
+        &.el-table__row--striped {
+          td {
+            background-color: #fafafa !important;
+          }
+        }
+      }
+    }
+
+    th {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+      z-index: 6 !important;
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列header需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    td {
+      background-color: #ffffff !important;
+      z-index: 6 !important;
+      padding: 12px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列cell需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+  }
+
+  // 固定列补丁
+  .el-table__fixed-right-patch {
+    background-color: #ffffff;
+    z-index: 4 !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
+
+  // 确保固定列和主表格的header高度一致
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th,
+  .el-table__fixed-right-header-wrapper th {
+    padding: 14px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+
+  // 确保固定列和主表格的body行高一致
+  .el-table__body-wrapper td,
+  .el-table__fixed-body-wrapper td,
+  .el-table__fixed-right-body-wrapper td {
+    padding: 12px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
   }
 }
 </style>
@@ -1129,26 +1129,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -1160,40 +1179,168 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .batch-action-container {
-  margin-top: 15px;
-  padding: 12px;
-  background: #f0f9ff;
-  border-radius: 4px;
+  margin-top: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(144, 147, 153, 0.3);
   display: flex;
   align-items: center;
   gap: 12px;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.1);
   .selected-count {
-    color: #409EFF;
-    font-weight: 500;
+    color: #606266;
+    font-weight: 600;
     margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .el-button {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    }
   }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .employee-name {
@@ -1202,27 +1349,275 @@ export default {
   gap: 6px;
   .employee-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .employee-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
+  // 确保多选框列可以点击 - 全局设置，最高优先级
+  .el-table__column--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+  }
+
+  .el-checkbox {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .el-checkbox__input {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  .el-checkbox__inner {
+    z-index: 1001 !important;
+    pointer-events: auto !important;
+    cursor: pointer;
+  }
+
+  td.el-table__cell--selection,
+  th.el-table__cell--selection {
+    z-index: 1000 !important;
+    pointer-events: auto !important;
+    position: relative;
+    background-color: #ffffff !important;
+    cursor: pointer;
+
+    .cell {
+      pointer-events: auto !important;
+      z-index: 1001 !important;
+      position: relative;
+    }
+  }
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
       }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
+
+  // 固定列样式修复
+  .el-table__fixed,
+  .el-table__fixed-right {
+    z-index: 5 !important;
+    background-color: #ffffff;
+    height: 100% !important;
+
+    // 确保多选框可以点击 - 选择列需要最高的z-index
+    .el-table__column--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+    }
+
+    // 确保选择列单元格可以点击
+    td.el-table__cell--selection,
+    th.el-table__cell--selection {
+      z-index: 1000 !important;
+      pointer-events: auto !important;
+      position: relative;
+      background-color: #ffffff !important;
+      cursor: pointer;
+
+      .cell {
+        pointer-events: auto !important;
+        z-index: 1001 !important;
+        position: relative;
+      }
+    }
+
+    // 确保多选框本身可以点击
+    .el-checkbox {
+      z-index: 1001 !important;
+      position: relative;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    .el-checkbox__input {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
     }
+
+    .el-checkbox__inner {
+      z-index: 1001 !important;
+      pointer-events: auto !important;
+      cursor: pointer;
+    }
+
+    &::before {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      z-index: 4 !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    }
+
+    .el-table__fixed-header-wrapper {
+      height: auto !important;
+      background-color: #ffffff;
+
+      th {
+        background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+        z-index: 6 !important;
+        padding: 14px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列header需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .el-table__fixed-body-wrapper {
+      background-color: #ffffff;
+      height: auto !important;
+      max-height: 100% !important;
+      overflow-y: auto !important;
+
+      td {
+        background-color: #ffffff !important;
+        z-index: 6 !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+
+        // 选择列cell需要最高z-index
+        &.el-table__cell--selection {
+          z-index: 1000 !important;
+          pointer-events: auto !important;
+        }
+      }
+
+      .el-table__row {
+        height: auto !important;
+
+        &.el-table__row--striped {
+          td {
+            background-color: #fafafa !important;
+          }
+        }
+      }
+    }
+
+    th {
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%) !important;
+      z-index: 6 !important;
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列header需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+
+    td {
+      background-color: #ffffff !important;
+      z-index: 6 !important;
+      padding: 12px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+
+      // 选择列cell需要最高z-index
+      &.el-table__cell--selection {
+        z-index: 1000 !important;
+        pointer-events: auto !important;
+      }
+    }
+  }
+
+  // 固定列补丁
+  .el-table__fixed-right-patch {
+    background-color: #ffffff;
+    z-index: 4 !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
+
+  // 确保固定列和主表格的header高度一致
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th,
+  .el-table__fixed-right-header-wrapper th {
+    padding: 14px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
+  }
+
+  // 确保固定列和主表格的body行高一致
+  .el-table__body-wrapper td,
+  .el-table__fixed-body-wrapper td,
+  .el-table__fixed-right-body-wrapper td {
+    padding: 12px 0 !important;
+    height: auto !important;
+    line-height: normal !important;
   }
 }
 </style>
@@ -499,26 +499,45 @@ export default {
 <style lang="scss" scoped>
 .app-container {
-  padding: 20px;
-  background: #f5f5f5;
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #606266 0%, #909399 50%, #606266 100%);
+  }
   .header-left {
     h2 {
       margin: 0 0 8px 0;
       color: #303133;
-      font-size: 20px;
+      font-size: 22px;
       font-weight: 600;
+      background: linear-gradient(135deg, #303133 0%, #606266 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
     .page-desc {
@@ -530,24 +549,137 @@ export default {
   .header-right {
     display: flex;
-    gap: 12px;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 18px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+
+      &.el-button--success {
+        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
+        }
+      }
+
+      &.el-button--warning {
+        background: linear-gradient(135deg, #E6A23C 0%, #f0b45a 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0b45a 0%, #E6A23C 100%);
+        }
+      }
+
+      &.el-button--info {
+        background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
+        }
+      }
+    }
   }
 }
 .search-container {
-  margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-form {
+    .el-form-item {
+      margin-bottom: 16px;
+    }
+
+    .el-button {
+      border-radius: 8px;
+      padding: 10px 20px;
+      font-weight: 500;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &.el-button--primary {
+        background: linear-gradient(135deg, #606266 0%, #909399 100%);
+        border: none;
+
+        &:hover {
+          background: linear-gradient(135deg, #909399 0%, #606266 100%);
+        }
+      }
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      border-radius: 8px;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        border-color: #909399;
+        box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.15);
+      }
+    }
+  }
 }
 .table-container {
   margin-bottom: 20px;
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(144, 147, 153, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &::v-deep .el-table {
+    background-color: #ffffff;
+
+    .el-table__body-wrapper {
+      background-color: #ffffff;
+    }
+  }
 }
 .department-name {
@@ -556,32 +688,77 @@ export default {
   gap: 6px;
   .department-icon {
-    color: #409EFF;
+    color: #606266;
     font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover .department-icon {
+    transform: scale(1.1) rotate(5deg);
   }
 }
 .highlight {
-  color: #409EFF;
+  color: #606266;
   font-weight: 600;
 }
 // 表格样式优化
 ::v-deep .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(144, 147, 153, 0.2);
+
   .el-table__header-wrapper {
     th {
-      background-color: #f5f7fa;
-      color: #606266;
+      background: linear-gradient(135deg, rgba(144, 147, 153, 0.08) 0%, rgba(144, 147, 153, 0.05) 100%);
+      color: #303133;
       font-weight: 600;
+      border-bottom: 2px solid rgba(144, 147, 153, 0.2);
+      padding: 14px 0 !important;
+      height: auto !important;
+      line-height: normal !important;
+      box-sizing: border-box;
     }
   }
   .el-table__body-wrapper {
+    background-color: #ffffff;
+    z-index: 1;
+
     .el-table__row {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background-color: #ffffff;
+
       &:hover {
-        background-color: #f5f7fa;
+        background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        transform: translateX(2px);
+      }
+
+      td {
+        border-bottom: 1px solid rgba(144, 147, 153, 0.15);
+        background-color: #ffffff !important;
+        padding: 12px 0 !important;
+        height: auto !important;
+        line-height: normal !important;
+        box-sizing: border-box;
+      }
+
+      &.el-table__row--striped {
+        td {
+          background-color: #fafafa !important;
+        }
+
+        &:hover td {
+          background: linear-gradient(90deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%) !important;
+        }
       }
     }
   }
+
+  .el-table__header-wrapper {
+    background-color: #ffffff;
+    z-index: 2;
+  }
 }
 </style>