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.

441 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>
<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>
body {
min-height: 1024px;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.nav-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.course-row:hover {
background-color: #f8f9fa;
}
i {
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;
}
</style>
</head>
<body class="bg-gray-50">
<!-- 顶部导航栏 -->
<header class="bg-primary text-white sticky top-0 z-50">
<div class="container mx-auto px-6 h-16 flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center">
<h1 class="font-['Pacifico'] text-xl mr-10">人力</h1>
<!-- 导航菜单 -->
<nav class="hidden md:flex space-x-1">
<a href="#" class="nav-item px-4 py-2 text-sm rounded-button whitespace-nowrap">多维统计</a>
<a href="#" class="nav-item px-4 py-2 text-sm rounded-button whitespace-nowrap">人员管理</a>
<a href="#" class="nav-item px-4 py-2 text-sm rounded-button whitespace-nowrap">组织管理</a>
<a href="#" class="nav-item px-4 py-2 text-sm rounded-button whitespace-nowrap">考勤管理</a>
<a href="#" class="nav-item px-4 py-2 text-sm rounded-button whitespace-nowrap">绩效管理</a>
<a href="#" class="nav-item px-4 py-2 text-sm rounded-button whitespace-nowrap">薪酬管理</a>
<a href="#" class="nav-item px-4 py-2 text-sm rounded-button whitespace-nowrap">知识库</a>
<a href="#" class="nav-item px-4 py-2 text-sm rounded-button whitespace-nowrap">后台管理</a>
</nav>
</div>
<!-- 右侧功能区 -->
<div class="flex items-center space-x-4">
<!-- 搜索框 -->
<div class="relative hidden md:block">
<input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 text-sm rounded-button w-48 focus:outline-none">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<!-- AI助手 -->
<button class="flex items-center space-x-1 bg-white text-primary px-3 py-1 rounded-button text-sm whitespace-nowrap">
<i class="fas fa-robot w-4 h-4"></i>
<span>AI 助手</span>
</button>
<!-- 用户头像 -->
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center cursor-pointer">
<i class="fas fa-user text-primary"></i>
</div>
</div>
</div>
</header>
<!-- 主要内容区 -->
<main class="container mx-auto px-6 py-8 flex">
<!-- 左侧组织架构树 -->
<aside class="w-1/5 pr-6">
<div class="bg-white rounded-md shadow-sm p-4 h-full">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i class="fas fa-sitemap mr-2 w-5 h-5"></i>
<span>组织架构</span>
</h2>
<div class="space-y-2">
<div class="flex items-center cursor-pointer">
<i class="fas fa-chevron-right mr-2 w-3 h-3 text-gray-500"></i>
<span class="text-sm">集团总部</span>
</div>
<div class="pl-4">
<div class="flex items-center cursor-pointer">
<i class="fas fa-chevron-right mr-2 w-3 h-3 text-gray-500"></i>
<span class="text-sm">人力资源部</span>
</div>
<div class="pl-4">
<div class="flex items-center py-1">
<i class="fas fa-user mr-2 w-3 h-3 text-gray-500"></i>
<span class="text-sm">招聘组</span>
</div>
<div class="flex items-center py-1">
<i class="fas fa-user mr-2 w-3 h-3 text-gray-500"></i>
<span class="text-sm">培训组</span>
</div>
<div class="flex items-center py-1">
<i class="fas fa-user mr-2 w-3 h-3 text-gray-500"></i>
<span class="text-sm">薪酬组</span>
</div>
</div>
<div class="flex items-center cursor-pointer">
<i class="fas fa-chevron-right mr-2 w-3 h-3 text-gray-500"></i>
<span class="text-sm">财务部</span>
</div>
<div class="flex items-center cursor-pointer">
<i class="fas fa-chevron-right mr-2 w-3 h-3 text-gray-500"></i>
<span class="text-sm">技术部</span>
</div>
</div>
<div class="flex items-center cursor-pointer">
<i class="fas fa-chevron-right mr-2 w-3 h-3 text-gray-500"></i>
<span class="text-sm">华东分公司</span>
</div>
<div class="flex items-center cursor-pointer">
<i class="fas fa-chevron-right mr-2 w-3 h-3 text-gray-500"></i>
<span class="text-sm">华南分公司</span>
</div>
</div>
</div>
</aside>
<!-- 右侧培训计划详情 -->
<div class="w-4/5">
<!-- 培训基本信息 -->
<div class="bg-white rounded-md shadow-sm p-6 mb-6">
<div class="flex justify-between items-start mb-4">
<div>
<h2 class="text-2xl font-bold mb-2">2023年第三季度新员工培训计划</h2>
<div class="flex items-center text-sm text-gray-500 space-x-4">
<span><i class="fas fa-calendar-alt mr-1 w-4 h-4"></i> 2023-07-01 至 2023-09-30</span>
<span><i class="fas fa-users mr-1 w-4 h-4"></i> 参与人数: 86人</span>
<span><i class="fas fa-user-tie mr-1 w-4 h-4"></i> 负责人: 张明远</span>
</div>
</div>
<div class="flex space-x-2">
<button class="bg-primary text-white px-4 py-2 rounded-button text-sm whitespace-nowrap">
<i class="fas fa-edit mr-1 w-4 h-4"></i> 编辑
</button>
<button class="bg-secondary text-gray-700 px-4 py-2 rounded-button text-sm whitespace-nowrap">
<i class="fas fa-share-alt mr-1 w-4 h-4"></i> 分享
</button>
</div>
</div>
<div class="grid grid-cols-3 gap-4 mt-4">
<div class="border border-gray-200 rounded-md p-4">
<div class="text-gray-500 text-sm mb-1">培训状态</div>
<div class="font-medium">进行中</div>
</div>
<div class="border border-gray-200 rounded-md p-4">
<div class="text-gray-500 text-sm mb-1">已完成课程</div>
<div class="font-medium">12/24</div>
</div>
<div class="border border-gray-200 rounded-md p-4">
<div class="text-gray-500 text-sm mb-1">平均参与率</div>
<div class="font-medium">87.5%</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-semibold mb-2">培训描述</h3>
<p class="text-gray-700 text-sm leading-relaxed">
本培训计划针对2023年第三季度新入职员工设计包含公司文化、产品知识、业务流程等全方位培训内容。
通过系统化的培训帮助新员工快速融入团队,掌握工作所需的基本技能和知识,提升工作效率和团队协作能力。
</p>
</div>
</div>
<!-- 课程计划列表 -->
<div class="bg-white rounded-md shadow-sm p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold">课程计划</h2>
<div class="flex space-x-2">
<button class="border border-gray-300 px-3 py-1 rounded-button text-sm whitespace-nowrap">
<i class="fas fa-filter mr-1 w-4 h-4"></i> 筛选
</button>
<button class="border border-gray-300 px-3 py-1 rounded-button text-sm whitespace-nowrap">
<i class="fas fa-download mr-1 w-4 h-4"></i> 导出
</button>
<button class="bg-primary text-white px-3 py-1 rounded-button text-sm whitespace-nowrap">
<i class="fas fa-plus mr-1 w-4 h-4"></i> 添加课程
</button>
</div>
</div>
<!-- 课程表格 -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程名称</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">讲师</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程时间</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程类型</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程入口</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程地址</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="course-row">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">公司文化与价值观</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李华</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-03 09:00-12:00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">现场</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<a href="#" class="text-primary hover:underline">进入课程</a>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">总部大楼3层培训室A</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-primary-dark mr-2">
<i class="fas fa-edit w-4 h-4"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt w-4 h-4"></i>
</button>
</td>
</tr>
<tr class="course-row">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">产品知识入门</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王伟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-05 14:00-17:00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">在线</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<a href="#" class="text-primary hover:underline">进入课程</a>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">https://meeting.zoom.us/123456</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-primary-dark mr-2">
<i class="fas fa-edit w-4 h-4"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt w-4 h-4"></i>
</button>
</td>
</tr>
<tr class="course-row">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">业务流程概述</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张丽</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-07 09:00-12:00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">现场</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<a href="#" class="text-primary hover:underline">进入课程</a>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">总部大楼3层培训室B</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-primary-dark mr-2">
<i class="fas fa-edit w-4 h-4"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt w-4 h-4"></i>
</button>
</td>
</tr>
<tr class="course-row">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">团队协作与沟通</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">陈明</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-10 14:00-17:00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">在线</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<a href="#" class="text-primary hover:underline">进入课程</a>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">https://meeting.zoom.us/789012</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-primary-dark mr-2">
<i class="fas fa-edit w-4 h-4"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt w-4 h-4"></i>
</button>
</td>
</tr>
<tr class="course-row">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">办公软件高级应用</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">刘芳</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-12 09:00-12:00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">现场</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<a href="#" class="text-primary hover:underline">进入课程</a>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">总部大楼3层培训室A</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-primary hover:text-primary-dark mr-2">
<i class="fas fa-edit w-4 h-4"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt w-4 h-4"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div class="flex items-center justify-between mt-6">
<div class="text-sm text-gray-500">
显示 1 至 5 项,共 24 项
</div>
<div class="flex space-x-1">
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm disabled:opacity-50" disabled>
<i class="fas fa-chevron-left w-4 h-4"></i>
</button>
<button class="px-3 py-1 bg-primary text-white rounded-button text-sm">1</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm">2</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm">3</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm">...</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm">5</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm">
<i class="fas fa-chevron-right w-4 h-4"></i>
</button>
</div>
</div>
</div>
</div>
</main>
<!-- 底部页脚 -->
<footer class="bg-gray-800 text-white py-8 mt-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">关于我们</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-gray-300">公司简介</a></li>
<li><a href="#" class="hover:text-gray-300">发展历程</a></li>
<li><a href="#" class="hover:text-gray-300">企业文化</a></li>
<li><a href="#" class="hover:text-gray-300">管理团队</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">产品服务</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-gray-300">人力资源系统</a></li>
<li><a href="#" class="hover:text-gray-300">薪酬管理系统</a></li>
<li><a href="#" class="hover:text-gray-300">绩效管理系统</a></li>
<li><a href="#" class="hover:text-gray-300">培训管理系统</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">帮助中心</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-gray-300">常见问题</a></li>
<li><a href="#" class="hover:text-gray-300">使用指南</a></li>
<li><a href="#" class="hover:text-gray-300">视频教程</a></li>
<li><a href="#" class="hover:text-gray-300">API文档</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">联系我们</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-center">
<i class="fas fa-map-marker-alt mr-2 w-4 h-4"></i>
<span>北京市海淀区中关村南大街5号</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt mr-2 w-4 h-4"></i>
<span>400-888-8888</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope mr-2 w-4 h-4"></i>
<span>contact@hrsystem.com</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 flex justify-between items-center">
<div class="text-sm">
© 2023 人力资源管理系统 版权所有
</div>
<div class="flex space-x-4">
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
<i class="fab fa-weixin w-4 h-4"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
<i class="fab fa-weibo w-4 h-4"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
<i class="fab fa-linkedin-in w-4 h-4"></i>
</a>
</div>
</div>
</div>
</footer>
</body>
</html>