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.
367 lines
20 KiB
HTML
367 lines
20 KiB
HTML
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<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>
|
|
.fa-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.scroll-container {
|
|
scrollbar-width: none;
|
|
}
|
|
.scroll-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-[1024px] bg-secondary font-sans text-sm text-gray-800">
|
|
|
|
<!-- <header class="w-full h-[60px] bg-primary text-white fixed top-0 z-50 shadow-md">
|
|
<div class="w-[1200px] h-full mx-auto flex items-center justify-between">
|
|
|
|
<div class="flex items-center">
|
|
<span class="font-['Pacifico'] text-2xl mr-10">人力</span>
|
|
</div>
|
|
|
|
|
|
<nav class="flex-1 flex items-center">
|
|
<ul class="flex space-x-6">
|
|
<li><a href="#" class="hover:text-gray-200 transition">多维统计</a></li>
|
|
<li><a href="#" class="hover:text-gray-200 transition">人员管理</a></li>
|
|
<li><a href="#" class="hover:text-gray-200 transition">组织管理</a></li>
|
|
<li><a href="#" class="hover:text-gray-200 transition font-semibold">考勤管理</a></li>
|
|
<li><a href="#" class="hover:text-gray-200 transition">绩效管理</a></li>
|
|
<li><a href="#" class="hover:text-gray-200 transition">薪酬管理</a></li>
|
|
<li><a href="#" class="hover:text-gray-200 transition">知识库</a></li>
|
|
<li><a href="#" class="hover:text-gray-200 transition">后台管理</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
<div class="flex items-center space-x-4">
|
|
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索..." class="pl-8 pr-3 py-1 rounded-button bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-1 focus:ring-white w-[180px]">
|
|
<i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 fa-icon"></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 transition">
|
|
<i class="fas fa-robot fa-icon"></i>
|
|
<span>AI助手</span>
|
|
</button>
|
|
|
|
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center overflow-hidden">
|
|
<i class="fas fa-user fa-icon text-primary"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header> -->
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="w-[1200px] mx-auto px-4 py-6">
|
|
<div class="flex space-x-4">
|
|
<!-- 左侧组织架构树 -->
|
|
<div class="w-1/5 bg-white rounded-md shadow-sm p-4">
|
|
<h2 class="font-medium text-gray-700 mb-4">组织架构</h2>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
<i class="fas fa-building fa-icon text-gray-500"></i>
|
|
<span class="hover:text-primary">公司总部</span>
|
|
</div>
|
|
<div class="ml-6 space-y-2">
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
<span class="hover:text-primary">人力资源部</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
<span class="hover:text-primary">财务部</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
<span class="hover:text-primary">技术研发部</span>
|
|
</div>
|
|
<div class="ml-6 space-y-2">
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
<i class="fas fa-user fa-icon text-gray-500"></i>
|
|
<span class="hover:text-primary">前端开发组</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
<i class="fas fa-user fa-icon text-gray-500"></i>
|
|
<span class="hover:text-primary">后端开发组</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
<i class="fas fa-user fa-icon text-gray-500"></i>
|
|
<span class="hover:text-primary">测试组</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
<span class="hover:text-primary">产品部</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
<span class="hover:text-primary">市场部</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧考勤管理区 -->
|
|
<div class="w-4/5 bg-white rounded-md shadow-sm p-4">
|
|
<h2 class="font-medium text-gray-700 mb-4">考勤管理</h2>
|
|
|
|
<!-- 筛选区 -->
|
|
<div class="grid grid-cols-4 gap-4 mb-6">
|
|
<div>
|
|
<label class="block text-gray-600 mb-1">员工ID</label>
|
|
<input type="text" class="w-full border rounded-button px-3 py-1 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
</div>
|
|
<div>
|
|
<label class="block text-gray-600 mb-1">员工姓名</label>
|
|
<input type="text" class="w-full border rounded-button px-3 py-1 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
</div>
|
|
<div>
|
|
<label class="block text-gray-600 mb-1">日期范围</label>
|
|
<div class="relative">
|
|
<input type="text" class="w-full border rounded-button px-3 py-1 focus:outline-none focus:ring-1 focus:ring-primary" placeholder="选择日期">
|
|
<i class="fas fa-calendar-alt absolute right-2 top-1/2 transform -translate-y-1/2 fa-icon text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-gray-600 mb-1">考勤状态</label>
|
|
<div class="relative">
|
|
<select class="w-full border rounded-button px-3 py-1 appearance-none focus:outline-none focus:ring-1 focus:ring-primary">
|
|
<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 fa-icon text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="flex justify-between mb-4">
|
|
<div class="flex space-x-2">
|
|
<button class="bg-primary text-white px-3 py-1 rounded-button hover:bg-opacity-90 transition">
|
|
<i class="fas fa-search fa-icon mr-1"></i>
|
|
<span>查询</span>
|
|
</button>
|
|
<button class="border border-gray-300 px-3 py-1 rounded-button hover:bg-gray-50 transition">
|
|
<i class="fas fa-redo fa-icon mr-1"></i>
|
|
<span>重置</span>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button class="bg-primary text-white px-3 py-1 rounded-button hover:bg-opacity-90 transition">
|
|
<i class="fas fa-download fa-icon mr-1"></i>
|
|
<span>导出</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-secondary">
|
|
<tr>
|
|
<th class="px-4 py-2 text-left">员工ID</th>
|
|
<th class="px-4 py-2 text-left">员工姓名</th>
|
|
<th class="px-4 py-2 text-left">日期</th>
|
|
<th class="px-4 py-2 text-left">单位</th>
|
|
<th class="px-4 py-2 text-left">部门</th>
|
|
<th class="px-4 py-2 text-left">考勤状态</th>
|
|
<th class="px-4 py-2 text-left">上班时间</th>
|
|
<th class="px-4 py-2 text-left">下班时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-2">10001</td>
|
|
<td class="px-4 py-2">张伟</td>
|
|
<td class="px-4 py-2">2023-06-01</td>
|
|
<td class="px-4 py-2">总部</td>
|
|
<td class="px-4 py-2">技术研发部</td>
|
|
<td class="px-4 py-2 text-green-500">正常</td>
|
|
<td class="px-4 py-2">09:00:00</td>
|
|
<td class="px-4 py-2">18:00:00</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-2">10002</td>
|
|
<td class="px-4 py-2">王芳</td>
|
|
<td class="px-4 py-2">2023-06-01</td>
|
|
<td class="px-4 py-2">总部</td>
|
|
<td class="px-4 py-2">人力资源部</td>
|
|
<td class="px-4 py-2 text-yellow-500">迟到</td>
|
|
<td class="px-4 py-2">09:30:00</td>
|
|
<td class="px-4 py-2">18:00:00</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-2">10003</td>
|
|
<td class="px-4 py-2">李娜</td>
|
|
<td class="px-4 py-2">2023-06-01</td>
|
|
<td class="px-4 py-2">总部</td>
|
|
<td class="px-4 py-2">财务部</td>
|
|
<td class="px-4 py-2 text-green-500">正常</td>
|
|
<td class="px-4 py-2">09:00:00</td>
|
|
<td class="px-4 py-2">18:00:00</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-2">10004</td>
|
|
<td class="px-4 py-2">赵明</td>
|
|
<td class="px-4 py-2">2023-06-01</td>
|
|
<td class="px-4 py-2">总部</td>
|
|
<td class="px-4 py-2">产品部</td>
|
|
<td class="px-4 py-2 text-green-500">正常</td>
|
|
<td class="px-4 py-2">09:00:00</td>
|
|
<td class="px-4 py-2">18:00:00</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-2">10005</td>
|
|
<td class="px-4 py-2">刘强</td>
|
|
<td class="px-4 py-2">2023-06-01</td>
|
|
<td class="px-4 py-2">总部</td>
|
|
<td class="px-4 py-2">市场部</td>
|
|
<td class="px-4 py-2 text-red-500">早退</td>
|
|
<td class="px-4 py-2">09:00:00</td>
|
|
<td class="px-4 py-2">17:30:00</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-2">10006</td>
|
|
<td class="px-4 py-2">陈静</td>
|
|
<td class="px-4 py-2">2023-06-01</td>
|
|
<td class="px-4 py-2">总部</td>
|
|
<td class="px-4 py-2">技术研发部</td>
|
|
<td class="px-4 py-2 text-green-500">正常</td>
|
|
<td class="px-4 py-2">09:00:00</td>
|
|
<td class="px-4 py-2">18:00:00</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-2">10007</td>
|
|
<td class="px-4 py-2">杨光</td>
|
|
<td class="px-4 py-2">2023-06-01</td>
|
|
<td class="px-4 py-2">总部</td>
|
|
<td class="px-4 py-2">人力资源部</td>
|
|
<td class="px-4 py-2 text-green-500">正常</td>
|
|
<td class="px-4 py-2">09:00:00</td>
|
|
<td class="px-4 py-2">18:00:00</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-2">10008</td>
|
|
<td class="px-4 py-2">周涛</td>
|
|
<td class="px-4 py-2">2023-06-01</td>
|
|
<td class="px-4 py-2">总部</td>
|
|
<td class="px-4 py-2">财务部</td>
|
|
<td class="px-4 py-2 text-green-500">正常</td>
|
|
<td class="px-4 py-2">09:00:00</td>
|
|
<td class="px-4 py-2">18:00:00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="flex justify-between items-center mt-4">
|
|
<div class="text-gray-500">
|
|
显示 1 到 8 条，共 120 条记录
|
|
</div>
|
|
<div class="flex space-x-1">
|
|
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">
|
|
<i class="fas fa-angle-left fa-icon"></i>
|
|
</button>
|
|
<button class="w-8 h-8 border rounded-button flex items-center justify-center bg-primary text-white">1</button>
|
|
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">2</button>
|
|
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">3</button>
|
|
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">4</button>
|
|
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">5</button>
|
|
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">
|
|
<i class="fas fa-angle-right fa-icon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="w-full bg-gray-800 text-gray-400 py-6">
|
|
<div class="w-[1200px] mx-auto">
|
|
<div class="grid grid-cols-3 gap-8">
|
|
<div>
|
|
<h3 class="text-white text-sm font-medium mb-3">关于我们</h3>
|
|
<p class="text-xs leading-6">人力资源管理系统致力于为企业提供专业的人力资源管理解决方案，帮助企业提升管理效率，优化人力资源配置。</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white text-sm font-medium mb-3">快速链接</h3>
|
|
<ul class="space-y-2 text-xs">
|
|
<li><a href="#" class="hover:text-white transition">帮助中心</a></li>
|
|
<li><a href="#" class="hover:text-white transition">API文档</a></li>
|
|
<li><a href="#" class="hover:text-white transition">系统更新</a></li>
|
|
<li><a href="#" class="hover:text-white transition">联系我们</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-white text-sm font-medium mb-3">联系方式</h3>
|
|
<ul class="space-y-2 text-xs">
|
|
<li class="flex items-center">
|
|
<i class="fas fa-phone fa-icon mr-2"></i>
|
|
<span>400-888-8888</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fas fa-envelope fa-icon mr-2"></i>
|
|
<span>service@hrms.com</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fas fa-map-marker-alt fa-icon mr-2"></i>
|
|
<span>北京市海淀区科技园路88号</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-700 mt-6 pt-4 text-xs text-center">
|
|
<p>© 2023 人力资源管理系统 版权所有 | 京ICP备12345678号</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|