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.

445 lines
26 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>
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;
}
.fa-icon {
display: flex;
justify-content: center;
align-items: center;
}
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;
}
.scroll-container {
overflow: hidden;
white-space: nowrap;
}
.scroll-content {
display: inline-block;
animation: scroll 15s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
</style>
</head>
<body class="min-h-[1024px] bg-secondary flex flex-col">
<!-- 顶部导航栏 -->
<!-- <header class="bg-primary text-white w-full h-16 shadow-md">
<div class="container mx-auto h-full px-6 flex items-center justify-between">
<div class="flex items-center">
<h1 class="font-pacifico text-2xl mr-10">人力</h1>
<nav class="hidden md:flex space-x-8">
<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-6">
<div class="relative hidden md:block">
<input type="text" placeholder="搜索..." class="bg-white text-gray-800 text-sm rounded-button pl-4 pr-10 py-2 w-48 focus:outline-none">
<i class="fas fa-search absolute right-3 top-2.5 text-gray-500 text-sm"></i>
</div>
<button class="hidden md:flex items-center space-x-1 bg-blue-600 hover:bg-blue-700 text-white text-sm px-3 py-1.5 rounded-button transition">
<i class="fas fa-robot fa-icon w-4 h-4"></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">
<i class="fas fa-user text-primary"></i>
</div>
<span class="text-sm hidden md:block">张明远</span>
</div>
</div>
</div>
</header> -->
<!-- 主要内容区 -->
<main class="flex-1 container mx-auto px-6 py-8 flex">
<!-- 左侧组织架构树 -->
<div class="w-1/5 pr-6">
<div class="bg-white rounded-md shadow p-4 h-full">
<div class="flex justify-between items-center mb-4">
<h2 class="font-medium text-gray-800">组织架构</h2>
<button class="text-primary text-sm">
<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 py-1.5 px-2 bg-gray-100 rounded">
<div class="flex items-center">
<i class="fas fa-building fa-icon w-4 h-4 mr-2 text-gray-600"></i>
<span class="text-sm">集团公司</span>
</div>
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
</div>
<div class="pl-6 space-y-1">
<div class="flex items-center justify-between py-1.5 px-2 hover:bg-gray-50 rounded">
<div class="flex items-center">
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-600"></i>
<span class="text-sm">技术中心</span>
</div>
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
</div>
<div class="pl-6 space-y-1">
<div class="flex items-center py-1.5 px-2 hover:bg-gray-50 rounded">
<i class="fas fa-code-branch fa-icon w-4 h-4 mr-2 text-gray-600"></i>
<span class="text-sm">前端开发部</span>
</div>
<div class="flex items-center py-1.5 px-2 hover:bg-gray-50 rounded">
<i class="fas fa-code-branch fa-icon w-4 h-4 mr-2 text-gray-600"></i>
<span class="text-sm">后端开发部</span>
</div>
<div class="flex items-center py-1.5 px-2 hover:bg-gray-50 rounded">
<i class="fas fa-code-branch fa-icon w-4 h-4 mr-2 text-gray-600"></i>
<span class="text-sm">测试部</span>
</div>
</div>
<div class="flex items-center justify-between py-1.5 px-2 hover:bg-gray-50 rounded">
<div class="flex items-center">
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-600"></i>
<span class="text-sm">产品中心</span>
</div>
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
</div>
<div class="flex items-center justify-between py-1.5 px-2 hover:bg-gray-50 rounded">
<div class="flex items-center">
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-600"></i>
<span class="text-sm">市场部</span>
</div>
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
</div>
<div class="flex items-center justify-between py-1.5 px-2 hover:bg-gray-50 rounded">
<div class="flex items-center">
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-600"></i>
<span class="text-sm">人力资源部</span>
</div>
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧审批详情 -->
<div class="w-4/5">
<div class="bg-white rounded-md shadow p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-gray-800">员工异动审批详情</h2>
<div class="flex space-x-3">
<button class="bg-primary hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-button transition">
<i class="fas fa-check fa-icon w-4 h-4 mr-1"></i>
<span>同意</span>
</button>
<button class="bg-red-500 hover:bg-red-600 text-white text-sm px-4 py-2 rounded-button transition">
<i class="fas fa-times fa-icon w-4 h-4 mr-1"></i>
<span>拒绝</span>
</button>
<button class="border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm px-4 py-2 rounded-button transition">
<i class="fas fa-print fa-icon w-4 h-4 mr-1"></i>
<span>打印</span>
</button>
</div>
</div>
<!-- 基本信息 -->
<div class="mb-8">
<h3 class="text-lg font-medium text-gray-800 mb-4 pb-2 border-b">基本信息</h3>
<div class="grid grid-cols-3 gap-6">
<div class="col-span-1">
<div class="flex flex-col items-center">
<div class="w-32 h-32 rounded-full bg-gray-200 mb-3 overflow-hidden">
<img src="https://mastergo.com/ai/api/search-image?query=professional20asian20businessman20portrait20with20white20background20high20quality20photo20realistic20detailed20face20corporate20style20neutral20expression&width=300&height=300&orientation=squarish&flag=4bef40f432379c943d4dcedd922e3bf6"
alt="员工照片" class="w-full h-full object-cover">
</div>
<span class="text-sm text-gray-600">员工照片</span>
</div>
</div>
<div class="col-span-2">
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-sm text-gray-500 mb-1">员工姓名</p>
<p class="text-gray-800 font-medium">林志强</p>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">员工编号</p>
<p class="text-gray-800 font-medium">EMP20230085</p>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">原部门</p>
<p class="text-gray-800 font-medium">前端开发部</p>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">新部门</p>
<p class="text-gray-800 font-medium">产品设计部</p>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">原岗位</p>
<p class="text-gray-800 font-medium">高级前端工程师</p>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">新岗位</p>
<p class="text-gray-800 font-medium">产品设计师</p>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">异动类型</p>
<p class="text-gray-800 font-medium">部门调动</p>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">异动时间</p>
<p class="text-gray-800 font-medium">2023-06-15</p>
</div>
<div class="col-span-2">
<p class="text-sm text-gray-500 mb-1">异动原因</p>
<p class="text-gray-800 font-medium">根据公司人才发展规划,结合员工个人职业发展意愿,经双方协商一致,同意调动。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 证件信息 -->
<div class="mb-8">
<h3 class="text-lg font-medium text-gray-800 mb-4 pb-2 border-b">证件信息</h3>
<div class="grid grid-cols-2 gap-6">
<div>
<p class="text-sm text-gray-500 mb-2">身份证正面</p>
<div class="h-48 bg-gray-100 rounded-md overflow-hidden">
<img src="https://mastergo.com/ai/api/search-image?query=Chinese20ID20card20front20side20realistic20photo20white20background20high20resolution20detailed20text20and20portrait&width=600&height=400&orientation=landscape&flag=e6c18985431a6efddd63bff3f2e5a4e9"
alt="身份证正面" class="w-full h-full object-cover">
</div>
</div>
<div>
<p class="text-sm text-gray-500 mb-2">身份证反面</p>
<div class="h-48 bg-gray-100 rounded-md overflow-hidden">
<img src="https://mastergo.com/ai/api/search-image?query=Chinese20ID20card20back20side20realistic20photo20white20background20high20resolution20detailed20text20and20barcode&width=600&height=400&orientation=landscape&flag=2737ba49402a36d436de3b0671643607"
alt="身份证反面" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
<!-- 审批流程 -->
<div>
<h3 class="text-lg font-medium text-gray-800 mb-4 pb-2 border-b">审批流程</h3>
<div class="relative">
<!-- 时间轴 -->
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-200"></div>
<!-- 流程节点 -->
<div class="space-y-8">
<!-- 提交申请 -->
<div class="relative pl-16">
<div class="absolute left-0 top-0 w-16 flex justify-center">
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
</div>
<div class="bg-green-50 rounded-md p-4">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium text-green-800">提交申请</h4>
<span class="text-sm text-green-600">2023-06-05 09:30</span>
</div>
<p class="text-sm text-gray-700">申请人:林志强</p>
</div>
</div>
<!-- 部门经理审批 -->
<div class="relative pl-16">
<div class="absolute left-0 top-0 w-16 flex justify-center">
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
</div>
<div class="bg-green-50 rounded-md p-4">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium text-green-800">部门经理审批</h4>
<span class="text-sm text-green-600">2023-06-05 14:15</span>
</div>
<p class="text-sm text-gray-700">审批人:王建国(前端开发部经理)</p>
<p class="text-sm text-gray-700 mt-1">审批意见:同意调动,该员工在产品设计方面有潜力。</p>
</div>
</div>
<!-- 技术总监审批 -->
<div class="relative pl-16">
<div class="absolute left-0 top-0 w-16 flex justify-center">
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
</div>
<div class="bg-green-50 rounded-md p-4">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium text-green-800">技术总监审批</h4>
<span class="text-sm text-green-600">2023-06-06 10:45</span>
</div>
<p class="text-sm text-gray-700">审批人:张伟(技术中心总监)</p>
<p class="text-sm text-gray-700 mt-1">审批意见:同意,符合技术人才发展规划。</p>
</div>
</div>
<!-- HR审批 -->
<div class="relative pl-16">
<div class="absolute left-0 top-0 w-16 flex justify-center">
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
</div>
<div class="bg-green-50 rounded-md p-4">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium text-green-800">HR审批</h4>
<span class="text-sm text-green-600">2023-06-07 11:20</span>
</div>
<p class="text-sm text-gray-700">审批人:李芳(人力资源部经理)</p>
<p class="text-sm text-gray-700 mt-1">审批意见:已核实相关情况,同意调动。</p>
</div>
</div>
<!-- 总经理审批 -->
<div class="relative pl-16">
<div class="absolute left-0 top-0 w-16 flex justify-center">
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
</div>
<div class="bg-green-50 rounded-md p-4">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium text-green-800">总经理审批</h4>
<span class="text-sm text-green-600">2023-06-08 16:30</span>
</div>
<p class="text-sm text-gray-700">审批人:陈明(总经理)</p>
<p class="text-sm text-gray-700 mt-1">审批意见:同意执行。</p>
</div>
</div>
<!-- 入职生效 -->
<div class="relative pl-16">
<div class="absolute left-0 top-0 w-16 flex justify-center">
<div class="w-4 h-4 rounded-full bg-blue-500 border-4 border-blue-100"></div>
</div>
<div class="bg-blue-50 rounded-md p-4">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium text-blue-800">入职生效</h4>
<span class="text-sm text-blue-600">待处理</span>
</div>
<p class="text-sm text-gray-700">计划生效日期2023-06-15</p>
</div>
</div>
<!-- 审批完结 -->
<div class="relative pl-16">
<div class="absolute left-0 top-0 w-16 flex justify-center">
<div class="w-4 h-4 rounded-full bg-gray-300 border-4 border-gray-100"></div>
</div>
<div class="bg-gray-50 rounded-md p-4">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium text-gray-800">审批完结</h4>
<span class="text-sm text-gray-500">未开始</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- 底部通栏 -->
<footer class="bg-gray-800 text-white w-full 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">
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">公司简介</a></li>
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">发展历程</a></li>
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">企业文化</a></li>
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">管理团队</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-medium mb-4">产品服务</h3>
<ul class="space-y-2">
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">人力资源系统</a></li>
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">薪酬管理系统</a></li>
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">绩效考核系统</a></li>
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">培训发展平台</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-medium mb-4">联系我们</h3>
<ul class="space-y-2">
<li class="text-xs text-gray-400">电话400-888-8888</li>
<li class="text-xs text-gray-400">邮箱service@hrsystem.com</li>
<li class="text-xs text-gray-400">地址北京市海淀区科技园路88号</li>
</ul>
</div>
<div>
<h3 class="text-sm font-medium mb-4">关注我们</h3>
<div class="flex space-x-4">
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition">
<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-primary transition">
<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-primary transition">
<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-center">
<p class="text-xs text-gray-500">© 2023 人力资源管理系统 版权所有 京ICP备12345678号</p>
</div>
</div>
</footer>
</body>
</html>