|
|
<!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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
<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>
|
|
|
body {
|
|
|
min-height: 1024px;
|
|
|
}
|
|
|
.nav-item:hover {
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
}
|
|
|
.tree-node:hover {
|
|
|
background-color: rgba(45, 92, 246, 0.05);
|
|
|
}
|
|
|
.table-row:hover {
|
|
|
background-color: #F5F6FA;
|
|
|
}
|
|
|
.ai-icon {
|
|
|
animation: pulse 2s infinite;
|
|
|
}
|
|
|
@keyframes pulse {
|
|
|
0% { opacity: 0.8; }
|
|
|
50% { opacity: 1; }
|
|
|
100% { opacity: 0.8; }
|
|
|
}
|
|
|
.marquee {
|
|
|
animation: scroll 20s linear infinite;
|
|
|
}
|
|
|
@keyframes scroll {
|
|
|
0% { transform: translateX(100%); }
|
|
|
100% { transform: translateX(-100%); }
|
|
|
}
|
|
|
i {
|
|
|
display: flex !important;
|
|
|
justify-content: center !important;
|
|
|
align-items: center !important;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="bg-secondary font-sans">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<!--<header class="bg-primary text-white w-full fixed top-0 z-50 shadow-md">
|
|
|
<div class="container mx-auto px-4 h-14 flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<span class="font-['Pacifico'] text-xl mr-8">人力</span>
|
|
|
|
|
|
<nav class="hidden md:flex space-x-1">
|
|
|
<a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">多维统计</a>
|
|
|
<a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">人员管理</a>
|
|
|
<a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">组织管理</a>
|
|
|
<a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">考勤管理</a>
|
|
|
<a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">绩效管理</a>
|
|
|
<a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">薪酬管理</a>
|
|
|
<a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">知识库</a>
|
|
|
<a href="#" class="nav-item px-3 py-1 text-sm rounded-button hover:bg-primary-600">后台管理</a>
|
|
|
</nav>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="relative hidden md:block">
|
|
|
<input type="text" placeholder="搜索..." class="bg-primary-600 text-white text-sm py-1 pl-8 pr-3 rounded-button border border-primary-400 focus:outline-none focus:ring-1 focus:ring-white w-48" />
|
|
|
<i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-white text-sm"></i>
|
|
|
</div>
|
|
|
<button class="flex items-center space-x-1 bg-primary-600 hover:bg-primary-700 px-2 py-1 rounded-button text-sm">
|
|
|
<i class="fas fa-robot ai-icon text-white text-sm"></i>
|
|
|
<span>AI助手</span>
|
|
|
</button>
|
|
|
|
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
|
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-primary font-semibold">张</div>
|
|
|
<span class="text-sm hidden md:inline">张明远</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header> -->
|
|
|
|
|
|
<!-- 主内容区 -->
|
|
|
<main class="container mx-auto px-4 pt-6 pb-10 flex">
|
|
|
<!-- 左侧组织架构树 -->
|
|
|
<div class="w-1/5 pr-4">
|
|
|
<div class="bg-white rounded-md shadow-sm p-4 h-full">
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
|
<h3 class="text-sm font-semibold text-gray-700">组织架构</h3>
|
|
|
<button class="text-primary text-sm">全部展开</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="space-y-1 text-sm">
|
|
|
<!-- 一级部门 -->
|
|
|
<div class="tree-node pl-2 py-1 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-building mr-2 text-gray-500 text-xs"></i>
|
|
|
<span>集团总部</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 二级部门 -->
|
|
|
<div class="pl-4 mt-1 space-y-1">
|
|
|
<div class="tree-node pl-2 py-1 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-users mr-2 text-gray-500 text-xs"></i>
|
|
|
<span>人力资源部</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 三级部门 -->
|
|
|
<div class="pl-4 mt-1 space-y-1">
|
|
|
<div class="tree-node pl-2 py-1 rounded-md cursor-pointer flex items-center">
|
|
|
<i class="fas fa-user-tie mr-2 text-gray-500 text-xs"></i>
|
|
|
<span>招聘组</span>
|
|
|
</div>
|
|
|
<div class="tree-node pl-2 py-1 rounded-md cursor-pointer flex items-center">
|
|
|
<i class="fas fa-chart-line mr-2 text-gray-500 text-xs"></i>
|
|
|
<span>绩效组</span>
|
|
|
</div>
|
|
|
<div class="tree-node pl-2 py-1 rounded-md cursor-pointer flex items-center">
|
|
|
<i class="fas fa-money-bill-wave mr-2 text-gray-500 text-xs"></i>
|
|
|
<span>薪酬组</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tree-node pl-2 py-1 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-laptop-code mr-2 text-gray-500 text-xs"></i>
|
|
|
<span>技术研发部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tree-node pl-2 py-1 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-shopping-cart mr-2 text-gray-500 text-xs"></i>
|
|
|
<span>市场营销部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 一级部门 -->
|
|
|
<div class="tree-node pl-2 py-1 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-building mr-2 text-gray-500 text-xs"></i>
|
|
|
<span>华东分公司</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 一级部门 -->
|
|
|
<div class="tree-node pl-2 py-1 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-building mr-2 text-gray-500 text-xs"></i>
|
|
|
<span>华南分公司</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧内容区 -->
|
|
|
<div class="w-4/5">
|
|
|
<!-- 公告栏 -->
|
|
|
<div class="bg-white rounded-md shadow-sm p-3 mb-4 overflow-hidden">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-bullhorn text-primary mr-2 text-sm"></i>
|
|
|
<div class="marquee whitespace-nowrap text-sm">
|
|
|
<span class="mr-8">【系统公告】2023年度绩效考核工作将于12月1日正式启动</span>
|
|
|
<span class="mr-8">【重要通知】全体员工请于11月30日前完成个人信息核对</span>
|
|
|
<span class="mr-8">【培训通知】11月25日将举办新员工入职培训，请相关人员准时参加</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 筛选区 -->
|
|
|
<div class="bg-white rounded-md shadow-sm p-4 mb-4">
|
|
|
<div class="flex items-center flex-wrap gap-4">
|
|
|
<div class="flex items-center">
|
|
|
<span class="text-sm text-gray-600 mr-2">时间段:</span>
|
|
|
<div class="relative">
|
|
|
<input type="text" class="border rounded-button px-3 py-1 text-sm w-40" placeholder="开始日期" />
|
|
|
<i class="fas fa-calendar-alt absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
</div>
|
|
|
<span class="mx-2 text-sm text-gray-400">至</span>
|
|
|
<div class="relative">
|
|
|
<input type="text" class="border rounded-button px-3 py-1 text-sm w-40" placeholder="结束日期" />
|
|
|
<i class="fas fa-calendar-alt absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
<span class="text-sm text-gray-600 mr-2">作业人员:</span>
|
|
|
<div class="relative">
|
|
|
<input type="text" class="border rounded-button px-3 py-1 text-sm w-32" placeholder="姓名/工号" />
|
|
|
<i class="fas fa-search absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
<span class="text-sm text-gray-600 mr-2">作业类型:</span>
|
|
|
<div class="relative">
|
|
|
<select class="border rounded-button px-3 py-1 text-sm w-32 appearance-none bg-white">
|
|
|
<option>全部</option>
|
|
|
<option>招聘面试</option>
|
|
|
<option>培训组织</option>
|
|
|
<option>绩效考核</option>
|
|
|
<option>薪酬核算</option>
|
|
|
</select>
|
|
|
<i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<button class="ml-auto bg-primary hover:bg-primary-600 text-white px-3 py-1 rounded-button text-sm whitespace-nowrap">
|
|
|
<i class="fas fa-filter mr-1 text-xs"></i>
|
|
|
筛选
|
|
|
</button>
|
|
|
|
|
|
<button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-button text-sm whitespace-nowrap">
|
|
|
<i class="fas fa-redo mr-1 text-xs"></i>
|
|
|
重置
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 数据表格 -->
|
|
|
<div class="bg-white rounded-md shadow-sm overflow-hidden">
|
|
|
<div class="p-4 border-b flex items-center justify-between">
|
|
|
<h3 class="text-sm font-semibold text-gray-700">作业明细</h3>
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<button class="bg-primary hover:bg-primary-600 text-white px-3 py-1 rounded-button text-sm whitespace-nowrap">
|
|
|
<i class="fas fa-plus mr-1 text-xs"></i>
|
|
|
新增
|
|
|
</button>
|
|
|
<button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-button text-sm whitespace-nowrap">
|
|
|
<i class="fas fa-download mr-1 text-xs"></i>
|
|
|
导出
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="min-w-full divide-y divide-gray-200 text-sm">
|
|
|
<thead class="bg-gray-50">
|
|
|
<tr>
|
|
|
<th class="px-4 py-2 text-left text-gray-500 font-medium">序号</th>
|
|
|
<th class="px-4 py-2 text-left text-gray-500 font-medium">作业类型</th>
|
|
|
<th class="px-4 py-2 text-left text-gray-500 font-medium">部门</th>
|
|
|
<th class="px-4 py-2 text-left text-gray-500 font-medium">作业人员</th>
|
|
|
<th class="px-4 py-2 text-left text-gray-500 font-medium">开始时间</th>
|
|
|
<th class="px-4 py-2 text-left text-gray-500 font-medium">结束时间</th>
|
|
|
<th class="px-4 py-2 text-left text-gray-500 font-medium">持续时长</th>
|
|
|
<th class="px-4 py-2 text-left text-gray-500 font-medium">作业数量</th>
|
|
|
<th class="px-4 py-2 text-left text-gray-500 font-medium">操作</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">张明远</td>
|
|
|
<td class="px-4 py-2">2023-11-01 09:00</td>
|
|
|
<td class="px-4 py-2">2023-11-01 11:30</td>
|
|
|
<td class="px-4 py-2">2.5小时</td>
|
|
|
<td class="px-4 py-2">3人</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</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">李思雨</td>
|
|
|
<td class="px-4 py-2">2023-11-02 14:00</td>
|
|
|
<td class="px-4 py-2">2023-11-02 17:00</td>
|
|
|
<td class="px-4 py-2">3小时</td>
|
|
|
<td class="px-4 py-2">1场</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</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">王建国</td>
|
|
|
<td class="px-4 py-2">2023-11-03 10:00</td>
|
|
|
<td class="px-4 py-2">2023-11-03 12:00</td>
|
|
|
<td class="px-4 py-2">2小时</td>
|
|
|
<td class="px-4 py-2">5人</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</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">赵晓芳</td>
|
|
|
<td class="px-4 py-2">2023-11-05 09:00</td>
|
|
|
<td class="px-4 py-2">2023-11-05 18:00</td>
|
|
|
<td class="px-4 py-2">8小时</td>
|
|
|
<td class="px-4 py-2">128人</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</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">张明远</td>
|
|
|
<td class="px-4 py-2">2023-11-08 09:30</td>
|
|
|
<td class="px-4 py-2">2023-11-08 12:00</td>
|
|
|
<td class="px-4 py-2">2.5小时</td>
|
|
|
<td class="px-4 py-2">4人</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</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">李思雨</td>
|
|
|
<td class="px-4 py-2">2023-11-10 13:30</td>
|
|
|
<td class="px-4 py-2">2023-11-10 16:30</td>
|
|
|
<td class="px-4 py-2">3小时</td>
|
|
|
<td class="px-4 py-2">1场</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</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">王建国</td>
|
|
|
<td class="px-4 py-2">2023-11-12 09:00</td>
|
|
|
<td class="px-4 py-2">2023-11-12 11:30</td>
|
|
|
<td class="px-4 py-2">2.5小时</td>
|
|
|
<td class="px-4 py-2">6人</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</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">赵晓芳</td>
|
|
|
<td class="px-4 py-2">2023-11-15 09:00</td>
|
|
|
<td class="px-4 py-2">2023-11-15 17:30</td>
|
|
|
<td class="px-4 py-2">8.5小时</td>
|
|
|
<td class="px-4 py-2">135人</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</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">张明远</td>
|
|
|
<td class="px-4 py-2">2023-11-18 09:00</td>
|
|
|
<td class="px-4 py-2">2023-11-18 11:00</td>
|
|
|
<td class="px-4 py-2">2小时</td>
|
|
|
<td class="px-4 py-2">2人</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</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">李思雨</td>
|
|
|
<td class="px-4 py-2">2023-11-20 14:00</td>
|
|
|
<td class="px-4 py-2">2023-11-20 17:00</td>
|
|
|
<td class="px-4 py-2">3小时</td>
|
|
|
<td class="px-4 py-2">1场</td>
|
|
|
<td class="px-4 py-2">
|
|
|
<button class="text-primary hover:text-primary-600 mr-2">
|
|
|
<i class="fas fa-edit text-xs"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-600">
|
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
<div class="px-4 py-3 border-t flex items-center justify-between">
|
|
|
<div class="text-sm text-gray-600">
|
|
|
显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">128</span> 条记录
|
|
|
</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 disabled:opacity-50" disabled>
|
|
|
上一页
|
|
|
</button>
|
|
|
<button class="px-3 py-1 border rounded-button text-sm bg-primary text-white hover:bg-primary-600">
|
|
|
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">...</span>
|
|
|
<button class="px-3 py-1 border rounded-button text-sm text-gray-700 hover:bg-gray-50">
|
|
|
13
|
|
|
</button>
|
|
|
<button class="px-3 py-1 border rounded-button text-sm text-gray-700 hover:bg-gray-50">
|
|
|
下一页
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<!-- 页脚 -->
|
|
|
<footer class="bg-gray-800 text-white py-8 w-full">
|
|
|
<div class="container mx-auto px-4">
|
|
|
<div class="grid grid-cols-4 gap-8">
|
|
|
<div>
|
|
|
<h4 class="text-sm font-semibold mb-4">关于我们</h4>
|
|
|
<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>
|
|
|
<h4 class="text-sm font-semibold mb-4">产品服务</h4>
|
|
|
<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>
|
|
|
<h4 class="text-sm font-semibold mb-4">帮助中心</h4>
|
|
|
<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>
|
|
|
<h4 class="text-sm font-semibold mb-4">联系我们</h4>
|
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
|
<li class="flex items-start">
|
|
|
<i class="fas fa-map-marker-alt mr-2 mt-1 text-xs"></i>
|
|
|
<span>上海市浦东新区张江高科技园区科苑路88号</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-phone-alt mr-2 text-xs"></i>
|
|
|
<span>400-888-8888</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-envelope mr-2 text-xs"></i>
|
|
|
<span>hr@company.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 text-sm"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
|
|
<i class="fab fa-weibo text-sm"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
|
|
<i class="fab fa-linkedin-in text-sm"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
|
|
<i class="fab fa-github text-sm"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html>
|
