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

3 weeks 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">&laquo;</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">&raquo;</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>