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
<!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>
|