|
|
<!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 src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></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>
|
|
|
.font-pacifico {
|
|
|
font-family: 'Pacifico', serif;
|
|
|
}
|
|
|
|
|
|
.icon-center {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.scroll-container {
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.scroll-content {
|
|
|
display: inline-block;
|
|
|
animation: scroll 20s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes scroll {
|
|
|
0% {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
input[type="number"]::-webkit-outer-spin-button,
|
|
|
input[type="number"]::-webkit-inner-spin-button {
|
|
|
-webkit-appearance: none;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
input[type="number"] {
|
|
|
-moz-appearance: textfield;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body class="min-h-[1024px] bg-secondary flex flex-col">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<!-- <header class="w-full bg-primary shadow-sm">
|
|
|
<div class="container mx-auto px-4 h-[60px] flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<div class="text-xs bg-white text-primary px-3 py-1 rounded-button">人力</div>
|
|
|
</div>
|
|
|
<nav class="flex-1 px-8">
|
|
|
<ul class="flex space-x-4 whitespace-nowrap">
|
|
|
<li><a href="#"
|
|
|
class="text-xs text-white hover:bg-blue-600 px-3 py-1 rounded-button font-medium">多维统计</a>
|
|
|
</li>
|
|
|
<li><a href="#" class="text-xs text-white bg-blue-600 px-3 py-1 rounded-button font-medium">人员管理</a>
|
|
|
</li>
|
|
|
<li><a href="#"
|
|
|
class="text-xs text-white hover:bg-blue-600 px-3 py-1 rounded-button font-medium">组织管理</a>
|
|
|
</li>
|
|
|
<li><a href="#"
|
|
|
class="text-xs text-white hover:bg-blue-600 px-3 py-1 rounded-button font-medium">考勤管理</a>
|
|
|
</li>
|
|
|
<li><a href="#"
|
|
|
class="text-xs text-white hover:bg-blue-600 px-3 py-1 rounded-button font-medium">绩效管理</a>
|
|
|
</li>
|
|
|
<li><a href="#"
|
|
|
class="text-xs text-white hover:bg-blue-600 px-3 py-1 rounded-button font-medium">薪酬管理</a>
|
|
|
</li>
|
|
|
<li><a href="#"
|
|
|
class="text-xs text-white hover:bg-blue-600 px-3 py-1 rounded-button font-medium">知识库</a>
|
|
|
</li>
|
|
|
<li><a href="#"
|
|
|
class="text-xs text-white hover:bg-blue-600 px-3 py-1 rounded-button font-medium">后台管理</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</nav>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="relative">
|
|
|
<input type="text" placeholder="搜索..."
|
|
|
class="pl-10 pr-4 py-2 text-sm bg-white rounded-button w-32 focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent">
|
|
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
|
|
|
</div>
|
|
|
|
|
|
<div class="relative group">
|
|
|
<div
|
|
|
class="w-8 h-8 rounded-full bg-white text-primary flex items-center justify-center cursor-pointer">
|
|
|
<i class="fas fa-user"></i>
|
|
|
</div>
|
|
|
<div
|
|
|
class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
|
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
|
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">系统设置</a>
|
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
class="bg-white text-primary px-3 py-1 rounded-button flex items-center space-x-2 hover:bg-gray-100 transition text-sm">
|
|
|
<i class="fas fa-robot"></i>
|
|
|
<span>AI助手</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header> -->
|
|
|
<!-- 公告栏 -->
|
|
|
<div class="w-full bg-blue-50 py-1">
|
|
|
<div class="container mx-auto px-4">
|
|
|
<div class="flex items-center text-xs text-gray-700">
|
|
|
<span class="font-medium text-primary mr-3">公告：</span>
|
|
|
<div class="scroll-container w-full">
|
|
|
<div class="scroll-content">
|
|
|
<span>2023年度员工体检将于11月20日开始，请各部门安排好时间。</span>
|
|
|
<span class="ml-8">公司年会定于12月28日举行，各部门请提前准备节目。</span>
|
|
|
<span class="ml-8">新版本人力资源系统已上线，如有问题请联系IT支持。</span>
|
|
|
<span class="ml-8">2024年春节假期安排已发布，请查看公司公告。</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 主体内容 -->
|
|
|
<main class="flex-1 container mx-auto px-4 py-6">
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-6">人员管理</h2>
|
|
|
<div class="flex space-x-6">
|
|
|
<!-- 左侧组织架构树 -->
|
|
|
<div class="w-[20%] bg-white border border-gray-200 rounded-lg p-4">
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
|
<h3 class="font-medium text-gray-700">组织架构</h3>
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-gray-500 hover:text-primary">
|
|
|
<i class="fas fa-sync-alt"></i>
|
|
|
</button>
|
|
|
<button class="text-gray-500 hover:text-primary">
|
|
|
<i class="fas fa-expand"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="overflow-y-auto h-[600px]">
|
|
|
<ul class="space-y-1">
|
|
|
<li>
|
|
|
<div class="flex items-center justify-between p-2 bg-blue-50 rounded-button">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-building mr-2 text-gray-600"></i>
|
|
|
<span class="text-sm font-medium">飞利信集团</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-500"></i>
|
|
|
</div>
|
|
|
<ul class="ml-6 mt-1 space-y-1">
|
|
|
<li>
|
|
|
<div
|
|
|
class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-button">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap mr-2 text-gray-600"></i>
|
|
|
<span>人力资源部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-500"></i>
|
|
|
</div>
|
|
|
<ul class="ml-6 mt-1 space-y-1">
|
|
|
<li class="flex items-center p-2 hover:bg-gray-50 rounded-button">
|
|
|
<i class="fas fa-users mr-2 text-gray-600"></i>
|
|
|
<span class="text-primary font-medium">招聘组</span>
|
|
|
</li>
|
|
|
<li class="flex items-center p-2 hover:bg-gray-50 rounded-button">
|
|
|
<i class="fas fa-chart-line mr-2 text-gray-600"></i>
|
|
|
<span>绩效组</span>
|
|
|
</li>
|
|
|
<li class="flex items-center p-2 hover:bg-gray-50 rounded-button">
|
|
|
<i class="fas fa-money-bill-wave mr-2 text-gray-600"></i>
|
|
|
<span>薪酬组</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div
|
|
|
class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-button">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap mr-2 text-gray-600"></i>
|
|
|
<span>技术研发部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-500"></i>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div
|
|
|
class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-button">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap mr-2 text-gray-600"></i>
|
|
|
<span>市场营销部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-500"></i>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div
|
|
|
class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-button">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap mr-2 text-gray-600"></i>
|
|
|
<span>财务部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-500"></i>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右侧人员信息区 -->
|
|
|
<div class="w-[80%]">
|
|
|
<!-- 筛选条件 -->
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-6">
|
|
|
<div class="grid grid-cols-3 gap-4">
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
|
|
|
<input type="text"
|
|
|
class="w-full border rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">电话</label>
|
|
|
<input type="text"
|
|
|
class="w-full border rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">身份证号</label>
|
|
|
<input type="text"
|
|
|
class="w-full border rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">部门</label>
|
|
|
<div class="relative">
|
|
|
<input type="text"
|
|
|
class="w-full border rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
|
<i
|
|
|
class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">岗位</label>
|
|
|
<div class="relative">
|
|
|
<input type="text"
|
|
|
class="w-full border rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
|
<i
|
|
|
class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-end space-x-2">
|
|
|
<button
|
|
|
class="bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-600 transition">搜索</button>
|
|
|
<button
|
|
|
class="border border-gray-300 text-gray-700 px-4 py-2 rounded-button hover:bg-gray-50 transition">重置</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 操作按钮 -->
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
|
<div class="text-sm text-gray-600">共 356 条记录</div>
|
|
|
<div class="flex space-x-2">
|
|
|
<button
|
|
|
class="border border-gray-300 text-gray-700 px-3 py-1 rounded-button text-sm hover:bg-gray-50 transition">
|
|
|
<i class="fas fa-download mr-1"></i>导出
|
|
|
</button>
|
|
|
<button
|
|
|
class="bg-primary text-white px-3 py-1 rounded-button text-sm hover:bg-blue-600 transition">
|
|
|
<i class="fas fa-plus mr-1"></i>新增人员
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 人员表格 -->
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="min-w-full bg-white border border-gray-200 rounded-lg overflow-hidden">
|
|
|
<thead class="bg-gray-50">
|
|
|
<tr>
|
|
|
<th
|
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
序号</th>
|
|
|
<th
|
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
姓名</th>
|
|
|
<th
|
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
性别</th>
|
|
|
<th
|
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
年龄</th>
|
|
|
<th
|
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
电话</th>
|
|
|
<th
|
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
部门</th>
|
|
|
<th
|
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
岗位</th>
|
|
|
<th
|
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="divide-y divide-gray-200">
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">1</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">张明远</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">男</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">32</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">138****5678</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">人力资源部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">招聘经理</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">2</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">李静怡</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">女</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">28</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">159****2345</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">技术研发部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">前端工程师</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">3</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">王建国</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">男</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">45</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">186****7890</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">市场营销部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">市场总监</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">4</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">赵雪梅</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">女</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">36</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">137****4567</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">财务部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">财务主管</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">5</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">刘志强</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">男</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">29</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">188****3456</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">技术研发部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">后端工程师</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">6</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">陈雨桐</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">女</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">27</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">135****6789</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">人力资源部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">薪酬专员</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">7</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">孙伟</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">男</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">31</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">139****1234</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">市场营销部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">市场经理</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">8</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">周晓琳</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">女</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">33</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">158****4567</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">财务部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">会计</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">9</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">吴刚</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">男</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">40</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">136****7890</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">技术研发部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">技术总监</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">10</td>
|
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">郑美丽</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">女</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">26</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">187****2345</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">人力资源部</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">招聘专员</td>
|
|
|
<td class="px-4 py-3 text-sm text-gray-700">
|
|
|
<div class="flex space-x-2">
|
|
|
<button class="text-blue-500 hover:text-blue-700">
|
|
|
<i class="fas fa-edit"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<!-- 分页 -->
|
|
|
<div class="flex items-center justify-between mt-4">
|
|
|
<div class="text-sm text-gray-600">显示 1 到 10 条，共 356 条记录</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">上一页</button>
|
|
|
<button class="px-3 py-1 border rounded-button text-sm bg-primary text-white">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 text-gray-700">...</span>
|
|
|
<button
|
|
|
class="px-3 py-1 border rounded-button text-sm text-gray-700 hover:bg-gray-50">36</button>
|
|
|
<button
|
|
|
class="px-3 py-1 border rounded-button text-sm text-gray-700 hover:bg-gray-50">下一页</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
<!-- 页脚 -->
|
|
|
<footer class="w-full bg-gray-800 text-white py-6">
|
|
|
<div class="container mx-auto px-4">
|
|
|
<div class="grid grid-cols-4 gap-6 mb-6">
|
|
|
<div>
|
|
|
<h3 class="text-base font-medium mb-3">关于我们</h3>
|
|
|
<ul class="space-y-1 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>
|
|
|
<h3 class="text-lg font-medium mb-4">产品服务</h3>
|
|
|
<ul class="space-y-2 text-sm 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>
|
|
|
<h3 class="text-lg font-medium mb-4">帮助中心</h3>
|
|
|
<ul class="space-y-2 text-sm 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>
|
|
|
<h3 class="text-lg font-medium mb-4">联系我们</h3>
|
|
|
<ul class="space-y-2 text-sm text-gray-300">
|
|
|
<li><i class="fas fa-map-marker-alt mr-2"></i> 北京市海淀区中关村南大街5号</li>
|
|
|
<li><i class="fas fa-phone-alt mr-2"></i> 400-888-8888</li>
|
|
|
<li><i class="fas fa-envelope mr-2"></i> contact@feilixin.com</li>
|
|
|
<li class="flex space-x-4 mt-4">
|
|
|
<a href="#"
|
|
|
class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary">
|
|
|
<i class="fab fa-weixin"></i>
|
|
|
</a>
|
|
|
<a href="#"
|
|
|
class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary">
|
|
|
<i class="fab fa-weibo"></i>
|
|
|
</a>
|
|
|
<a href="#"
|
|
|
class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary">
|
|
|
<i class="fab fa-linkedin-in"></i>
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="border-t border-gray-700 pt-6">
|
|
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
|
|
<div class="text-sm text-gray-400 mb-4 md:mb-0">
|
|
|
© 2023 飞利信人力资源管理系统 版权所有
|
|
|
</div>
|
|
|
<div class="flex space-x-6">
|
|
|
<a href="#" class="text-sm text-gray-400 hover:text-white">隐私政策</a>
|
|
|
<a href="#" class="text-sm text-gray-400 hover:text-white">服务条款</a>
|
|
|
<a href="#" class="text-sm text-gray-400 hover:text-white">法律声明</a>
|
|
|
<a href="#" class="text-sm text-gray-400 hover:text-white">ICP备案号：京ICP备12345678号</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</body>
|
|
|
|
|
|
</html> |
