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.
440 lines
24 KiB
HTML
440 lines
24 KiB
HTML
<!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>
|
|
<script>document.addEventListener('DOMContentLoaded', function() {
|
|
document.querySelectorAll('.setTimeBtn').forEach(btn=> {
|
|
btn.addEventListener('click', function() {
|
|
const timeSettings=this.closest('.course-item').querySelector('.time-settings');
|
|
timeSettings.classList.toggle('hidden');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<style>
|
|
.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;
|
|
}
|
|
|
|
.tree-item {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tree-item:hover {
|
|
background-color: rgba(45, 92, 246, 0.1);
|
|
}
|
|
|
|
.course-item {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.course-item: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-[#F5F6FA]">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="w-full h-[60px] bg-primary text-white shadow-md">
|
|
<div class="w-[1200px] h-full mx-auto flex items-center justify-between">
|
|
<!-- Logo -->
|
|
<div class="flex items-center">
|
|
<h1 class="text-2xl font-['Pacifico']">人力</h1>
|
|
</div>
|
|
<!-- 导航菜单 -->
|
|
<nav class="flex-1 mx-8">
|
|
<ul class="flex space-x-6 text-sm">
|
|
<li class="hover:underline cursor-pointer">多维统计</li>
|
|
<li class="hover:underline cursor-pointer">人员管理</li>
|
|
<li class="hover:underline cursor-pointer">组织管理</li>
|
|
<li class="hover:underline cursor-pointer">考勤管理</li>
|
|
<li class="hover:underline cursor-pointer">绩效管理</li>
|
|
<li class="hover:underline cursor-pointer">薪酬管理</li>
|
|
<li class="hover:underline cursor-pointer">知识库</li>
|
|
<li class="hover:underline cursor-pointer">后台管理</li>
|
|
</ul>
|
|
</nav>
|
|
<!-- 右侧功能区 -->
|
|
<div class="flex items-center space-x-4">
|
|
<!-- 搜索框 -->
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索..."
|
|
class="h-8 pl-8 pr-3 text-sm rounded-button text-gray-700 focus:outline-none">
|
|
<i
|
|
class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
</div>
|
|
<!-- 用户头像 -->
|
|
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center cursor-pointer">
|
|
<i class="fas fa-user text-primary fa-icon w-4 h-4"></i>
|
|
</div>
|
|
<!-- AI助手 -->
|
|
<button
|
|
class="h-8 px-3 bg-white text-primary rounded-button flex items-center space-x-1 hover:bg-opacity-90">
|
|
<i class="fas fa-robot fa-icon w-4 h-4"></i>
|
|
<span class="text-sm whitespace-nowrap">AI助手</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- 主要内容区域 -->
|
|
<main class="flex-1 w-[1200px] mx-auto my-6 flex">
|
|
<!-- 左侧组织架构树 -->
|
|
<aside class="w-1/5 mr-6 bg-white rounded-md shadow p-4">
|
|
<h2 class="text-lg font-semibold mb-4 text-gray-700">组织架构</h2>
|
|
<div class="space-y-1">
|
|
<!-- 一级部门 -->
|
|
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
|
<span class="text-sm">集团总部</span>
|
|
</div>
|
|
<!-- 二级部门 -->
|
|
<div class="ml-4 mt-1 space-y-1">
|
|
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
|
<span class="text-sm">人力资源部</span>
|
|
</div>
|
|
<!-- 三级部门 -->
|
|
<div class="ml-4 mt-1 space-y-1">
|
|
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
|
<span class="text-sm">招聘组</span>
|
|
</div>
|
|
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
|
<span class="text-sm">培训组</span>
|
|
</div>
|
|
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
|
<span class="text-sm">薪酬组</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-chevron-right fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
|
<span class="text-sm">财务部</span>
|
|
</div>
|
|
</div>
|
|
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-chevron-right fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
|
<span class="text-sm">市场部</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-chevron-right fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
|
<span class="text-sm">华东分公司</span>
|
|
</div>
|
|
</div>
|
|
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-chevron-right fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
|
<span class="text-sm">华南分公司</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- 右侧培训管理页面 -->
|
|
<section class="w-4/5 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>
|
|
<button class="bg-primary text-white px-4 py-2 rounded-button hover:bg-opacity-90 whitespace-nowrap">
|
|
<i class="fas fa-plus fa-icon w-4 h-4 mr-1"></i>
|
|
新建培训
|
|
</button>
|
|
</div>
|
|
<!-- 培训基本信息 -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-medium mb-4 text-gray-700">基本信息</h3>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">培训名称</label>
|
|
<input type="text"
|
|
class="w-full h-10 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">培训封面</label>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-16 h-16 bg-gray-100 rounded-md flex items-center justify-center cursor-pointer">
|
|
<i class="fas fa-image fa-icon w-6 h-6 text-gray-400"></i>
|
|
</div>
|
|
<span class="ml-2 text-sm text-gray-500">点击上传封面</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">主题设计</label>
|
|
<div class="h-32 border border-gray-300 rounded-md p-2 bg-gray-50">
|
|
<p class="text-sm text-gray-500">在此输入培训主题和描述...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 培训详情 -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-medium mb-4 text-gray-700">培训详情</h3>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="flex space-x-4">
|
|
<div class="flex-1">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">开始时间</label>
|
|
<div class="flex items-center h-10 px-3 border border-gray-300 rounded-md">
|
|
<input type="date" class="flex-1 focus:outline-none">
|
|
<i class="fas fa-calendar-alt fa-icon w-4 h-4 text-gray-500 ml-2"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">结束时间</label>
|
|
<div class="flex items-center h-10 px-3 border border-gray-300 rounded-md">
|
|
<input type="date" class="flex-1 focus:outline-none">
|
|
<i class="fas fa-calendar-alt fa-icon w-4 h-4 text-gray-500 ml-2"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">培训费用(元)</label>
|
|
<input type="number"
|
|
class="w-full h-10 px-3 border border-gray-300 rounded-md focus:outline-none">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 课程管理 -->
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-medium mb-4 text-gray-700">课程管理</h3>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- 可选课程 -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="text-sm font-medium text-gray-700">可选课程</h4>
|
|
<div class="relative w-32">
|
|
<input type="text" placeholder="搜索课程"
|
|
class="w-full h-8 pl-8 pr-2 text-sm border border-gray-300 rounded-button focus:outline-none">
|
|
<i
|
|
class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
</div>
|
|
</div>
|
|
<div class="h-64 overflow-y-auto border border-gray-300 rounded-md p-2 space-y-2">
|
|
<!-- 课程项 -->
|
|
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="text-sm font-medium">高效沟通技巧</p>
|
|
<p class="text-xs text-gray-500">讲师: 张明远</p>
|
|
</div>
|
|
<span
|
|
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">2小时</span>
|
|
</div>
|
|
</div>
|
|
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="text-sm font-medium">团队协作与领导力</p>
|
|
<p class="text-xs text-gray-500">讲师: 李思雨</p>
|
|
</div>
|
|
<span
|
|
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">3小时</span>
|
|
</div>
|
|
</div>
|
|
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="text-sm font-medium">项目管理实战</p>
|
|
<p class="text-xs text-gray-500">讲师: 王建国</p>
|
|
</div>
|
|
<span
|
|
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">4小时</span>
|
|
</div>
|
|
</div>
|
|
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="text-sm font-medium">Excel高级应用</p>
|
|
<p class="text-xs text-gray-500">讲师: 陈晓芳</p>
|
|
</div>
|
|
<span
|
|
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">2.5小时</span>
|
|
</div>
|
|
</div>
|
|
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="text-sm font-medium">商务礼仪与职业形象</p>
|
|
<p class="text-xs text-gray-500">讲师: 赵雅芝</p>
|
|
</div>
|
|
<span
|
|
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">2小时</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 已选课程 -->
|
|
<div>
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">已选课程</h4>
|
|
<div class="h-64 overflow-y-auto border border-gray-300 rounded-md p-2 space-y-2">
|
|
<div class="course-item p-2 bg-primary bg-opacity-5 rounded-md">
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="text-sm font-medium">高效沟通技巧</p>
|
|
<p class="text-xs text-gray-500">讲师: 张明远</p>
|
|
</div>
|
|
<div class="flex space-x-1">
|
|
<span
|
|
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">2小时</span>
|
|
<button
|
|
class="text-primary text-xs hover:underline setTimeBtn">设置时间</button>
|
|
<i class="fas fa-times fa-icon w-4 h-4 text-red-500 cursor-pointer"></i>
|
|
</div>
|
|
</div>
|
|
<div class="time-settings hidden bg-gray-50 p-2 rounded-md space-y-2">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-xs text-gray-600">上课时间:</span>
|
|
<input type="date"
|
|
class="flex-1 text-xs p-1 border border-gray-300 rounded-button focus:outline-none focus:border-primary">
|
|
<input type="time"
|
|
class="w-24 text-xs p-1 border border-gray-300 rounded-button focus:outline-none focus:border-primary">
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
class="text-xs px-2 py-1 bg-primary text-white rounded-button hover:bg-opacity-90 whitespace-nowrap">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="course-item p-2 bg-primary bg-opacity-5 rounded-md">
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="text-sm font-medium">团队协作与领导力</p>
|
|
<p class="text-xs text-gray-500">讲师: 李思雨</p>
|
|
</div>
|
|
<div class="flex space-x-1">
|
|
<span
|
|
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">3小时</span>
|
|
<button
|
|
class="text-primary text-xs hover:underline setTimeBtn">设置时间</button>
|
|
<i class="fas fa-times fa-icon w-4 h-4 text-red-500 cursor-pointer"></i>
|
|
</div>
|
|
</div>
|
|
<div class="time-settings hidden bg-gray-50 p-2 rounded-md space-y-2">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-xs text-gray-600">上课时间:</span>
|
|
<input type="date"
|
|
class="flex-1 text-xs p-1 border border-gray-300 rounded-button focus:outline-none focus:border-primary">
|
|
<input type="time"
|
|
class="w-24 text-xs p-1 border border-gray-300 rounded-button focus:outline-none focus:border-primary">
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
class="text-xs px-2 py-1 bg-primary text-white rounded-button hover:bg-opacity-90 whitespace-nowrap">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end space-x-3">
|
|
<button
|
|
class="px-4 py-2 border border-gray-300 rounded-button hover:bg-gray-50 whitespace-nowrap">取消</button>
|
|
<button
|
|
class="px-4 py-2 bg-primary text-white rounded-button hover:bg-opacity-90 whitespace-nowrap">保存</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- 页脚 -->
|
|
<footer class="w-full h-[200px] bg-gray-800 text-white">
|
|
<div class="w-[1200px] h-full mx-auto py-8">
|
|
<div class="grid grid-cols-4 gap-8">
|
|
<div>
|
|
<h3 class="text-sm font-medium mb-3">关于我们</h3>
|
|
<ul class="space-y-2 text-xs text-gray-400">
|
|
<li class="cursor-pointer hover:text-white">公司简介</li>
|
|
<li class="cursor-pointer hover:text-white">发展历程</li>
|
|
<li class="cursor-pointer hover:text-white">企业文化</li>
|
|
<li class="cursor-pointer hover:text-white">加入我们</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium mb-3">帮助中心</h3>
|
|
<ul class="space-y-2 text-xs text-gray-400">
|
|
<li class="cursor-pointer hover:text-white">使用指南</li>
|
|
<li class="cursor-pointer hover:text-white">常见问题</li>
|
|
<li class="cursor-pointer hover:text-white">视频教程</li>
|
|
<li class="cursor-pointer hover:text-white">API文档</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium mb-3">联系方式</h3>
|
|
<ul class="space-y-2 text-xs text-gray-400">
|
|
<li class="cursor-pointer hover:text-white">客服电话: 400-123-4567</li>
|
|
<li class="cursor-pointer hover:text-white">邮箱: support@hrsystem.com</li>
|
|
<li class="cursor-pointer hover:text-white">地址: 北京市海淀区科技园路88号</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium mb-3">友情链接</h3>
|
|
<ul class="space-y-2 text-xs text-gray-400">
|
|
<li class="cursor-pointer hover:text-white">人力资源协会</li>
|
|
<li class="cursor-pointer hover:text-white">人才招聘网</li>
|
|
<li class="cursor-pointer hover:text-white">职业培训平台</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 pt-4 border-t border-gray-700 text-center text-xs text-gray-400">
|
|
<p>© 2023 人力资源管理系统 版权所有 | 京ICP备12345678号</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |