|
|
<!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>
|
|
|
.font-logo {
|
|
|
font-family: 'Pacifico', serif;
|
|
|
}
|
|
|
.fa-icon {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.scroll-container {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.scroll-content {
|
|
|
display: inline-block;
|
|
|
white-space: nowrap;
|
|
|
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-gray-50 flex flex-col">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<!-- <header class="w-full bg-primary text-white shadow-md">
|
|
|
<div class="container mx-auto px-6 h-[60px] flex items-center justify-between">
|
|
|
<div class="flex items-center space-x-8">
|
|
|
<div class="font-logo text-xl">人力</div>
|
|
|
<nav class="hidden md:flex space-x-6">
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">多维统计</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">人员管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">组织管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">考勤管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">绩效管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">薪酬管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">知识库</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">后台管理</a>
|
|
|
</nav>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="relative hidden md:block">
|
|
|
<input type="text" placeholder="搜索..." class="bg-primary-light text-sm text-white placeholder-gray-300 rounded-button pl-8 pr-4 py-2 border border-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-500">
|
|
|
<i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-300 fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-button flex items-center space-x-2">
|
|
|
<i class="fas fa-robot fa-icon w-4 h-4"></i>
|
|
|
<span>AI 助手</span>
|
|
|
</button>
|
|
|
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center cursor-pointer">
|
|
|
<i class="fas fa-user text-primary fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header> -->
|
|
|
|
|
|
<!-- 公告栏 -->
|
|
|
<div class="w-full bg-yellow-50 py-2 px-6 border-b border-yellow-200">
|
|
|
<div class="container mx-auto flex items-center">
|
|
|
<span class="text-yellow-700 font-medium text-sm mr-4 whitespace-nowrap">公告：</span>
|
|
|
<div class="scroll-container w-full">
|
|
|
<div class="scroll-content text-sm text-yellow-700">
|
|
|
2023年度绩效考核工作将于12月1日正式启动，请各部门提前做好准备。2023年度员工满意度调查结果已发布，请各部门负责人查阅。公司年度旅游活动报名开始，截止日期11月30日。2024年春节放假安排已发布，请各部门做好工作安排。公司新办公区将于2024年1月正式启用，请各部门做好搬迁准备。
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 主体内容 -->
|
|
|
<main class="flex-1 container mx-auto px-6 py-6 flex">
|
|
|
<!-- 左侧组织架构树 -->
|
|
|
<div class="w-1/5 pr-4">
|
|
|
<div class="bg-white rounded-md shadow-sm p-4 h-full">
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
|
<h3 class="font-medium text-gray-700">组织架构</h3>
|
|
|
<button class="text-primary hover:text-blue-700">
|
|
|
<i class="fas fa-sync-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="space-y-1">
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-secondary rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-building text-gray-500 fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span class="text-sm">集团公司</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
<div class="pl-6">
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-secondary rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap text-gray-500 fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span class="text-sm">人力资源部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
<div class="pl-6">
|
|
|
<div class="flex items-center p-2 hover:bg-secondary rounded-md cursor-pointer">
|
|
|
<i class="fas fa-users text-gray-500 fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span class="text-sm">招聘组</span>
|
|
|
</div>
|
|
|
<div class="flex items-center p-2 hover:bg-secondary rounded-md cursor-pointer">
|
|
|
<i class="fas fa-users text-gray-500 fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span class="text-sm">培训组</span>
|
|
|
</div>
|
|
|
<div class="flex items-center p-2 hover:bg-secondary rounded-md cursor-pointer">
|
|
|
<i class="fas fa-users text-gray-500 fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span class="text-sm">薪酬组</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-secondary rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap text-gray-500 fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span class="text-sm">财务部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-secondary rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap text-gray-500 fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span class="text-sm">技术研发中心</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-secondary rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap text-gray-500 fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span class="text-sm">市场营销部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧部门列表 -->
|
|
|
<div class="w-4/5 pl-4">
|
|
|
<div class="bg-white rounded-md shadow-sm p-6 h-full">
|
|
|
<div class="flex justify-between items-center mb-6">
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<h2 class="text-lg font-medium text-gray-800">部门管理</h2>
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<span class="text-sm text-gray-500">年份：</span>
|
|
|
<div class="relative">
|
|
|
<button class="flex items-center justify-between bg-white border border-gray-300 rounded-button px-3 py-1 text-sm text-gray-700 w-28">
|
|
|
<span>2023</span>
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 ml-2"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button class="bg-primary hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-button flex items-center space-x-2">
|
|
|
<i class="fas fa-plus fa-icon w-4 h-4"></i>
|
|
|
<span>添加部门</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
|
<thead class="bg-gray-50">
|
|
|
<tr>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门名称</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门负责人</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">员工人数</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">人力资源部</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张明远</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">24</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">财务部</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李思雨</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">技术研发中心</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王建国</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">56</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">市场营销部</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">赵雪梅</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">产品设计部</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">陈志强</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">客户服务部</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">刘芳芳</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">22</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">行政后勤部</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">吴晓峰</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">质量管理部</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">郑海涛</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">采购部</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">周丽华</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">法务部</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">孙正义</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-blue-700 mr-3">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3">
|
|
|
<i class="fas fa-edit fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
<button class="text-red-600 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between mt-6">
|
|
|
<div class="text-sm text-gray-500">
|
|
|
显示 1 到 10 条，共 15 条记录
|
|
|
</div>
|
|
|
<div class="flex space-x-1">
|
|
|
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 bg-white hover:bg-gray-50">上一页</button>
|
|
|
<button class="px-3 py-1 border border-primary rounded-button text-sm text-white bg-primary hover:bg-blue-700">1</button>
|
|
|
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 bg-white hover:bg-gray-50">2</button>
|
|
|
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 bg-white hover:bg-gray-50">下一页</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<!-- 页脚 -->
|
|
|
<footer class="w-full bg-gray-800 text-white py-8">
|
|
|
<div class="container mx-auto px-6">
|
|
|
<div class="grid grid-cols-4 gap-8">
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium mb-4">关于我们</h3>
|
|
|
<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>
|
|
|
<h3 class="text-sm font-medium mb-4">产品服务</h3>
|
|
|
<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>
|
|
|
<h3 class="text-sm font-medium mb-4">帮助中心</h3>
|
|
|
<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">API文档</a></li>
|
|
|
<li><a href="#" class="hover:text-white">联系我们</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium mb-4">联系我们</h3>
|
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-map-marker-alt fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span>北京市海淀区中关村软件园</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-phone-alt fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span>400-888-8888</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-envelope fa-icon w-4 h-4 mr-2"></i>
|
|
|
<span>contact@hrsystem.com</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div 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-gray-600">
|
|
|
<i class="fab fa-weixin fa-icon w-4 h-4"></i>
|
|
|
</a>
|
|
|
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600">
|
|
|
<i class="fab fa-weibo fa-icon w-4 h-4"></i>
|
|
|
</a>
|
|
|
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600">
|
|
|
<i class="fab fa-linkedin-in fa-icon w-4 h-4"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-xs text-gray-400">
|
|
|
<div class="flex justify-between">
|
|
|
<div>© 2023 人力资源管理系统 版权所有</div>
|
|
|
<div class="flex space-x-4">
|
|
|
<a href="#" class="hover:text-white">隐私政策</a>
|
|
|
<a href="#" class="hover:text-white">服务条款</a>
|
|
|
<a href="#" class="hover:text-white">法律声明</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html>
|
