From 9c38588a8fe9693802feb70bb7a5819e26138324 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Tue, 21 Oct 2025 10:37:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  21 +-
 .../components/EnterpriseKnowledge.vue        | 159 ++---
 .../enterpriseLibrary/enterprise/index.vue    |  52 --
 .../enterpriseLibrary/personnel/index.vue     | 617 ++++++++++++++++++
 4 files changed, 717 insertions(+), 132 deletions(-)
 create mode 100644 src/views/enterpriseLibrary/personnel/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 066f3c1..91dde3d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -237,7 +237,7 @@ export const dynamicRoutes = [
     ]
   },
   {
-    path: '/EnterpriseForm',
+    path: '/enterpriseForm',
     component: Layout,
     hidden: true,
     permissions: ['enterpriseLibrary:enterprise:add'],
@@ -251,7 +251,7 @@ export const dynamicRoutes = [
     ]
   },
   {
-    path: '/EnterpriseDetail',
+    path: '/enterpriseDetail',
     component: Layout,
     hidden: true,
     permissions: ['enterpriseLibrary:enterprise:detail'],
@@ -265,7 +265,7 @@ export const dynamicRoutes = [
     ]
   },
   {
-    path: '/EnterpriseKnowledge',
+    path: '/enterpriseKnowledge',
     component: Layout,
     hidden: true,
     permissions: ['enterpriseLibrary:enterprise:EnterpriseKnowledge'],
@@ -277,9 +277,22 @@ export const dynamicRoutes = [
         meta: { title: '企业知识库', activeMenu: '/enterpriseLibrary/enterprise', noCache: true }
       }
     ]
+  },
+  {
+    path: '/personnel',
+    component: Layout,
+    hidden: true,
+    permissions: ['enterpriseLibrary:personnel:list'],
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/enterpriseLibrary/personnel/index'),
+        name: 'Personnel',
+        meta: { title: '人员库', activeMenu: '/enterpriseLibrary/personnel', noCache: true }
+      }
+    ]
   }
 
-
 ]
 
 // 防止连续点击多次路由报错
diff --git a/src/views/enterpriseLibrary/enterprise/components/EnterpriseKnowledge.vue b/src/views/enterpriseLibrary/enterprise/components/EnterpriseKnowledge.vue
index 5264290..86cd1df 100644
--- a/src/views/enterpriseLibrary/enterprise/components/EnterpriseKnowledge.vue
+++ b/src/views/enterpriseLibrary/enterprise/components/EnterpriseKnowledge.vue
@@ -9,69 +9,18 @@
 
     <!-- 知识库卡片网格 -->
     <div class="knowledge-grid">
-      <!-- 业绩库 -->
-      <div class="knowledge-card" @click="handleCardClick('performance')">
+      <div 
+        class="knowledge-card" 
+        v-for="(card, index) in knowledgeCards" 
+        :key="index"
+        @click="handleCardClick(card)"
+      >
         <div class="card-icon">
-          <img :src="enterpriseKnowledgeIcon" alt="业绩库" />
+          <img :src="card.icon" :alt="card.title" />
         </div>
         <div class="card-content">
-          <h3 class="card-title">业绩库</h3>
-          <p class="card-description">业绩库主要管理企业的项目业绩信息, 包括合同、验收报告、中标通知书等</p>
-        </div>
-      </div>
-
-      <!-- 人员库 -->
-      <div class="knowledge-card" @click="handleCardClick('personnel')">
-        <div class="card-icon">
-          <img :src="enterpriseKnowledgeIcon" alt="人员库" />
-        </div>
-        <div class="card-content">
-          <h3 class="card-title">人员库</h3>
-          <p class="card-description">人员库主要管理企业的人员资质信息, 包括岗位、工作经验、员工证书等</p>
-        </div>
-      </div>
-
-      <!-- 资质库 -->
-      <div class="knowledge-card" @click="handleCardClick('qualification')">
-        <div class="card-icon">
-          <img :src="enterpriseKnowledgeIcon" alt="资质库" />
-        </div>
-        <div class="card-content">
-          <h3 class="card-title">资质库</h3>
-          <p class="card-description">资质库主要管理企业的资质证书信息, 包括软著、专利、荣誉等</p>
-        </div>
-      </div>
-
-      <!-- 技术方案库 -->
-      <div class="knowledge-card" @click="handleCardClick('technical')">
-        <div class="card-icon">
-          <img :src="enterpriseKnowledgeIcon" alt="技术方案库" />
-        </div>
-        <div class="card-content">
-          <h3 class="card-title">技术方案库</h3>
-          <p class="card-description">解决方案库主要用于管理企业内部技术方案、产品方案、项目方案等</p>
-        </div>
-      </div>
-
-      <!-- 工器具库 -->
-      <div class="knowledge-card" @click="handleCardClick('tools')">
-        <div class="card-icon">
-          <img :src="enterpriseKnowledgeIcon" alt="工器具库" />
-        </div>
-        <div class="card-content">
-          <h3 class="card-title">工器具库</h3>
-          <p class="card-description">工器具库主要用于登记工器具资料信息, 统一管理工器具清单等</p>
-        </div>
-      </div>
-
-      <!-- 财务库 -->
-      <div class="knowledge-card" @click="handleCardClick('financial')">
-        <div class="card-icon">
-          <img :src="enterpriseKnowledgeIcon" alt="财务库" />
-        </div>
-        <div class="card-content">
-          <h3 class="card-title">财务库</h3>
-          <p class="card-description">财务库主要管理企业的财务报告文档, 包括审计报告、年报等</p>
+          <h3 class="card-title">{{ card.title }}</h3>
+          <p class="card-description">{{ card.description }}</p>
         </div>
       </div>
     </div>
@@ -86,7 +35,57 @@ export default {
   data() {
     return {
       enterpriseId: this.$route.query.id,
-      enterpriseKnowledgeIcon
+      enterpriseKnowledgeIcon,
+      knowledgeCards: [
+        {
+          type: 'performance',
+          title: '业绩库',
+          description: '业绩库主要管理企业的项目业绩信息, 包括合同、验收报告、中标通知书等',
+          icon: enterpriseKnowledgeIcon,
+          path: '/enterpriseLibrary/enterprise/performance',
+          name: 'Performance'
+        },
+        {
+          type: 'personnel',
+          title: '人员库',
+          description: '人员库主要管理企业的人员资质信息, 包括岗位、工作经验、员工证书等',
+          icon: enterpriseKnowledgeIcon,
+          path: '/enterpriseLibrary/enterprise/personnel',
+          name: 'Personnel'
+        },
+        {
+          type: 'qualification',
+          title: '资质库',
+          description: '资质库主要管理企业的资质证书信息, 包括软著、专利、荣誉等',
+          icon: enterpriseKnowledgeIcon,
+          path: '/enterpriseLibrary/enterprise/qualification',
+          name: 'Qualification'
+        },
+        {
+          type: 'technical',
+          title: '技术方案库',
+          description: '解决方案库主要用于管理企业内部技术方案、产品方案、项目方案等',
+          icon: enterpriseKnowledgeIcon,
+          path: '/enterpriseLibrary/enterprise/technical',
+          name: 'Technical'
+        },
+        {
+          type: 'tools',
+          title: '工器具库',
+          description: '工器具库主要用于登记工器具资料信息, 统一管理工器具清单等',
+          icon: enterpriseKnowledgeIcon,
+          path: '/enterpriseLibrary/enterprise/tools',
+          name: 'Tools'
+        },
+        {
+          type: 'financial',
+          title: '财务库',
+          description: '财务库主要管理企业的财务报告文档, 包括审计报告、年报等',
+          icon: enterpriseKnowledgeIcon,
+          path: '/enterpriseLibrary/enterprise/financial',
+          name: 'Financial'
+        }
+      ]
     }
   },
   methods: {
@@ -96,25 +95,33 @@ export default {
     },
     
     // 卡片点击事件
-    handleCardClick(type) {
-      console.log('点击了知识库类型:', type)
-      // 这里可以根据不同类型跳转到不同的页面
-      this.$message.info(`点击了${this.getCardTitle(type)}`)
+    handleCardClick(card) {
+      console.log('点击了知识库类型:', card.type)
+      
+      // 查找对应的卡片数据
+      if (card && card.path) {
+        // 如果有路径，则跳转到对应页面
+        this.$router.push({
+        //   path: card.path,
+          name: card.name,
+          query: {
+            enterpriseId: this.enterpriseId
+          }
+        })
+      } else {
+        // 否则显示提示信息
+        this.$message.info(`点击了${this.getCardTitle(type)}`)
+      }
     },
     
     // 获取卡片标题
     getCardTitle(type) {
-      const titles = {
-        'performance': '业绩库',
-        'personnel': '人员库',
-        'qualification': '资质库',
-        'technical': '技术方案库',
-        'tools': '工器具库',
-        'financial': '财务库'
-      }
-      return titles[type] || '未知'
-    }
-  }
+      const card = this.knowledgeCards.find(item => item.type === type)
+      return card ? card.title : '未知'
+    },
+    
+  },
+
 }
 </script>
 
diff --git a/src/views/enterpriseLibrary/enterprise/index.vue b/src/views/enterpriseLibrary/enterprise/index.vue
index 31e2079..b2aee7a 100644
--- a/src/views/enterpriseLibrary/enterprise/index.vue
+++ b/src/views/enterpriseLibrary/enterprise/index.vue
@@ -681,56 +681,4 @@ export default {
     }
   }
 }
-
-// 响应式设计
-@media (max-width: 1200px) {
-  .enterprise-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (max-width: 900px) {
-  .enterprise-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .search-container {
-    .search-content {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 15px;
-    }
-
-    .search-right {
-      width: 100%;
-
-      .search-input {
-        width: 100%;
-        max-width: 300px;
-      }
-    }
-  }
-
-  .enterprise-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .enterprise-actions {
-    flex-direction: column;
-
-    .el-button {
-      width: 100%;
-      margin-bottom: 8px;
-    }
-  }
-
-  .pagination-container {
-    .el-pagination {
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-  }
-}
 </style>
diff --git a/src/views/enterpriseLibrary/personnel/index.vue b/src/views/enterpriseLibrary/personnel/index.vue
new file mode 100644
index 0000000..6dd371d
--- /dev/null
+++ b/src/views/enterpriseLibrary/personnel/index.vue
@@ -0,0 +1,617 @@
+<template>
+    <div class="app-container">
+        <!-- 返回按钮 -->
+        <div class="back-container">
+            <el-button type="default" size="small" @click="handleBack" class="back-btn">
+                返回
+            </el-button>
+        </div>
+
+        <!-- 搜索区域 -->
+        <div class="search-container">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+                <el-form-item prop="personnelName">
+                    <el-input v-model="queryParams.personnelName" placeholder="请输入姓名" clearable maxlength="32"
+                        class="search-input" @keyup.enter.native="handleQuery">
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="position">
+                    <el-select v-model="queryParams.position" placeholder="请选择职位" clearable class="search-select">
+                        <el-option v-for="item in positionOptions" :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" size="small" @click="handleQuery" class="search-btn">查询</el-button>
+                    <el-button size="small" @click="resetQuery" class="reset-btn">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <!-- 人员卡片网格 -->
+        <div class="personnel-grid">
+            <!-- 新增人员卡片 -->
+            <div class="personnel-card create-card" @click="handleAdd">
+                <div class="create-icon">
+                    <i class="el-icon-plus"></i>
+                </div>
+                <div class="create-text">新增人员</div>
+            </div>
+
+            <!-- 人员信息卡片 -->
+            <div class="personnel-card" v-for="(personnel, index) in personnelList" :key="index">
+                <div class="personnel-header">
+                    <h3 class="personnel-name">{{ personnel.name }}</h3>
+                </div>
+
+                <div class="personnel-info">
+                    <div class="info-item">
+                        <span class="label">职位</span>
+                        <span class="value">{{ personnel.position }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">从业年限</span>
+                        <span class="value">{{ personnel.experience }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">入职时间</span>
+                        <span class="value">{{ personnel.entryDate }}</span>
+                    </div>
+                </div>
+
+                <!-- 操作按钮 -->
+                <div class="personnel-actions">
+                    <div @click="handleDetail(personnel)" class="action-btn detail-btn">
+                        <img :src="EnterpriseDetail" alt="详情" />
+                        <span>详情</span>
+                    </div>
+                    <div @click="handleEdit(personnel)" class="action-btn edit-btn">
+                        <img :src="EnterpriseEdit" alt="编辑" />
+                        <span>编辑</span>
+                    </div>
+                    <div @click="handleDelete(personnel)" class="action-btn delete-btn">
+                        <img :src="EnterpriseDelete" alt="删除" />
+                        <span>删除</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize"
+                layout="total, sizes, prev, pager, next, jumper" :total="total">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import EnterpriseDetail from '@/assets/enterpriseLibrary/enterprise/enterprise-detail.png';
+import EnterpriseEdit from '@/assets/enterpriseLibrary/enterprise/enterprise-edit.png';
+import EnterpriseDelete from '@/assets/enterpriseLibrary/enterprise/enterprise-delete.png';
+export default {
+    name: 'Personnel',
+    data() {
+        return {
+            EnterpriseDetail,
+            EnterpriseEdit,
+            EnterpriseDelete,
+            queryParams: {
+                personnelName: '',
+                position: '',
+                pageNum: 1,
+                pageSize: 10
+            },
+            total: 100,
+            positionOptions: [
+                { label: '项目经理', value: '项目经理' },
+                { label: '技术总监', value: '技术总监' },
+                { label: '产品经理', value: '产品经理' },
+                { label: '开发工程师', value: '开发工程师' },
+                { label: '测试工程师', value: '测试工程师' },
+                { label: 'UI设计师', value: 'UI设计师' },
+                { label: '运维工程师', value: '运维工程师' },
+                { label: '销售经理', value: '销售经理' }
+            ],
+            personnelList: [
+                {
+                    id: 1,
+                    name: '王德发',
+                    position: '项目经理',
+                    experience: '10年',
+                    entryDate: '2022/03/07'
+                },
+                {
+                    id: 2,
+                    name: '李小明',
+                    position: '技术总监',
+                    experience: '8年',
+                    entryDate: '2021/05/15'
+                },
+                {
+                    id: 3,
+                    name: '张小红',
+                    position: '产品经理',
+                    experience: '6年',
+                    entryDate: '2023/01/10'
+                },
+                {
+                    id: 4,
+                    name: '刘大华',
+                    position: '开发工程师',
+                    experience: '5年',
+                    entryDate: '2022/08/20'
+                },
+                {
+                    id: 5,
+                    name: '陈小芳',
+                    position: '测试工程师',
+                    experience: '4年',
+                    entryDate: '2023/03/01'
+                },
+                {
+                    id: 6,
+                    name: '赵大强',
+                    position: 'UI设计师',
+                    experience: '7年',
+                    entryDate: '2021/11/15'
+                },
+                {
+                    id: 7,
+                    name: '孙小丽',
+                    position: '运维工程师',
+                    experience: '3年',
+                    entryDate: '2023/06/01'
+                },
+                {
+                    id: 8,
+                    name: '周大伟',
+                    position: '销售经理',
+                    experience: '9年',
+                    entryDate: '2020/09/01'
+                },
+                {
+                    id: 9,
+                    name: '吴小敏',
+                    position: '开发工程师',
+                    experience: '2年',
+                    entryDate: '2023/09/01'
+                },
+                {
+                    id: 10,
+                    name: '郑大龙',
+                    position: '项目经理',
+                    experience: '12年',
+                    entryDate: '2019/12/01'
+                }
+            ]
+        }
+    },
+    created() {
+        this.getList()
+    },
+    methods: {
+        // 获取人员列表
+        getList() {
+            console.log('获取人员列表', this.queryParams)
+        },
+
+        // 返回上一页
+        handleBack() {
+            this.$router.go(-1)
+        },
+
+        // 查询
+        handleQuery() {
+            this.queryParams.pageNum = 1
+            this.getList()
+        },
+
+        // 重置
+        resetQuery() {
+            this.queryParams.personnelName = ''
+            this.queryParams.position = ''
+            this.handleQuery()
+        },
+
+        // 新增人员
+        handleAdd() {
+            console.log('新增人员')
+            this.$message.info('新增人员功能')
+        },
+
+        // 详情
+        handleDetail(personnel) {
+            console.log('查看详情', personnel)
+            this.$message.info(`查看${personnel.name}的详情`)
+        },
+
+        // 编辑
+        handleEdit(personnel) {
+            console.log('编辑人员', personnel)
+            this.$message.info(`编辑${personnel.name}的信息`)
+        },
+
+        // 删除
+        handleDelete(personnel) {
+            this.$confirm(`确定删除${personnel.name}吗？`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                console.log('删除人员', personnel)
+                this.$message.success('删除成功')
+                this.getList()
+            }).catch(() => {
+                this.$message.info('已取消删除')
+            })
+        },
+
+        // 分页大小改变
+        handleSizeChange(val) {
+            this.queryParams.pageSize = val
+            this.getList()
+        },
+
+        // 当前页改变
+        handleCurrentChange(val) {
+            this.queryParams.pageNum = val
+            this.getList()
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.app-container {
+    padding: 20px;
+    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.back-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 15px;
+    padding: 0 20px;
+
+    .back-btn {
+        width: 98px;
+        height: 36px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
+        border-radius: 4px;
+        border: none;
+        color: #666;
+        font-size: 14px;
+        transition: all 0.3s ease;
+
+        &:hover {
+            background: #f5f5f5;
+            color: #409EFF;
+            box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
+        }
+    }
+}
+
+.search-container {
+    padding: 20px;
+
+    .search-input {
+        width: 200px;
+    }
+
+    .search-select {
+        width: 200px;
+    }
+
+    .search-btn {
+        background: #409EFF;
+        border-color: #409EFF;
+        color: #fff;
+        font-weight: 500;
+        padding: 8px 16px;
+        border-radius: 4px;
+        box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
+
+        &:hover {
+            background: #66b1ff;
+            border-color: #66b1ff;
+            box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
+        }
+    }
+
+    .reset-btn {
+        background: #fff;
+        border-color: #dcdfe6;
+        color: #606266;
+        font-weight: 500;
+        padding: 8px 16px;
+        border-radius: 4px;
+        box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
+
+        &:hover {
+            background: #f5f7fa;
+            border-color: #c0c4cc;
+            color: #409EFF;
+            box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
+        }
+    }
+}
+
+.personnel-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 20px;
+    margin-bottom: 20px;
+    padding: 0 20px;
+    flex: 1;
+    overflow-y: auto;
+
+    /* 自定义滚动条样式 */
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 4px;
+
+        &:hover {
+            background: #a8a8a8;
+        }
+    }
+}
+
+.personnel-card {
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+
+    &:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        transform: translateY(-1px);
+    }
+
+    &.create-card {
+        border: 2px dashed #ddd;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 200px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:hover {
+            border-color: #409EFF;
+            background: #f0f8ff;
+        }
+
+        .create-icon {
+            font-size: 48px;
+            color: #999;
+            margin-bottom: 10px;
+        }
+
+        .create-text {
+            font-size: 16px;
+            color: #666;
+            font-weight: 500;
+        }
+    }
+}
+
+.personnel-header {
+    margin-bottom: 15px;
+
+    .personnel-name {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        margin: 0;
+        line-height: 1.4;
+    }
+}
+
+.personnel-info {
+    flex: 1;
+    margin-bottom: 15px;
+
+    .info-item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        font-size: 14px;
+
+        .label {
+            color: #888;
+            font-weight: 500;
+        }
+
+        .value {
+            color: #333;
+            font-weight: 600;
+        }
+    }
+}
+
+.personnel-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+
+    .action-btn {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 8px 4px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        gap: 4px;
+
+        i {
+            font-size: 16px;
+        }
+
+        span {
+            font-size: 12px;
+        }
+
+        &.detail-btn {
+            background: #f0f8ff;
+            color: #409EFF;
+            border: 1px solid #e6f3ff;
+
+            &:hover {
+                background: #e6f3ff;
+                color: #66b1ff;
+            }
+        }
+
+        &.edit-btn {
+            background: #fff7e6;
+            color: #ff9500;
+            border: 1px solid #fff2d9;
+
+            &:hover {
+                background: #fff2d9;
+                color: #ffb84d;
+            }
+        }
+
+        &.delete-btn {
+            background: #fff1f0;
+            color: #ff4d4f;
+            border: 1px solid #ffe7e6;
+
+            &:hover {
+                background: #ffe7e6;
+                color: #ff7875;
+            }
+        }
+    }
+}
+
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+    margin-top: auto;
+    flex-shrink: 0;
+
+    .el-pagination {
+        .el-pagination__total {
+            color: #606266;
+            font-weight: 500;
+        }
+
+        .el-pager li {
+            border-radius: 4px;
+            margin: 0 2px;
+
+            &.active {
+                background: #409EFF;
+                color: #fff;
+            }
+
+            &:hover {
+                color: #409EFF;
+            }
+        }
+
+        .btn-prev,
+        .btn-next {
+            border-radius: 4px;
+            margin: 0 2px;
+
+            &:hover {
+                color: #409EFF;
+            }
+        }
+    }
+}
+
+// 响应式设计
+@media (max-width: 1400px) {
+    .personnel-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+@media (max-width: 1200px) {
+    .personnel-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 900px) {
+    .personnel-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .app-container {
+        padding: 15px;
+    }
+
+    .back-container {
+        margin-bottom: 10px;
+    }
+
+    .search-container {
+        padding: 15px;
+
+        .search-input,
+        .search-select {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+    }
+
+    .personnel-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+        padding: 0 10px;
+    }
+
+    .personnel-card {
+        padding: 16px;
+        min-height: 180px;
+    }
+
+    .personnel-actions {
+        flex-direction: column;
+        gap: 8px;
+
+        .action-btn {
+            flex-direction: row;
+            padding: 10px;
+        }
+    }
+}
+</style>
\ No newline at end of file