|  |  |  |  | <!DOCTYPE html> | 
					
						
							|  |  |  |  | <html lang="zh-CN"> | 
					
						
							|  |  |  |  | <head> | 
					
						
							|  |  |  |  |     <meta charset="UTF-8"> | 
					
						
							|  |  |  |  |     <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 
					
						
							|  |  |  |  |     <title>人力资源管理系统</title> | 
					
						
							|  |  |  |  |     <link rel="preconnect" href="https://fonts.googleapis.com"> | 
					
						
							|  |  |  |  |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | 
					
						
							|  |  |  |  |     <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> | 
					
						
							|  |  |  |  |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | 
					
						
							|  |  |  |  |     <script src="https://cdn.tailwindcss.com"></script> | 
					
						
							|  |  |  |  |     <script> | 
					
						
							|  |  |  |  |         tailwind.config = { | 
					
						
							|  |  |  |  |             theme: { | 
					
						
							|  |  |  |  |                 extend: { | 
					
						
							|  |  |  |  |                     colors: { | 
					
						
							|  |  |  |  |                         primary: '#2D5CF6', | 
					
						
							|  |  |  |  |                         secondary: '#F5F6FA' | 
					
						
							|  |  |  |  |                     }, | 
					
						
							|  |  |  |  |                     borderRadius: { | 
					
						
							|  |  |  |  |                         'none': '0px', | 
					
						
							|  |  |  |  |                         'sm': '2px', | 
					
						
							|  |  |  |  |                         DEFAULT: '4px', | 
					
						
							|  |  |  |  |                         'md': '8px', | 
					
						
							|  |  |  |  |                         'lg': '12px', | 
					
						
							|  |  |  |  |                         'xl': '16px', | 
					
						
							|  |  |  |  |                         '2xl': '20px', | 
					
						
							|  |  |  |  |                         '3xl': '24px', | 
					
						
							|  |  |  |  |                         'full': '9999px', | 
					
						
							|  |  |  |  |                         'button': '4px' | 
					
						
							|  |  |  |  |                     } | 
					
						
							|  |  |  |  |                 } | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |     </script> | 
					
						
							|  |  |  |  |     <style> | 
					
						
							|  |  |  |  |         body { | 
					
						
							|  |  |  |  |             min-height: 1024px; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |         .nav-item:hover { | 
					
						
							|  |  |  |  |             background-color: rgba(255, 255, 255, 0.1); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |         .tree-node:hover { | 
					
						
							|  |  |  |  |             background-color: rgba(45, 92, 246, 0.05); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |         .table-row:hover { | 
					
						
							|  |  |  |  |             background-color: #F5F6FA; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |         .ai-icon { | 
					
						
							|  |  |  |  |             animation: pulse 2s infinite; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |         @keyframes pulse { | 
					
						
							|  |  |  |  |             0% { opacity: 0.8; } | 
					
						
							|  |  |  |  |             50% { opacity: 1; } | 
					
						
							|  |  |  |  |             100% { opacity: 0.8; } | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |         .marquee { | 
					
						
							|  |  |  |  |             animation: scroll 20s linear infinite; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |         @keyframes scroll { | 
					
						
							|  |  |  |  |             0% { transform: translateX(100%); } | 
					
						
							|  |  |  |  |             100% { transform: translateX(-100%); } | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |         i { | 
					
						
							|  |  |  |  |             display: flex !important; | 
					
						
							|  |  |  |  |             justify-content: center !important; | 
					
						
							|  |  |  |  |             align-items: center !important; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |     </style> | 
					
						
							|  |  |  |  | </head> | 
					
						
							|  |  |  |  | <body class="bg-secondary font-sans"> | 
					
						
							|  |  |  |  |     <!-- 顶部导航栏 --> | 
					
						
							|  |  |  |  | 	<!--<header class="bg-primary text-white w-full fixed top-0 z-50 shadow-md">
 | 
					
						
							|  |  |  |  |         <div class="container mx-auto px-4 h-14 flex items-center justify-between"> | 
					
						
							|  |  |  |  |             <div class="flex items-center"> | 
					
						
							|  |  |  |  |                 <span class="font-['Pacifico'] text-xl mr-8">人力</span> | 
					
						
							|  |  |  |  |                  | 
					
						
							|  |  |  |  |                 <nav class="hidden md:flex space-x-1"> | 
					
						
							|  |  |  |  |                     <a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">多维统计</a> | 
					
						
							|  |  |  |  |                     <a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">人员管理</a> | 
					
						
							|  |  |  |  |                     <a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">组织管理</a> | 
					
						
							|  |  |  |  |                     <a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">考勤管理</a> | 
					
						
							|  |  |  |  |                     <a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">绩效管理</a> | 
					
						
							|  |  |  |  |                     <a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">薪酬管理</a> | 
					
						
							|  |  |  |  |                     <a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">知识库</a> | 
					
						
							|  |  |  |  |                     <a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">后台管理</a> | 
					
						
							|  |  |  |  |                 </nav> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  |              | 
					
						
							|  |  |  |  |             <div class="flex items-center space-x-4"> | 
					
						
							|  |  |  |  |                 <div class="relative hidden md:block"> | 
					
						
							|  |  |  |  |                     <input type="text" placeholder="搜索..." class="bg-primary-600 text-white text-sm py-1 pl-8 pr-3 rounded-button border border-primary-400 focus:outline-none focus:ring-1 focus:ring-white w-48" /> | 
					
						
							|  |  |  |  |                     <i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-white text-sm"></i> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |                 <button class="flex items-center space-x-1 bg-primary-600 hover:bg-primary-700 px-2 py-1 rounded-button text-sm"> | 
					
						
							|  |  |  |  |                     <i class="fas fa-robot ai-icon text-white text-sm"></i> | 
					
						
							|  |  |  |  |                     <span>AI助手</span> | 
					
						
							|  |  |  |  |                 </button> | 
					
						
							|  |  |  |  |                  | 
					
						
							|  |  |  |  |                 <div class="flex items-center space-x-2 cursor-pointer"> | 
					
						
							|  |  |  |  |                     <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-primary font-semibold">张</div> | 
					
						
							|  |  |  |  |                     <span class="text-sm hidden md:inline">张明远</span> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  |         </div> | 
					
						
							|  |  |  |  |     </header> --> | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |     <!-- 主内容区 --> | 
					
						
							|  |  |  |  |     <main class="container mx-auto px-4 pt-6 pb-10 flex"> | 
					
						
							|  |  |  |  |         <!-- 左侧组织架构树 --> | 
					
						
							|  |  |  |  |         <div class="w-1/5 pr-4"> | 
					
						
							|  |  |  |  |             <div class="bg-white rounded-md shadow-sm p-4 h-full"> | 
					
						
							|  |  |  |  |                 <div class="flex items-center justify-between mb-4"> | 
					
						
							|  |  |  |  |                     <h3 class="text-sm font-semibold text-gray-700">组织架构</h3> | 
					
						
							|  |  |  |  |                     <button class="text-primary text-sm">全部展开</button> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |                  | 
					
						
							|  |  |  |  |                 <div class="space-y-1 text-sm"> | 
					
						
							|  |  |  |  |                     <!-- 一级部门 --> | 
					
						
							|  |  |  |  |                     <div class="tree-node pl-2 py-1 rounded-md cursor-pointer"> | 
					
						
							|  |  |  |  |                         <div class="flex items-center"> | 
					
						
							|  |  |  |  |                             <i class="fas fa-building mr-2 text-gray-500 text-xs"></i> | 
					
						
							|  |  |  |  |                             <span>集团总部</span> | 
					
						
							|  |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                          | 
					
						
							|  |  |  |  |                         <!-- 二级部门 --> | 
					
						
							|  |  |  |  |                         <div class="pl-4 mt-1 space-y-1"> | 
					
						
							|  |  |  |  |                             <div class="tree-node pl-2 py-1 rounded-md cursor-pointer"> | 
					
						
							|  |  |  |  |                                 <div class="flex items-center"> | 
					
						
							|  |  |  |  |                                     <i class="fas fa-users mr-2 text-gray-500 text-xs"></i> | 
					
						
							|  |  |  |  |                                     <span>人力资源部</span> | 
					
						
							|  |  |  |  |                                 </div> | 
					
						
							|  |  |  |  |                                  | 
					
						
							|  |  |  |  |                                 <!-- 三级部门 --> | 
					
						
							|  |  |  |  |                                 <div class="pl-4 mt-1 space-y-1"> | 
					
						
							|  |  |  |  |                                     <div class="tree-node pl-2 py-1 rounded-md cursor-pointer flex items-center"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-user-tie mr-2 text-gray-500 text-xs"></i> | 
					
						
							|  |  |  |  |                                         <span>招聘组</span> | 
					
						
							|  |  |  |  |                                     </div> | 
					
						
							|  |  |  |  |                                     <div class="tree-node pl-2 py-1 rounded-md cursor-pointer flex items-center"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-chart-line mr-2 text-gray-500 text-xs"></i> | 
					
						
							|  |  |  |  |                                         <span>绩效组</span> | 
					
						
							|  |  |  |  |                                     </div> | 
					
						
							|  |  |  |  |                                     <div class="tree-node pl-2 py-1 rounded-md cursor-pointer flex items-center"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-money-bill-wave mr-2 text-gray-500 text-xs"></i> | 
					
						
							|  |  |  |  |                                         <span>薪酬组</span> | 
					
						
							|  |  |  |  |                                     </div> | 
					
						
							|  |  |  |  |                                 </div> | 
					
						
							|  |  |  |  |                             </div> | 
					
						
							|  |  |  |  |                              | 
					
						
							|  |  |  |  |                             <div class="tree-node pl-2 py-1 rounded-md cursor-pointer"> | 
					
						
							|  |  |  |  |                                 <div class="flex items-center"> | 
					
						
							|  |  |  |  |                                     <i class="fas fa-laptop-code mr-2 text-gray-500 text-xs"></i> | 
					
						
							|  |  |  |  |                                     <span>技术研发部</span> | 
					
						
							|  |  |  |  |                                 </div> | 
					
						
							|  |  |  |  |                             </div> | 
					
						
							|  |  |  |  |                              | 
					
						
							|  |  |  |  |                             <div class="tree-node pl-2 py-1 rounded-md cursor-pointer"> | 
					
						
							|  |  |  |  |                                 <div class="flex items-center"> | 
					
						
							|  |  |  |  |                                     <i class="fas fa-shopping-cart mr-2 text-gray-500 text-xs"></i> | 
					
						
							|  |  |  |  |                                     <span>市场营销部</span> | 
					
						
							|  |  |  |  |                                 </div> | 
					
						
							|  |  |  |  |                             </div> | 
					
						
							|  |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                      | 
					
						
							|  |  |  |  |                     <!-- 一级部门 --> | 
					
						
							|  |  |  |  |                     <div class="tree-node pl-2 py-1 rounded-md cursor-pointer"> | 
					
						
							|  |  |  |  |                         <div class="flex items-center"> | 
					
						
							|  |  |  |  |                             <i class="fas fa-building mr-2 text-gray-500 text-xs"></i> | 
					
						
							|  |  |  |  |                             <span>华东分公司</span> | 
					
						
							|  |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                      | 
					
						
							|  |  |  |  |                     <!-- 一级部门 --> | 
					
						
							|  |  |  |  |                     <div class="tree-node pl-2 py-1 rounded-md cursor-pointer"> | 
					
						
							|  |  |  |  |                         <div class="flex items-center"> | 
					
						
							|  |  |  |  |                             <i class="fas fa-building mr-2 text-gray-500 text-xs"></i> | 
					
						
							|  |  |  |  |                             <span>华南分公司</span> | 
					
						
							|  |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  |         </div> | 
					
						
							|  |  |  |  |          | 
					
						
							|  |  |  |  |         <!-- 右侧内容区 --> | 
					
						
							|  |  |  |  |         <div class="w-4/5"> | 
					
						
							|  |  |  |  |             <!-- 公告栏 --> | 
					
						
							|  |  |  |  |             <div class="bg-white rounded-md shadow-sm p-3 mb-4 overflow-hidden"> | 
					
						
							|  |  |  |  |                 <div class="flex items-center"> | 
					
						
							|  |  |  |  |                     <i class="fas fa-bullhorn text-primary mr-2 text-sm"></i> | 
					
						
							|  |  |  |  |                     <div class="marquee whitespace-nowrap text-sm"> | 
					
						
							|  |  |  |  |                         <span class="mr-8">【系统公告】2023年度绩效考核工作将于12月1日正式启动</span> | 
					
						
							|  |  |  |  |                         <span class="mr-8">【重要通知】全体员工请于11月30日前完成个人信息核对</span> | 
					
						
							|  |  |  |  |                         <span class="mr-8">【培训通知】11月25日将举办新员工入职培训,请相关人员准时参加</span> | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  |              | 
					
						
							|  |  |  |  |             <!-- 筛选区 --> | 
					
						
							|  |  |  |  |             <div class="bg-white rounded-md shadow-sm p-4 mb-4"> | 
					
						
							|  |  |  |  |                 <div class="flex items-center flex-wrap gap-4"> | 
					
						
							|  |  |  |  |                     <div class="flex items-center"> | 
					
						
							|  |  |  |  |                         <span class="text-sm text-gray-600 mr-2">时间段:</span> | 
					
						
							|  |  |  |  |                         <div class="relative"> | 
					
						
							|  |  |  |  |                             <input type="text" class="border rounded-button px-3 py-1 text-sm w-40" placeholder="开始日期" /> | 
					
						
							|  |  |  |  |                             <i class="fas fa-calendar-alt absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i> | 
					
						
							|  |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                         <span class="mx-2 text-sm text-gray-400">至</span> | 
					
						
							|  |  |  |  |                         <div class="relative"> | 
					
						
							|  |  |  |  |                             <input type="text" class="border rounded-button px-3 py-1 text-sm w-40" placeholder="结束日期" /> | 
					
						
							|  |  |  |  |                             <i class="fas fa-calendar-alt absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i> | 
					
						
							|  |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                      | 
					
						
							|  |  |  |  |                     <div class="flex items-center"> | 
					
						
							|  |  |  |  |                         <span class="text-sm text-gray-600 mr-2">作业人员:</span> | 
					
						
							|  |  |  |  |                         <div class="relative"> | 
					
						
							|  |  |  |  |                             <input type="text" class="border rounded-button px-3 py-1 text-sm w-32" placeholder="姓名/工号" /> | 
					
						
							|  |  |  |  |                             <i class="fas fa-search absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i> | 
					
						
							|  |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                      | 
					
						
							|  |  |  |  |                     <div class="flex items-center"> | 
					
						
							|  |  |  |  |                         <span class="text-sm text-gray-600 mr-2">作业类型:</span> | 
					
						
							|  |  |  |  |                         <div class="relative"> | 
					
						
							|  |  |  |  |                             <select class="border rounded-button px-3 py-1 text-sm w-32 appearance-none bg-white"> | 
					
						
							|  |  |  |  |                                 <option>全部</option> | 
					
						
							|  |  |  |  |                                 <option>招聘面试</option> | 
					
						
							|  |  |  |  |                                 <option>培训组织</option> | 
					
						
							|  |  |  |  |                                 <option>绩效考核</option> | 
					
						
							|  |  |  |  |                                 <option>薪酬核算</option> | 
					
						
							|  |  |  |  |                             </select> | 
					
						
							|  |  |  |  |                             <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i> | 
					
						
							|  |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                      | 
					
						
							|  |  |  |  |                     <button class="ml-auto bg-primary hover:bg-primary-600 text-white px-3 py-1 rounded-button text-sm whitespace-nowrap"> | 
					
						
							|  |  |  |  |                         <i class="fas fa-filter mr-1 text-xs"></i> | 
					
						
							|  |  |  |  |                         筛选 | 
					
						
							|  |  |  |  |                     </button> | 
					
						
							|  |  |  |  |                      | 
					
						
							|  |  |  |  |                     <button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-button text-sm whitespace-nowrap"> | 
					
						
							|  |  |  |  |                         <i class="fas fa-redo mr-1 text-xs"></i> | 
					
						
							|  |  |  |  |                         重置 | 
					
						
							|  |  |  |  |                     </button> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  |              | 
					
						
							|  |  |  |  |             <!-- 数据表格 --> | 
					
						
							|  |  |  |  |             <div class="bg-white rounded-md shadow-sm overflow-hidden"> | 
					
						
							|  |  |  |  |                 <div class="p-4 border-b flex items-center justify-between"> | 
					
						
							|  |  |  |  |                     <h3 class="text-sm font-semibold text-gray-700">作业明细</h3> | 
					
						
							|  |  |  |  |                     <div class="flex items-center space-x-2"> | 
					
						
							|  |  |  |  |                         <button class="bg-primary hover:bg-primary-600 text-white px-3 py-1 rounded-button text-sm whitespace-nowrap"> | 
					
						
							|  |  |  |  |                             <i class="fas fa-plus mr-1 text-xs"></i> | 
					
						
							|  |  |  |  |                             新增 | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                         <button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-button text-sm whitespace-nowrap"> | 
					
						
							|  |  |  |  |                             <i class="fas fa-download mr-1 text-xs"></i> | 
					
						
							|  |  |  |  |                             导出 | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |                  | 
					
						
							|  |  |  |  |                 <div class="overflow-x-auto"> | 
					
						
							|  |  |  |  |                     <table class="min-w-full divide-y divide-gray-200 text-sm"> | 
					
						
							|  |  |  |  |                         <thead class="bg-gray-50"> | 
					
						
							|  |  |  |  |                             <tr> | 
					
						
							|  |  |  |  |                                 <th class="px-4 py-2 text-left text-gray-500 font-medium">序号</th> | 
					
						
							|  |  |  |  |                                 <th class="px-4 py-2 text-left text-gray-500 font-medium">作业类型</th> | 
					
						
							|  |  |  |  |                                 <th class="px-4 py-2 text-left text-gray-500 font-medium">部门</th> | 
					
						
							|  |  |  |  |                                 <th class="px-4 py-2 text-left text-gray-500 font-medium">作业人员</th> | 
					
						
							|  |  |  |  |                                 <th class="px-4 py-2 text-left text-gray-500 font-medium">开始时间</th> | 
					
						
							|  |  |  |  |                                 <th class="px-4 py-2 text-left text-gray-500 font-medium">结束时间</th> | 
					
						
							|  |  |  |  |                                 <th class="px-4 py-2 text-left text-gray-500 font-medium">持续时长</th> | 
					
						
							|  |  |  |  |                                 <th class="px-4 py-2 text-left text-gray-500 font-medium">作业数量</th> | 
					
						
							|  |  |  |  |                                 <th class="px-4 py-2 text-left text-gray-500 font-medium">操作</th> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                         </thead> | 
					
						
							|  |  |  |  |                         <tbody class="divide-y divide-gray-200"> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">1</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">招聘面试</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部/招聘组</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">张明远</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-01 09:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-01 11:30</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2.5小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">3人</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">培训组织</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">李思雨</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-02 14:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-02 17:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">3小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">1场</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">3</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">绩效考核</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部/绩效组</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">王建国</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-03 10:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-03 12:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">5人</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">4</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">薪酬核算</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部/薪酬组</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">赵晓芳</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-05 09:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-05 18:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">8小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">128人</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">5</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">招聘面试</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部/招聘组</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">张明远</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-08 09:30</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-08 12:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2.5小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">4人</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">6</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">培训组织</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">李思雨</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-10 13:30</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-10 16:30</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">3小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">1场</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">7</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">绩效考核</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部/绩效组</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">王建国</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-12 09:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-12 11:30</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2.5小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">6人</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">8</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">薪酬核算</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部/薪酬组</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">赵晓芳</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-15 09:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-15 17:30</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">8.5小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">135人</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">9</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">招聘面试</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部/招聘组</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">张明远</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-18 09:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-18 11:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2人</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                             <tr class="table-row"> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">10</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">培训组织</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">人力资源部</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">李思雨</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-20 14:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">2023-11-20 17:00</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">3小时</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2">1场</td> | 
					
						
							|  |  |  |  |                                 <td class="px-4 py-2"> | 
					
						
							|  |  |  |  |                                     <button class="text-primary hover:text-primary-600 mr-2"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-edit text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                     <button class="text-red-500 hover:text-red-600"> | 
					
						
							|  |  |  |  |                                         <i class="fas fa-trash-alt text-xs"></i> | 
					
						
							|  |  |  |  |                                     </button> | 
					
						
							|  |  |  |  |                                 </td> | 
					
						
							|  |  |  |  |                             </tr> | 
					
						
							|  |  |  |  |                         </tbody> | 
					
						
							|  |  |  |  |                     </table> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |                  | 
					
						
							|  |  |  |  |                 <!-- 分页 --> | 
					
						
							|  |  |  |  |                 <div class="px-4 py-3 border-t flex items-center justify-between"> | 
					
						
							|  |  |  |  |                     <div class="text-sm text-gray-600"> | 
					
						
							|  |  |  |  |                         显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条,共 <span class="font-medium">128</span> 条记录 | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                     <div class="flex space-x-1"> | 
					
						
							|  |  |  |  |                         <button class="px-3 py-1 border rounded-button text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50" disabled> | 
					
						
							|  |  |  |  |                             上一页 | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                         <button class="px-3 py-1 border rounded-button text-sm bg-primary text-white hover:bg-primary-600"> | 
					
						
							|  |  |  |  |                             1 | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                         <button class="px-3 py-1 border rounded-button text-sm text-gray-700 hover:bg-gray-50"> | 
					
						
							|  |  |  |  |                             2 | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                         <button class="px-3 py-1 border rounded-button text-sm text-gray-700 hover:bg-gray-50"> | 
					
						
							|  |  |  |  |                             3 | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                         <span class="px-3 py-1 text-sm">...</span> | 
					
						
							|  |  |  |  |                         <button class="px-3 py-1 border rounded-button text-sm text-gray-700 hover:bg-gray-50"> | 
					
						
							|  |  |  |  |                             13 | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                         <button class="px-3 py-1 border rounded-button text-sm text-gray-700 hover:bg-gray-50"> | 
					
						
							|  |  |  |  |                             下一页 | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                     </div> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  |         </div> | 
					
						
							|  |  |  |  |     </main> | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |     <!-- 页脚 --> | 
					
						
							|  |  |  |  |     <footer class="bg-gray-800 text-white py-8 w-full"> | 
					
						
							|  |  |  |  |         <div class="container mx-auto px-4"> | 
					
						
							|  |  |  |  |             <div class="grid grid-cols-4 gap-8"> | 
					
						
							|  |  |  |  |                 <div> | 
					
						
							|  |  |  |  |                     <h4 class="text-sm font-semibold mb-4">关于我们</h4> | 
					
						
							|  |  |  |  |                     <ul class="space-y-2 text-xs text-gray-300"> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">公司简介</a></li> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">发展历程</a></li> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">企业文化</a></li> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">联系我们</a></li> | 
					
						
							|  |  |  |  |                     </ul> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |                  | 
					
						
							|  |  |  |  |                 <div> | 
					
						
							|  |  |  |  |                     <h4 class="text-sm font-semibold mb-4">产品服务</h4> | 
					
						
							|  |  |  |  |                     <ul class="space-y-2 text-xs text-gray-300"> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">人力资源系统</a></li> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">薪酬管理系统</a></li> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">绩效考核系统</a></li> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">培训发展平台</a></li> | 
					
						
							|  |  |  |  |                     </ul> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |                  | 
					
						
							|  |  |  |  |                 <div> | 
					
						
							|  |  |  |  |                     <h4 class="text-sm font-semibold mb-4">帮助中心</h4> | 
					
						
							|  |  |  |  |                     <ul class="space-y-2 text-xs text-gray-300"> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">使用指南</a></li> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">常见问题</a></li> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">视频教程</a></li> | 
					
						
							|  |  |  |  |                         <li><a href="#" class="hover:text-white">在线客服</a></li> | 
					
						
							|  |  |  |  |                     </ul> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |                  | 
					
						
							|  |  |  |  |                 <div> | 
					
						
							|  |  |  |  |                     <h4 class="text-sm font-semibold mb-4">联系我们</h4> | 
					
						
							|  |  |  |  |                     <ul class="space-y-2 text-xs text-gray-300"> | 
					
						
							|  |  |  |  |                         <li class="flex items-start"> | 
					
						
							|  |  |  |  |                             <i class="fas fa-map-marker-alt mr-2 mt-1 text-xs"></i> | 
					
						
							|  |  |  |  |                             <span>上海市浦东新区张江高科技园区科苑路88号</span> | 
					
						
							|  |  |  |  |                         </li> | 
					
						
							|  |  |  |  |                         <li class="flex items-center"> | 
					
						
							|  |  |  |  |                             <i class="fas fa-phone-alt mr-2 text-xs"></i> | 
					
						
							|  |  |  |  |                             <span>400-888-8888</span> | 
					
						
							|  |  |  |  |                         </li> | 
					
						
							|  |  |  |  |                         <li class="flex items-center"> | 
					
						
							|  |  |  |  |                             <i class="fas fa-envelope mr-2 text-xs"></i> | 
					
						
							|  |  |  |  |                             <span>hr@company.com</span> | 
					
						
							|  |  |  |  |                         </li> | 
					
						
							|  |  |  |  |                     </ul> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  |              | 
					
						
							|  |  |  |  |             <div class="border-t border-gray-700 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center"> | 
					
						
							|  |  |  |  |                 <div class="text-xs text-gray-400 mb-4 md:mb-0"> | 
					
						
							|  |  |  |  |                     © 2023 人力资源管理系统 版权所有 | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |                 <div class="flex space-x-4"> | 
					
						
							|  |  |  |  |                     <a href="#" class="text-gray-400 hover:text-white"> | 
					
						
							|  |  |  |  |                         <i class="fab fa-weixin text-sm"></i> | 
					
						
							|  |  |  |  |                     </a> | 
					
						
							|  |  |  |  |                     <a href="#" class="text-gray-400 hover:text-white"> | 
					
						
							|  |  |  |  |                         <i class="fab fa-weibo text-sm"></i> | 
					
						
							|  |  |  |  |                     </a> | 
					
						
							|  |  |  |  |                     <a href="#" class="text-gray-400 hover:text-white"> | 
					
						
							|  |  |  |  |                         <i class="fab fa-linkedin-in text-sm"></i> | 
					
						
							|  |  |  |  |                     </a> | 
					
						
							|  |  |  |  |                     <a href="#" class="text-gray-400 hover:text-white"> | 
					
						
							|  |  |  |  |                         <i class="fab fa-github text-sm"></i> | 
					
						
							|  |  |  |  |                     </a> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  |         </div> | 
					
						
							|  |  |  |  |     </footer> | 
					
						
							|  |  |  |  | </body> | 
					
						
							|  |  |  |  | </html> |