|
|
|
|
|
<!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>
|
