|
|
<!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>
|
|
|
.tree-item {
|
|
|
padding: 8px 12px;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.2s;
|
|
|
}
|
|
|
|
|
|
.tree-item:hover {
|
|
|
background-color: #F5F6FA;
|
|
|
}
|
|
|
|
|
|
.tree-item.active {
|
|
|
background-color: #2D5CF6;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
background-color: white;
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
padding: 16px;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.form-input {
|
|
|
border: 1px solid #E5E7EB;
|
|
|
border-radius: 4px;
|
|
|
padding: 8px 12px;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.form-input:focus {
|
|
|
outline: none;
|
|
|
border-color: #2D5CF6;
|
|
|
}
|
|
|
|
|
|
.search-input {
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
border: none;
|
|
|
border-radius: 4px;
|
|
|
padding: 8px 12px 8px 36px;
|
|
|
color: white;
|
|
|
width: 200px;
|
|
|
}
|
|
|
|
|
|
.search-input::placeholder {
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
}
|
|
|
|
|
|
.search-input:focus {
|
|
|
outline: none;
|
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.user-avatar {
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
border-radius: 9999px;
|
|
|
background-color: white;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
color: #2D5CF6;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.ai-assistant {
|
|
|
position: relative;
|
|
|
padding: 8px 16px;
|
|
|
border-radius: 4px;
|
|
|
background: linear-gradient(90deg, #2D5CF6, #5C7CFA);
|
|
|
color: white;
|
|
|
font-size: 14px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.ai-assistant::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: -2px;
|
|
|
left: -2px;
|
|
|
right: -2px;
|
|
|
bottom: -2px;
|
|
|
border-radius: 6px;
|
|
|
background: linear-gradient(90deg, #2D5CF6, #5C7CFA);
|
|
|
z-index: -1;
|
|
|
opacity: 0.6;
|
|
|
filter: blur(4px);
|
|
|
}
|
|
|
|
|
|
.nav-link {
|
|
|
position: relative;
|
|
|
padding: 0 12px;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.nav-link::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 12px;
|
|
|
right: 12px;
|
|
|
height: 3px;
|
|
|
background-color: white;
|
|
|
transform: scaleX(0);
|
|
|
transition: transform 0.2s;
|
|
|
}
|
|
|
|
|
|
.nav-link:hover::after {
|
|
|
transform: scaleX(1);
|
|
|
}
|
|
|
|
|
|
.marquee {
|
|
|
white-space: nowrap;
|
|
|
animation: marquee 20s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes marquee {
|
|
|
0% {
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body class="min-h-[1024px] flex flex-col bg-[#F5F6FA]">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<header class="w-full bg-primary text-white h-[60px] flex items-center fixed z-50">
|
|
|
<div class="container mx-auto px-4 flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<div class="font-['Pacifico'] text-2xl mr-8">人力</div>
|
|
|
<nav class="flex h-full">
|
|
|
<a href="#" class="nav-link">多维统计</a>
|
|
|
<a href="#" class="nav-link">人员管理</a>
|
|
|
<a href="#" class="nav-link">组织管理</a>
|
|
|
<a href="#" class="nav-link">考勤管理</a>
|
|
|
<a href="#" class="nav-link">绩效管理</a>
|
|
|
<a href="#" class="nav-link">薪酬管理</a>
|
|
|
<a href="#" class="nav-link">知识库</a>
|
|
|
<a href="#" class="nav-link">后台管理</a>
|
|
|
</nav>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="relative">
|
|
|
<i
|
|
|
class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-white opacity-70"></i>
|
|
|
<input type="text" class="search-input" placeholder="搜索...">
|
|
|
</div>
|
|
|
<div class="user-avatar">张</div>
|
|
|
<button class="ai-assistant">
|
|
|
<i class="fas fa-robot mr-2"></i>
|
|
|
AI助手
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
<!-- 主要内容区 -->
|
|
|
<main class="flex-1 pt-[60px] pb-[120px]">
|
|
|
<div class="container mx-auto px-4 flex mt-8">
|
|
|
<!-- 左侧组织架构树 -->
|
|
|
<div class="w-[20%] bg-white rounded-md shadow-sm mr-4 p-4">
|
|
|
<div class="font-medium mb-4">组织架构</div>
|
|
|
<div class="space-y-1">
|
|
|
<div class="tree-item active">集团总部</div>
|
|
|
<div class="tree-item">人力资源部</div>
|
|
|
<div class="tree-item">财务部</div>
|
|
|
<div class="tree-item">技术研发中心</div>
|
|
|
<div class="tree-item">产品设计部</div>
|
|
|
<div class="tree-item">市场营销部</div>
|
|
|
<div class="tree-item">客户服务部</div>
|
|
|
<div class="tree-item">行政后勤部</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右侧入职计划设置 -->
|
|
|
<div class="w-[80%]">
|
|
|
<div class="bg-white rounded-md shadow-sm p-6 mb-6">
|
|
|
<h1 class="text-2xl font-bold mb-6">入职计划设置</h1>
|
|
|
<!-- 公告栏 -->
|
|
|
<!-- <div class="bg-yellow-50 border border-yellow-200 rounded-md p-3 mb-6 overflow-hidden">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-bullhorn text-yellow-500 mr-2"></i>
|
|
|
<div class="marquee text-sm text-yellow-800">
|
|
|
重要通知：2023年第三季度招聘计划已启动，各部门请于8月15日前提交用人需求 | 人力资源部将于8月20日组织专场招聘会 | 新员工入职培训计划已更新，请各部门负责人查阅
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<!-- 入职部门信息 -->
|
|
|
<div class="card">
|
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
|
<i class="fas fa-building mr-2 text-primary"></i>
|
|
|
入职部门信息
|
|
|
</h2>
|
|
|
<div class="grid grid-cols-3 gap-4">
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">部门名称</label>
|
|
|
<div class="bg-gray-100 p-2 rounded">人力资源部</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">部门负责人</label>
|
|
|
<div class="bg-gray-100 p-2 rounded">张明远</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">当前在岗人数</label>
|
|
|
<div class="bg-gray-100 p-2 rounded">24/30</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 计划时段设置 -->
|
|
|
<div class="card">
|
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
|
<i class="far fa-calendar-alt mr-2 text-primary"></i>
|
|
|
计划时段设置
|
|
|
</h2>
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">计划开始日期</label>
|
|
|
<div class="flex items-center">
|
|
|
<input type="date" class="form-input mr-2" value="2023-09-01">
|
|
|
<i class="fas fa-calendar text-gray-400"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">计划结束日期</label>
|
|
|
<div class="flex items-center">
|
|
|
<input type="date" class="form-input mr-2" value="2023-09-30">
|
|
|
<i class="fas fa-calendar text-gray-400"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 可入职岗位设置 -->
|
|
|
<div class="card">
|
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
|
<i class="fas fa-briefcase mr-2 text-primary"></i>
|
|
|
可入职岗位设置
|
|
|
</h2>
|
|
|
<div class="space-y-4">
|
|
|
<div class="flex items-center">
|
|
|
<input type="checkbox" id="job1" class="rounded text-primary focus:ring-primary mr-2"
|
|
|
checked>
|
|
|
<label for="job1" class="text-sm">人力资源专员 (3人)</label>
|
|
|
</div>
|
|
|
<div class="flex items-center">
|
|
|
<input type="checkbox" id="job2" class="rounded text-primary focus:ring-primary mr-2"
|
|
|
checked>
|
|
|
<label for="job2" class="text-sm">薪酬福利专员 (2人)</label>
|
|
|
</div>
|
|
|
<div class="flex items-center">
|
|
|
<input type="checkbox" id="job3" class="rounded text-primary focus:ring-primary mr-2">
|
|
|
<label for="job3" class="text-sm">培训发展专员 (1人)</label>
|
|
|
</div>
|
|
|
<div class="flex items-center">
|
|
|
<input type="checkbox" id="job4" class="rounded text-primary focus:ring-primary mr-2">
|
|
|
<label for="job4" class="text-sm">招聘专员 (2人)</label>
|
|
|
</div>
|
|
|
<button class="mt-2 text-primary text-sm flex items-center">
|
|
|
<i class="fas fa-plus-circle mr-1"></i>
|
|
|
添加其他岗位
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 计划入职人数 -->
|
|
|
<div class="card">
|
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
|
<i class="fas fa-users mr-2 text-primary"></i>
|
|
|
计划入职人数
|
|
|
</h2>
|
|
|
<div class="grid grid-cols-3 gap-4">
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">计划总人数</label>
|
|
|
<input type="number" class="form-input" value="5">
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">已确认人数</label>
|
|
|
<input type="number" class="form-input" value="2" disabled>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">剩余名额</label>
|
|
|
<input type="number" class="form-input" value="3" disabled>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 人员要求 -->
|
|
|
<div class="card">
|
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
|
<i class="fas fa-user-tie mr-2 text-primary"></i>
|
|
|
人员要求
|
|
|
</h2>
|
|
|
<div class="space-y-4">
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">年龄段</label>
|
|
|
<div class="flex space-x-4">
|
|
|
<div class="flex items-center">
|
|
|
<input type="radio" id="age1" name="age" class="text-primary focus:ring-primary"
|
|
|
checked>
|
|
|
<label for="age1" class="ml-2 text-sm">22-30岁</label>
|
|
|
</div>
|
|
|
<div class="flex items-center">
|
|
|
<input type="radio" id="age2" name="age"
|
|
|
class="text-primary focus:ring-primary">
|
|
|
<label for="age2" class="ml-2 text-sm">30-35岁</label>
|
|
|
</div>
|
|
|
<div class="flex items-center">
|
|
|
<input type="radio" id="age3" name="age"
|
|
|
class="text-primary focus:ring-primary">
|
|
|
<label for="age3" class="ml-2 text-sm">不限</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
|
|
|
<div class="flex space-x-4">
|
|
|
<div class="flex items-center">
|
|
|
<input type="radio" id="gender1" name="gender"
|
|
|
class="text-primary focus:ring-primary">
|
|
|
<label for="gender1" class="ml-2 text-sm">男</label>
|
|
|
</div>
|
|
|
<div class="flex items-center">
|
|
|
<input type="radio" id="gender2" name="gender"
|
|
|
class="text-primary focus:ring-primary">
|
|
|
<label for="gender2" class="ml-2 text-sm">女</label>
|
|
|
</div>
|
|
|
<div class="flex items-center">
|
|
|
<input type="radio" id="gender3" name="gender"
|
|
|
class="text-primary focus:ring-primary" checked>
|
|
|
<label for="gender3" class="ml-2 text-sm">不限</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">学历要求</label>
|
|
|
<select class="form-input">
|
|
|
<option>本科及以上</option>
|
|
|
<option>硕士及以上</option>
|
|
|
<option>大专及以上</option>
|
|
|
<option>不限</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">工作年限</label>
|
|
|
<select class="form-input">
|
|
|
<option>1-3年</option>
|
|
|
<option>3-5年</option>
|
|
|
<option>5年以上</option>
|
|
|
<option>不限</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">其他要求</label>
|
|
|
<textarea class="form-input" rows="3" placeholder="请输入其他特殊要求..."></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 黑名单设置 -->
|
|
|
<div class="card">
|
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
|
<i class="fas fa-ban mr-2 text-primary"></i>
|
|
|
黑名单设置
|
|
|
</h2>
|
|
|
<div class="space-y-4">
|
|
|
<div class="flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg"
|
|
|
class="w-8 h-8 rounded-full mr-2">
|
|
|
<div>
|
|
|
<div class="text-sm font-medium">林晓梅</div>
|
|
|
<div class="text-xs text-gray-500">身份证: 310***19880512****</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button class="text-red-500 text-sm flex items-center">
|
|
|
<i class="fas fa-times mr-1"></i>
|
|
|
移除
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg"
|
|
|
class="w-8 h-8 rounded-full mr-2">
|
|
|
<div>
|
|
|
<div class="text-sm font-medium">王建国</div>
|
|
|
<div class="text-xs text-gray-500">身份证: 420***19900215****</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button class="text-red-500 text-sm flex items-center">
|
|
|
<i class="fas fa-times mr-1"></i>
|
|
|
移除
|
|
|
</button>
|
|
|
</div>
|
|
|
<button class="mt-2 text-primary text-sm flex items-center">
|
|
|
<i class="fas fa-plus-circle mr-1"></i>
|
|
|
添加黑名单人员
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 白名单设置 -->
|
|
|
<div class="card">
|
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center">
|
|
|
<i class="fas fa-check-circle mr-2 text-primary"></i>
|
|
|
白名单设置
|
|
|
</h2>
|
|
|
<div class="space-y-4">
|
|
|
<div class="flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<img src="https://randomuser.me/api/portraits/women/65.jpg"
|
|
|
class="w-8 h-8 rounded-full mr-2">
|
|
|
<div>
|
|
|
<div class="text-sm font-medium">陈思思</div>
|
|
|
<div class="text-xs text-gray-500">推荐人: 张明远</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button class="text-red-500 text-sm flex items-center">
|
|
|
<i class="fas fa-times mr-1"></i>
|
|
|
移除
|
|
|
</button>
|
|
|
</div>
|
|
|
<button class="mt-2 text-primary text-sm flex items-center">
|
|
|
<i class="fas fa-plus-circle mr-1"></i>
|
|
|
添加白名单人员
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 操作按钮 -->
|
|
|
<div class="flex justify-end space-x-4 mt-6">
|
|
|
<button
|
|
|
class="px-6 py-2 border border-gray-300 rounded-button bg-white text-gray-700 hover:bg-gray-50">
|
|
|
取消
|
|
|
</button>
|
|
|
<button class="px-6 py-2 rounded-button bg-primary text-white hover:bg-blue-700">
|
|
|
保存设置
|
|
|
</button>
|
|
|
</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-semibold 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-semibold 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-semibold 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-semibold 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 mr-2"></i> 北京市海淀区中关村南大街5号</li>
|
|
|
<li class="flex items-center"><i class="fas fa-phone-alt mr-2"></i> 400-888-8888</li>
|
|
|
<li class="flex items-center"><i class="fas fa-envelope mr-2"></i> hr@company.com</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-xs text-gray-400 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>
|
|
|
</footer>
|
|
|
</body>
|
|
|
|
|
|
</html> |
