You cannot select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
	
	
		
			452 lines
		
	
	
		
			26 KiB
		
	
	
	
		
			HTML
		
	
		
		
			
		
	
	
			452 lines
		
	
	
		
			26 KiB
		
	
	
	
		
			HTML
		
	
| 
											2 months ago
										 | <!DOCTYPE html> | ||
|  | <html lang="zh-CN"> | ||
|  | <head> | ||
|  |     <meta charset="UTF-8"> | ||
|  |     <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|  |     <title>人力资源管理系统</title> | ||
|  |     <script src="https://cdn.tailwindcss.com"></script> | ||
|  |     <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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | ||
|  |     <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-item:hover { | ||
|  |             background-color: rgba(45,92,246,0.1); | ||
|  |         } | ||
|  |         .table-row:hover { | ||
|  |             background-color: #F5F6FA; | ||
|  |         } | ||
|  |         .search-icon { | ||
|  |             display: flex; | ||
|  |             justify-content: center; | ||
|  |             align-items: center; | ||
|  |             width: 16px; | ||
|  |             height: 16px; | ||
|  |         } | ||
|  |         .user-avatar { | ||
|  |             width: 32px; | ||
|  |             height: 32px; | ||
|  |         } | ||
|  |         .ai-icon { | ||
|  |             display: flex; | ||
|  |             justify-content: center; | ||
|  |             align-items: center; | ||
|  |             width: 20px; | ||
|  |             height: 20px; | ||
|  |         } | ||
|  |     </style> | ||
|  | </head> | ||
|  | <body class="bg-white font-sans text-gray-800"> | ||
|  |     <!-- 顶部导航栏 --> | ||
|  | <!--    <header class="w-full bg-primary text-white fixed top-0 left-0 z-50 shadow-md">
 | ||
|  |         <div class="container mx-auto px-4 h-16 flex items-center justify-between"> | ||
|  | 
 | ||
|  |             <div class="flex items-center"> | ||
|  |                 <div class="font-['Pacifico'] text-xl mr-8">人力</div> | ||
|  |                  | ||
|  | 
 | ||
|  |                 <nav class="hidden md:flex space-x-5"> | ||
|  |                     <a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">多维统计</a> | ||
|  |                     <a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">人员管理</a> | ||
|  |                     <a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">组织管理</a> | ||
|  |                     <a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">考勤管理</a> | ||
|  |                     <a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">绩效管理</a> | ||
|  |                     <a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">薪酬管理</a> | ||
|  |                     <a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">知识库</a> | ||
|  |                     <a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">后台管理</a> | ||
|  |                 </nav> | ||
|  |             </div> | ||
|  |              | ||
|  | 
 | ||
|  |             <div class="flex items-center space-x-4"> | ||
|  | 
 | ||
|  |                 <div class="relative hidden md:block"> | ||
|  |                     <input type="text" placeholder="搜索..." class="bg-white bg-opacity-20 text-white text-sm pl-8 pr-4 py-1 rounded-full border-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70 w-48"> | ||
|  |                     <i class="fas fa-search search-icon absolute left-3 top-1/2 transform -translate-y-1/2 text-white text-opacity-70"></i> | ||
|  |                 </div> | ||
|  |                  | ||
|  | 
 | ||
|  |                 <button class="flex items-center space-x-1 bg-white bg-opacity-20 hover:bg-opacity-30 px-3 py-1 rounded-button text-sm whitespace-nowrap"> | ||
|  |                     <i class="fas fa-robot ai-icon text-white"></i> | ||
|  |                     <span>AI助手</span> | ||
|  |                 </button> | ||
|  | 
 | ||
|  |                 <div class="flex items-center space-x-2 cursor-pointer"> | ||
|  |                     <div class="user-avatar rounded-full bg-white text-primary flex items-center justify-center font-semibold">张</div> | ||
|  |                 </div> | ||
|  |             </div> | ||
|  |         </div> | ||
|  |     </header> --> | ||
|  | 
 | ||
|  |     <!-- 主体内容 --> | ||
|  |     <main class="container mx-auto px-4 pb-10"> | ||
|  |         <div class="flex mt-6"> | ||
|  |             <!-- 左侧组织架构树 --> | ||
|  |             <div class="w-1/5 pr-4"> | ||
|  |                 <div class="bg-secondary rounded-md shadow-sm p-4 h-full"> | ||
|  |                     <h3 class="text-sm font-semibold mb-4 text-gray-700">组织架构</h3> | ||
|  |                     <div class="space-y-1"> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center"> | ||
|  |                             <i class="fas fa-building mr-2 text-gray-500"></i> | ||
|  |                             <span>集团公司</span> | ||
|  |                         </div> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-4"> | ||
|  |                             <i class="fas fa-sitemap mr-2 text-gray-500"></i> | ||
|  |                             <span>技术中心</span> | ||
|  |                         </div> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8 bg-primary bg-opacity-10 text-primary"> | ||
|  |                             <i class="fas fa-code-branch mr-2"></i> | ||
|  |                             <span>研发部</span> | ||
|  |                         </div> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8"> | ||
|  |                             <i class="fas fa-code-branch mr-2 text-gray-500"></i> | ||
|  |                             <span>测试部</span> | ||
|  |                         </div> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-4"> | ||
|  |                             <i class="fas fa-sitemap mr-2 text-gray-500"></i> | ||
|  |                             <span>市场中心</span> | ||
|  |                         </div> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8"> | ||
|  |                             <i class="fas fa-code-branch mr-2 text-gray-500"></i> | ||
|  |                             <span>市场部</span> | ||
|  |                         </div> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8"> | ||
|  |                             <i class="fas fa-code-branch mr-2 text-gray-500"></i> | ||
|  |                             <span>品牌部</span> | ||
|  |                         </div> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-4"> | ||
|  |                             <i class="fas fa-sitemap mr-2 text-gray-500"></i> | ||
|  |                             <span>运营中心</span> | ||
|  |                         </div> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8"> | ||
|  |                             <i class="fas fa-code-branch mr-2 text-gray-500"></i> | ||
|  |                             <span>客服部</span> | ||
|  |                         </div> | ||
|  |                         <div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8"> | ||
|  |                             <i class="fas fa-code-branch mr-2 text-gray-500"></i> | ||
|  |                             <span>运营部</span> | ||
|  |                         </div> | ||
|  |                     </div> | ||
|  |                 </div> | ||
|  |             </div> | ||
|  |              | ||
|  |             <!-- 右侧内容区 --> | ||
|  |             <div class="w-4/5"> | ||
|  |                 <!-- 筛选区域 --> | ||
|  |                 <div class="bg-white rounded-md shadow-sm p-4 mb-4"> | ||
|  |                     <h3 class="text-sm font-semibold mb-4 text-gray-700">薪酬查询</h3> | ||
|  |                     <div class="grid grid-cols-4 gap-4"> | ||
|  |                         <div> | ||
|  |                             <label class="block text-xs text-gray-500 mb-1">姓名</label> | ||
|  |                             <input type="text" class="w-full border border-gray-200 rounded-md px-3 py-1 text-sm focus:ring-primary focus:border-primary"> | ||
|  |                         </div> | ||
|  |                         <div> | ||
|  |                             <label class="block text-xs text-gray-500 mb-1">电话</label> | ||
|  |                             <input type="text" class="w-full border border-gray-200 rounded-md px-3 py-1 text-sm focus:ring-primary focus:border-primary"> | ||
|  |                         </div> | ||
|  |                         <div> | ||
|  |                             <label class="block text-xs text-gray-500 mb-1">月份</label> | ||
|  |                             <div class="relative"> | ||
|  |                                 <input type="text" class="w-full border border-gray-200 rounded-md px-3 py-1 text-sm focus:ring-primary focus:border-primary" placeholder="选择月份"> | ||
|  |                                 <i class="fas fa-calendar-alt absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i> | ||
|  |                             </div> | ||
|  |                         </div> | ||
|  |                         <div class="flex items-end"> | ||
|  |                             <button class="bg-primary text-white px-4 py-1 rounded-button text-sm whitespace-nowrap hover:bg-opacity-90">查询</button> | ||
|  |                             <button class="ml-2 border border-gray-200 px-4 py-1 rounded-button text-sm whitespace-nowrap hover:bg-gray-50">重置</button> | ||
|  |                         </div> | ||
|  |                     </div> | ||
|  |                 </div> | ||
|  |                  | ||
|  |                 <!-- 薪酬列表 --> | ||
|  |                 <div class="bg-white rounded-md shadow-sm overflow-hidden"> | ||
|  |                     <div class="overflow-x-auto"> | ||
|  |                         <table class="min-w-full divide-y divide-gray-200 text-sm"> | ||
|  |                             <thead class="bg-secondary"> | ||
|  |                                 <tr> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">序号</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">姓名</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">性别</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">年龄</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">部门</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">岗位</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">月份</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">税前工资</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">税后工资</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">基本工资</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">浮动工资</th> | ||
|  |                                     <th class="px-4 py-2 text-left font-medium text-gray-700">详情</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">32</td> | ||
|  |                                     <td class="px-4 py-2">研发部</td> | ||
|  |                                     <td class="px-4 py-2">高级工程师</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥28,500</td> | ||
|  |                                     <td class="px-4 py-2">¥24,225</td> | ||
|  |                                     <td class="px-4 py-2">¥18,000</td> | ||
|  |                                     <td class="px-4 py-2">¥10,500</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</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">28</td> | ||
|  |                                     <td class="px-4 py-2">市场部</td> | ||
|  |                                     <td class="px-4 py-2">市场经理</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥25,800</td> | ||
|  |                                     <td class="px-4 py-2">¥22,170</td> | ||
|  |                                     <td class="px-4 py-2">¥16,000</td> | ||
|  |                                     <td class="px-4 py-2">¥9,800</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</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">45</td> | ||
|  |                                     <td class="px-4 py-2">技术中心</td> | ||
|  |                                     <td class="px-4 py-2">技术总监</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥42,000</td> | ||
|  |                                     <td class="px-4 py-2">¥34,860</td> | ||
|  |                                     <td class="px-4 py-2">¥25,000</td> | ||
|  |                                     <td class="px-4 py-2">¥17,000</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</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">26</td> | ||
|  |                                     <td class="px-4 py-2">运营部</td> | ||
|  |                                     <td class="px-4 py-2">运营专员</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥15,000</td> | ||
|  |                                     <td class="px-4 py-2">¥13,350</td> | ||
|  |                                     <td class="px-4 py-2">¥10,000</td> | ||
|  |                                     <td class="px-4 py-2">¥5,000</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</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">35</td> | ||
|  |                                     <td class="px-4 py-2">测试部</td> | ||
|  |                                     <td class="px-4 py-2">测试经理</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥22,500</td> | ||
|  |                                     <td class="px-4 py-2">¥19,575</td> | ||
|  |                                     <td class="px-4 py-2">¥15,000</td> | ||
|  |                                     <td class="px-4 py-2">¥7,500</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</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">30</td> | ||
|  |                                     <td class="px-4 py-2">品牌部</td> | ||
|  |                                     <td class="px-4 py-2">品牌主管</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥19,800</td> | ||
|  |                                     <td class="px-4 py-2">¥17,406</td> | ||
|  |                                     <td class="px-4 py-2">¥12,000</td> | ||
|  |                                     <td class="px-4 py-2">¥7,800</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</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">29</td> | ||
|  |                                     <td class="px-4 py-2">研发部</td> | ||
|  |                                     <td class="px-4 py-2">前端工程师</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥20,000</td> | ||
|  |                                     <td class="px-4 py-2">¥17,600</td> | ||
|  |                                     <td class="px-4 py-2">¥13,000</td> | ||
|  |                                     <td class="px-4 py-2">¥7,000</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</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">27</td> | ||
|  |                                     <td class="px-4 py-2">客服部</td> | ||
|  |                                     <td class="px-4 py-2">客服主管</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥16,500</td> | ||
|  |                                     <td class="px-4 py-2">¥14,685</td> | ||
|  |                                     <td class="px-4 py-2">¥11,000</td> | ||
|  |                                     <td class="px-4 py-2">¥5,500</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</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">33</td> | ||
|  |                                     <td class="px-4 py-2">研发部</td> | ||
|  |                                     <td class="px-4 py-2">后端工程师</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥23,000</td> | ||
|  |                                     <td class="px-4 py-2">¥19,910</td> | ||
|  |                                     <td class="px-4 py-2">¥15,000</td> | ||
|  |                                     <td class="px-4 py-2">¥8,000</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</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">31</td> | ||
|  |                                     <td class="px-4 py-2">市场部</td> | ||
|  |                                     <td class="px-4 py-2">市场策划</td> | ||
|  |                                     <td class="px-4 py-2">2023-10</td> | ||
|  |                                     <td class="px-4 py-2">¥18,500</td> | ||
|  |                                     <td class="px-4 py-2">¥16,315</td> | ||
|  |                                     <td class="px-4 py-2">¥12,000</td> | ||
|  |                                     <td class="px-4 py-2">¥6,500</td> | ||
|  |                                     <td class="px-4 py-2"> | ||
|  |                                         <button class="text-primary hover:underline">查看</button> | ||
|  |                                     </td> | ||
|  |                                 </tr> | ||
|  |                             </tbody> | ||
|  |                         </table> | ||
|  |                     </div> | ||
|  |                      | ||
|  |                     <!-- 分页 --> | ||
|  |                     <div class="px-4 py-3 flex items-center justify-between border-t border-gray-200"> | ||
|  |                         <div class="text-xs text-gray-500"> | ||
|  |                             显示 1 到 10 条,共 128 条记录 | ||
|  |                         </div> | ||
|  |                         <div class="flex space-x-1"> | ||
|  |                             <button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">«</button> | ||
|  |                             <button class="px-3 py-1 border border-gray-200 rounded-md text-sm bg-primary text-white">1</button> | ||
|  |                             <button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">2</button> | ||
|  |                             <button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">3</button> | ||
|  |                             <button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">...</button> | ||
|  |                             <button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">13</button> | ||
|  |                             <button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">»</button> | ||
|  |                         </div> | ||
|  |                     </div> | ||
|  |                 </div> | ||
|  |             </div> | ||
|  |         </div> | ||
|  |     </main> | ||
|  | 
 | ||
|  |     <!-- 底部页脚 --> | ||
|  |     <footer class="w-full bg-secondary border-t border-gray-200 mt-10"> | ||
|  |         <div class="container mx-auto px-4 py-8"> | ||
|  |             <div class="grid grid-cols-4 gap-8"> | ||
|  |                 <div> | ||
|  |                     <h4 class="text-sm font-semibold mb-4">关于我们</h4> | ||
|  |                     <p class="text-xs text-gray-600 mb-4">人力科技是一家专注于企业人力资源数字化解决方案的高科技企业,致力于为企业提供专业、高效的人力资源管理服务。</p> | ||
|  |                     <div class="flex space-x-4"> | ||
|  |                         <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-weixin"></i></a> | ||
|  |                         <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-weibo"></i></a> | ||
|  |                         <a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-linkedin"></i></a> | ||
|  |                     </div> | ||
|  |                 </div> | ||
|  |                 <div> | ||
|  |                     <h4 class="text-sm font-semibold mb-4">产品服务</h4> | ||
|  |                     <ul class="space-y-2 text-xs text-gray-600"> | ||
|  |                         <li><a href="#" class="hover:text-primary">人力资源管理系统</a></li> | ||
|  |                         <li><a href="#" class="hover:text-primary">薪酬计算系统</a></li> | ||
|  |                         <li><a href="#" class="hover:text-primary">绩效考核系统</a></li> | ||
|  |                         <li><a href="#" class="hover:text-primary">招聘管理系统</a></li> | ||
|  |                     </ul> | ||
|  |                 </div> | ||
|  |                 <div> | ||
|  |                     <h4 class="text-sm font-semibold mb-4">帮助中心</h4> | ||
|  |                     <ul class="space-y-2 text-xs text-gray-600"> | ||
|  |                         <li><a href="#" class="hover:text-primary">使用文档</a></li> | ||
|  |                         <li><a href="#" class="hover:text-primary">视频教程</a></li> | ||
|  |                         <li><a href="#" class="hover:text-primary">常见问题</a></li> | ||
|  |                         <li><a href="#" class="hover:text-primary">在线客服</a></li> | ||
|  |                     </ul> | ||
|  |                 </div> | ||
|  |                 <div> | ||
|  |                     <h4 class="text-sm font-semibold mb-4">联系我们</h4> | ||
|  |                     <ul class="space-y-2 text-xs text-gray-600"> | ||
|  |                         <li class="flex items-start"> | ||
|  |                             <i class="fas fa-map-marker-alt mr-2 mt-0.5"></i> | ||
|  |                             <span>北京市海淀区中关村软件园二期</span> | ||
|  |                         </li> | ||
|  |                         <li class="flex items-center"> | ||
|  |                             <i class="fas fa-phone-alt mr-2"></i> | ||
|  |                             <span>400-888-8888</span> | ||
|  |                         </li> | ||
|  |                         <li class="flex items-center"> | ||
|  |                             <i class="fas fa-envelope mr-2"></i> | ||
|  |                             <span>service@hrtech.com</span> | ||
|  |                         </li> | ||
|  |                     </ul> | ||
|  |                 </div> | ||
|  |             </div> | ||
|  |             <div class="border-t border-gray-200 mt-8 pt-6 text-center text-xs text-gray-500"> | ||
|  |                 <p>© 2023 人力科技 版权所有 京ICP备12345678号</p> | ||
|  |             </div> | ||
|  |         </div> | ||
|  |     </footer> | ||
|  | </body> | ||
|  | </html> |