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.
359 lines
19 KiB
HTML
359 lines
19 KiB
HTML
1 day 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>
|
||
|
|
.font-logo {
|
||
|
|
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 20s linear infinite;
|
||
|
|
}
|
||
|
|
@keyframes scroll {
|
||
|
|
0% { transform: translateX(0); }
|
||
|
|
100% { transform: translateX(-50%); }
|
||
|
|
}
|
||
|
|
.tree-node {
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
.tree-node:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="min-h-[1024px] flex flex-col bg-secondary">
|
||
|
|
<!-- 顶部导航栏 -->
|
||
|
|
<header class="w-full h-[60px] bg-primary text-white sticky top-0 z-50 shadow-md">
|
||
|
|
<div class="container mx-auto h-full px-4 flex items-center justify-between">
|
||
|
|
<!-- Logo -->
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span class="font-logo text-2xl mr-8">人力</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 主导航 -->
|
||
|
|
<nav class="flex-1 flex justify-center">
|
||
|
|
<ul class="flex space-x-6 text-sm">
|
||
|
|
<li class="hover:text-secondary cursor-pointer">多维统计</li>
|
||
|
|
<li class="hover:text-secondary cursor-pointer">人员管理</li>
|
||
|
|
<li class="hover:text-secondary cursor-pointer">组织管理</li>
|
||
|
|
<li class="hover:text-secondary cursor-pointer">考勤管理</li>
|
||
|
|
<li class="hover:text-secondary cursor-pointer">绩效管理</li>
|
||
|
|
<li class="hover:text-secondary cursor-pointer">薪酬管理</li>
|
||
|
|
<li class="hover:text-secondary cursor-pointer">知识库</li>
|
||
|
|
<li class="hover:text-secondary cursor-pointer">后台管理</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- 右侧功能区 -->
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<!-- 搜索框 -->
|
||
|
|
<div class="relative">
|
||
|
|
<input type="text" placeholder="搜索..." class="bg-white/20 text-white placeholder-white/70 rounded-button pl-8 pr-4 py-1 text-sm w-40 focus:outline-none focus:ring-1 focus:ring-white">
|
||
|
|
<i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-white/70 text-sm"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AI助手 -->
|
||
|
|
<button class="bg-white/10 hover:bg-white/20 rounded-button px-3 py-1 text-sm flex items-center space-x-1">
|
||
|
|
<i class="fas fa-robot text-sm"></i>
|
||
|
|
<span>AI助手</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- 用户头像 -->
|
||
|
|
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center cursor-pointer">
|
||
|
|
<i class="fas fa-user text-sm"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- 主体内容 -->
|
||
|
|
<main class="flex-1 container mx-auto px-4 py-6 flex">
|
||
|
|
<!-- 左侧组织架构树 -->
|
||
|
|
<aside class="w-1/5 pr-4">
|
||
|
|
<div class="bg-white rounded-md shadow-sm p-4 h-full">
|
||
|
|
<h3 class="text-sm font-medium mb-4 text-gray-700">组织架构</h3>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-building mr-2 text-gray-500 text-sm"></i>
|
||
|
|
<span class="text-sm">集团公司</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pl-4">
|
||
|
|
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||
|
|
<span class="text-sm">华东事业部</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pl-4">
|
||
|
|
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||
|
|
<span class="text-sm">上海分公司</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pl-4">
|
||
|
|
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-users mr-2 text-gray-500 text-sm"></i>
|
||
|
|
<span class="text-sm">研发中心</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-users mr-2 text-gray-500 text-sm"></i>
|
||
|
|
<span class="text-sm">市场部</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||
|
|
<span class="text-sm">杭州分公司</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||
|
|
<span class="text-sm">华南事业部</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||
|
|
<span class="text-sm">华北事业部</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- 右侧内容区 -->
|
||
|
|
<section class="w-4/5">
|
||
|
|
<!-- 筛选区 -->
|
||
|
|
<div class="bg-white rounded-md shadow-sm p-4 mb-4">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<h3 class="text-sm font-medium text-gray-700">汇报关系</h3>
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span class="text-sm text-gray-500 mr-2">年份:</span>
|
||
|
|
<div class="relative">
|
||
|
|
<button class="bg-secondary hover:bg-gray-100 rounded-button px-3 py-1 text-sm flex items-center space-x-1">
|
||
|
|
<span>2023</span>
|
||
|
|
<i class="fas fa-chevron-down text-xs"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="bg-primary hover:bg-blue-600 text-white rounded-button px-3 py-1 text-sm flex items-center space-x-1">
|
||
|
|
<i class="fas fa-filter text-xs"></i>
|
||
|
|
<span>筛选</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 汇报关系树 -->
|
||
|
|
<div class="bg-white rounded-md shadow-sm p-6">
|
||
|
|
<div class="flex justify-center">
|
||
|
|
<div class="relative">
|
||
|
|
<!-- 第一层 -->
|
||
|
|
<div class="flex justify-center mb-8">
|
||
|
|
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||
|
|
<div class="w-12 h-12 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||
|
|
<i class="fas fa-user text-primary"></i>
|
||
|
|
</div>
|
||
|
|
<h4 class="text-sm font-medium">张明远</h4>
|
||
|
|
<p class="text-xs text-gray-500">CEO</p>
|
||
|
|
<p class="text-xs text-gray-500">集团公司</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 第二层 -->
|
||
|
|
<div class="flex justify-center space-x-16 mb-8">
|
||
|
|
<div class="relative">
|
||
|
|
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||
|
|
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||
|
|
<i class="fas fa-user text-primary text-sm"></i>
|
||
|
|
</div>
|
||
|
|
<h4 class="text-sm font-medium">李华</h4>
|
||
|
|
<p class="text-xs text-gray-500">副总裁</p>
|
||
|
|
<p class="text-xs text-gray-500">华东事业部</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="relative">
|
||
|
|
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||
|
|
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||
|
|
<i class="fas fa-user text-primary text-sm"></i>
|
||
|
|
</div>
|
||
|
|
<h4 class="text-sm font-medium">王伟</h4>
|
||
|
|
<p class="text-xs text-gray-500">副总裁</p>
|
||
|
|
<p class="text-xs text-gray-500">华南事业部</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 第三层 -->
|
||
|
|
<div class="flex justify-center space-x-32 mb-8">
|
||
|
|
<div class="relative">
|
||
|
|
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||
|
|
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||
|
|
<i class="fas fa-user text-primary text-xs"></i>
|
||
|
|
</div>
|
||
|
|
<h4 class="text-sm font-medium">陈思</h4>
|
||
|
|
<p class="text-xs text-gray-500">总监</p>
|
||
|
|
<p class="text-xs text-gray-500">上海分公司</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="relative">
|
||
|
|
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||
|
|
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||
|
|
<i class="fas fa-user text-primary text-xs"></i>
|
||
|
|
</div>
|
||
|
|
<h4 class="text-sm font-medium">赵阳</h4>
|
||
|
|
<p class="text-xs text-gray-500">总监</p>
|
||
|
|
<p class="text-xs text-gray-500">杭州分公司</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 第四层 -->
|
||
|
|
<div class="flex justify-center space-x-64">
|
||
|
|
<div class="relative">
|
||
|
|
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||
|
|
<div class="tree-node p-3 rounded-md shadow-sm border border-gray-100 w-40 text-center">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||
|
|
<i class="fas fa-user text-primary text-xs"></i>
|
||
|
|
</div>
|
||
|
|
<h4 class="text-xs font-medium">周婷</h4>
|
||
|
|
<p class="text-xs text-gray-500">经理</p>
|
||
|
|
<p class="text-xs text-gray-500">研发中心</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="relative">
|
||
|
|
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||
|
|
<div class="tree-node p-3 rounded-md shadow-sm border border-gray-100 w-40 text-center">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||
|
|
<i class="fas fa-user text-primary text-xs"></i>
|
||
|
|
</div>
|
||
|
|
<h4 class="text-xs font-medium">吴昊</h4>
|
||
|
|
<p class="text-xs text-gray-500">经理</p>
|
||
|
|
<p class="text-xs text-gray-500">市场部</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</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>
|
||
|
|
<h4 class="text-sm font-medium 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-medium 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-medium 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">API文档</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">联系我们</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="text-sm font-medium mb-4">联系我们</h4>
|
||
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
||
|
|
<li class="flex items-center"><i class="fas fa-phone-alt mr-2 text-xs"></i> 400-888-8888</li>
|
||
|
|
<li class="flex items-center"><i class="fas fa-envelope mr-2 text-xs"></i> service@hrsystem.com</li>
|
||
|
|
<li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-xs"></i> 上海市浦东新区张江高科技园区</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="border-t border-gray-700 mt-8 pt-6 flex justify-between items-center">
|
||
|
|
<p class="text-xs text-gray-400">© 2023 人力管理系统 版权所有</p>
|
||
|
|
<div class="flex space-x-4">
|
||
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin"></i></a>
|
||
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
|
||
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|