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.
566 lines
34 KiB
HTML
566 lines
34 KiB
HTML
2 months 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 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>
|
||
|
|
.marquee {
|
||
|
|
animation: marquee 15s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes marquee {
|
||
|
|
0% {
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree-item {
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree-item:hover {
|
||
|
|
background-color: #e0e0e0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-row:hover {
|
||
|
|
background-color: #f0f4ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input:focus {
|
||
|
|
outline: none;
|
||
|
|
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown:hover .dropdown-menu {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
i.fa-icon {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="bg-gray-50 min-h-screen flex flex-col">
|
||
|
|
<!-- 顶部导航栏 -->
|
||
|
|
<!-- <header class="w-full bg-primary text-white">
|
||
|
|
<div class="container mx-auto px-4">
|
||
|
|
<div class="flex items-center justify-between h-16">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span class="font-['Pacifico'] text-xl">人力</span>
|
||
|
|
</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 font-medium">人员管理</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 class="flex items-center space-x-4">
|
||
|
|
<div class="relative">
|
||
|
|
<input type="text" placeholder="搜索..."
|
||
|
|
class="search-input bg-white bg-opacity-20 text-sm rounded-button pl-8 pr-4 py-1 w-40 focus:w-56 transition-all duration-300 placeholder-white">
|
||
|
|
<i
|
||
|
|
class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-white text-sm"></i>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white text-xs px-3 py-1 rounded-button flex items-center space-x-1 transition">
|
||
|
|
<i class="fas fa-robot text-sm"></i>
|
||
|
|
<span>AI助手</span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown relative">
|
||
|
|
<button class="flex items-center space-x-1">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
|
||
|
|
<i class="fas fa-user text-sm"></i>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden">
|
||
|
|
<div class="py-1">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-yellow-50 h-10 flex items-center overflow-hidden">
|
||
|
|
<div class="container mx-auto px-4">
|
||
|
|
<div class="relative">
|
||
|
|
<div class="marquee whitespace-nowrap text-xs text-gray-900">
|
||
|
|
<span class="inline-block mr-8">【公告】2023年度绩效考核工作将于12月1日正式启动</span>
|
||
|
|
<span class="inline-block mr-8">【通知】关于2024年春节放假安排的通知</span>
|
||
|
|
<span class="inline-block mr-8">【提醒】请各部门及时更新员工信息</span>
|
||
|
|
<span class="inline-block">【培训】新员工入职培训将于下周一举行</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header> -->
|
||
|
|
<!-- 主内容区 -->
|
||
|
|
<main class="flex-1 container mx-auto px-4 py-6">
|
||
|
|
<div class="flex">
|
||
|
|
<!-- 左侧组织架构树 -->
|
||
|
|
<div class="w-1/5 pr-4">
|
||
|
|
<div class="bg-white rounded-md shadow p-4 h-full">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="text-sm font-medium">组织架构</h3>
|
||
|
|
<button class="text-primary text-xs hover:text-primary-dark">
|
||
|
|
<i class="fas fa-sync-alt fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-1">
|
||
|
|
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-building fa-icon mr-2 text-gray-500"></i>
|
||
|
|
<span class="text-sm">集团公司</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pl-6">
|
||
|
|
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-sitemap fa-icon mr-2 text-gray-500"></i>
|
||
|
|
<span class="text-sm">人力资源部</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pl-6">
|
||
|
|
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-users fa-icon mr-2 text-gray-500"></i>
|
||
|
|
<span class="text-sm">招聘组</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-chart-line fa-icon mr-2 text-gray-500"></i>
|
||
|
|
<span class="text-sm">绩效组</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-money-bill-wave fa-icon mr-2 text-gray-500"></i>
|
||
|
|
<span class="text-sm">薪酬组</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-sitemap fa-icon mr-2 text-gray-500"></i>
|
||
|
|
<span class="text-sm">财务部</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-sitemap fa-icon mr-2 text-gray-500"></i>
|
||
|
|
<span class="text-sm">技术研发中心</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 右侧内容区 -->
|
||
|
|
<div class="w-4/5">
|
||
|
|
<div class="bg-white rounded-md shadow p-6">
|
||
|
|
<!-- 筛选区 -->
|
||
|
|
<div class="mb-6">
|
||
|
|
<h2 class="text-lg font-medium mb-4">人员筛选</h2>
|
||
|
|
<div class="grid grid-cols-4 gap-4">
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm text-gray-600 mb-1">姓名</label>
|
||
|
|
<input type="text"
|
||
|
|
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm focus:border-primary focus:ring-1 focus:ring-primary">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm text-gray-600 mb-1">电话</label>
|
||
|
|
<input type="text"
|
||
|
|
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm focus:border-primary focus:ring-1 focus:ring-primary">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm text-gray-600 mb-1">身份证号</label>
|
||
|
|
<input type="text"
|
||
|
|
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm focus:border-primary focus:ring-1 focus:ring-primary">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm text-gray-600 mb-1">部门</label>
|
||
|
|
<div class="relative">
|
||
|
|
<select
|
||
|
|
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm appearance-none bg-white">
|
||
|
|
<option>全部部门</option>
|
||
|
|
<option>人力资源部</option>
|
||
|
|
<option>财务部</option>
|
||
|
|
<option>技术研发中心</option>
|
||
|
|
</select>
|
||
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||
|
|
<i class="fas fa-chevron-down fa-icon text-gray-400"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm text-gray-600 mb-1">性别</label>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<label class="inline-flex items-center">
|
||
|
|
<input type="radio" name="gender" class="text-primary focus:ring-primary">
|
||
|
|
<span class="ml-1 text-sm">男</span>
|
||
|
|
</label>
|
||
|
|
<label class="inline-flex items-center">
|
||
|
|
<input type="radio" name="gender" class="text-primary focus:ring-primary">
|
||
|
|
<span class="ml-1 text-sm">女</span>
|
||
|
|
</label>
|
||
|
|
<label class="inline-flex items-center">
|
||
|
|
<input type="radio" name="gender" class="text-primary focus:ring-primary">
|
||
|
|
<span class="ml-1 text-sm">不限</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm text-gray-600 mb-1">年龄范围</label>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<input type="number" placeholder="最小"
|
||
|
|
class="w-1/2 border border-gray-300 rounded-button px-3 py-1 text-sm">
|
||
|
|
<input type="number" placeholder="最大"
|
||
|
|
class="w-1/2 border border-gray-300 rounded-button px-3 py-1 text-sm">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm text-gray-600 mb-1">绩效状态</label>
|
||
|
|
<div class="relative">
|
||
|
|
<select
|
||
|
|
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm appearance-none bg-white">
|
||
|
|
<option>全部状态</option>
|
||
|
|
<option>新建</option>
|
||
|
|
<option>已审批</option>
|
||
|
|
<option>审批中</option>
|
||
|
|
<option>已确认</option>
|
||
|
|
</select>
|
||
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||
|
|
<i class="fas fa-chevron-down fa-icon text-gray-400"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-end">
|
||
|
|
<button
|
||
|
|
class="bg-primary hover:bg-primary-dark text-white px-4 py-1 rounded-button text-sm flex items-center">
|
||
|
|
<i class="fas fa-search fa-icon mr-1"></i>
|
||
|
|
<span>搜索</span>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="ml-2 border border-gray-300 hover:bg-gray-50 px-4 py-1 rounded-button text-sm">
|
||
|
|
重置
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 操作按钮区 -->
|
||
|
|
<div class="flex justify-between items-center mb-4">
|
||
|
|
<h2 class="text-lg font-medium">人员绩效列表</h2>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<button
|
||
|
|
class="bg-primary hover:bg-primary-dark text-white px-3 py-1 rounded-button text-sm flex items-center">
|
||
|
|
<i class="fas fa-plus fa-icon mr-1"></i>
|
||
|
|
<span>新增</span>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="border border-gray-300 hover:bg-gray-50 px-3 py-1 rounded-button text-sm flex items-center">
|
||
|
|
<i class="fas fa-download fa-icon mr-1"></i>
|
||
|
|
<span>导出</span>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="border border-gray-300 hover:bg-gray-50 px-3 py-1 rounded-button text-sm flex items-center">
|
||
|
|
<i class="fas fa-print fa-icon mr-1"></i>
|
||
|
|
<span>打印</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</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-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
序号</th>
|
||
|
|
<th scope="col"
|
||
|
|
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
姓名</th>
|
||
|
|
<th scope="col"
|
||
|
|
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
性别</th>
|
||
|
|
<th scope="col"
|
||
|
|
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
年龄</th>
|
||
|
|
<th scope="col"
|
||
|
|
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
部门</th>
|
||
|
|
<th scope="col"
|
||
|
|
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
职位</th>
|
||
|
|
<th scope="col"
|
||
|
|
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
绩效总分</th>
|
||
|
|
<th scope="col"
|
||
|
|
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
绩效状态</th>
|
||
|
|
<th scope="col"
|
||
|
|
class="px-4 py-2 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 class="table-row">
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">1</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">张明远</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">男</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">32</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">人力资源部</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">招聘主管</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">92.5</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<span
|
||
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已确认</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<button class="text-primary hover:text-primary-dark mr-2">
|
||
|
|
<i class="fas fa-edit fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
<button class="text-red-500 hover:text-red-700">
|
||
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="table-row">
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">2</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">李思雨</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">女</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">28</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">财务部</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">会计</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">88.0</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<span
|
||
|
|
class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">审批中</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<button class="text-primary hover:text-primary-dark mr-2">
|
||
|
|
<i class="fas fa-edit fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
<button class="text-red-500 hover:text-red-700">
|
||
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="table-row">
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">3</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">王建国</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">男</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">45</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">技术研发中心</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">技术总监</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">95.5</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<span
|
||
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已确认</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<button class="text-primary hover:text-primary-dark mr-2">
|
||
|
|
<i class="fas fa-edit fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
<button class="text-red-500 hover:text-red-700">
|
||
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="table-row">
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">4</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">赵雪</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">女</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">26</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">人力资源部</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">薪酬专员</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">85.0</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<span
|
||
|
|
class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">已审批</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<button class="text-primary hover:text-primary-dark mr-2">
|
||
|
|
<i class="fas fa-edit fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
<button class="text-red-500 hover:text-red-700">
|
||
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="table-row">
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">5</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">陈志强</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">男</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">35</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">技术研发中心</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">高级工程师</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">90.5</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">新建</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
||
|
|
<button class="text-primary hover:text-primary-dark mr-2">
|
||
|
|
<i class="fas fa-edit fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
<button class="text-red-500 hover:text-red-700">
|
||
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<!-- 分页区 -->
|
||
|
|
<div class="flex items-center justify-between mt-4">
|
||
|
|
<div class="text-sm text-gray-500">
|
||
|
|
每页显示 <span class="font-medium">10</span> 条，当前 <span class="font-medium">1-10</span> 条，共
|
||
|
|
<span class="font-medium">128</span> 条记录
|
||
|
|
</div>
|
||
|
|
<div class="flex space-x-1">
|
||
|
|
<button
|
||
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">
|
||
|
|
<i class="fas fa-angle-left fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-primary text-white">1</button>
|
||
|
|
<button
|
||
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">2</button>
|
||
|
|
<button
|
||
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">3</button>
|
||
|
|
<button
|
||
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">4</button>
|
||
|
|
<button
|
||
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">5</button>
|
||
|
|
<button
|
||
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">
|
||
|
|
<i class="fas fa-angle-right fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<!-- 页脚 -->
|
||
|
|
<footer class="w-full bg-gray-800 text-white py-8">
|
||
|
|
<div class="container mx-auto px-4">
|
||
|
|
<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">更新日志</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">API文档</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-start">
|
||
|
|
<i class="fas fa-map-marker-alt fa-icon mr-2 mt-1"></i>
|
||
|
|
<span>北京市海淀区中关村软件园2号楼</span>
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<i class="fas fa-phone fa-icon mr-2"></i>
|
||
|
|
<span>400-888-8888</span>
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<i class="fas fa-envelope fa-icon mr-2"></i>
|
||
|
|
<span>contact@hrsystem.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 fa-icon"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
||
|
|
<i class="fab fa-weibo fa-icon"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
||
|
|
<i class="fab fa-github fa-icon"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
||
|
|
<i class="fab fa-linkedin-in fa-icon"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="text-xs text-gray-400 mt-4 md:mt-0">
|
||
|
|
京ICP备12345678号-1
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|