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.

573 lines
32 KiB
HTML

2 days 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>
<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>