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.
401 lines
25 KiB
HTML
401 lines
25 KiB
HTML
2 months 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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></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>
|
||
|
|
.fa-icon {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.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(-100%); }
|
||
|
|
}
|
||
|
|
.card-hover:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="min-h-[1024px] flex flex-col bg-secondary">
|
||
|
|
<!-- 顶部导航栏 -->
|
||
|
|
<!-- <header class="w-full bg-primary text-white shadow-md">
|
||
|
|
<div class="container mx-auto px-6 h-[60px] flex items-center justify-between">
|
||
|
|
<div class="flex items-center space-x-8">
|
||
|
|
<a href="#" class="text-2xl font-['Pacifico']">人力</a>
|
||
|
|
<nav class="hidden md:flex space-x-6">
|
||
|
|
<a href="#" class="text-sm hover:opacity-80">多维统计</a>
|
||
|
|
<a href="#" class="text-sm hover:opacity-80">人员管理</a>
|
||
|
|
<a href="#" class="text-sm hover:opacity-80">组织管理</a>
|
||
|
|
<a href="#" class="text-sm hover:opacity-80">考勤管理</a>
|
||
|
|
<a href="#" class="text-sm hover:opacity-80">绩效管理</a>
|
||
|
|
<a href="#" class="text-sm hover:opacity-80">薪酬管理</a>
|
||
|
|
<a href="#" class="text-sm font-semibold hover:opacity-80">知识库</a>
|
||
|
|
<a href="#" class="text-sm hover:opacity-80">后台管理</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<div class="relative hidden md:block">
|
||
|
|
<input type="text" placeholder="搜索..." class="py-1 pl-8 pr-4 text-sm rounded-button bg-white bg-opacity-20 placeholder-white focus:outline-none focus:ring-1 focus:ring-white">
|
||
|
|
<i class="fas fa-search fa-icon text-sm absolute left-2 top-1/2 transform -translate-y-1/2"></i>
|
||
|
|
</div>
|
||
|
|
<button class="flex items-center space-x-1 bg-white bg-opacity-20 px-3 py-1 rounded-button hover:bg-opacity-30">
|
||
|
|
<i class="fas fa-robot fa-icon text-sm"></i>
|
||
|
|
<span class="text-sm whitespace-nowrap">AI 助手</span>
|
||
|
|
</button>
|
||
|
|
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center overflow-hidden">
|
||
|
|
<img src="https://mastergo.com/ai/api/search-image?query=professional20business20profile20photo20of20a20young20asian20female20executive20with20short20hair20wearing20formal20attire20against20a20neutral20light20gray20background&width=80&height=80&orientation=squarish&flag=7fe686c57027aca4551bef56744d5fdf" alt="用户头像" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header> -->
|
||
|
|
|
||
|
|
<!-- 主内容区域 -->
|
||
|
|
<main class="flex-1 container mx-auto px-6 py-8">
|
||
|
|
<!-- 面包屑导航 -->
|
||
|
|
<!-- <div class="flex items-center text-sm text-gray-600 mb-4">
|
||
|
|
<a href="#" class="hover:text-primary">首页</a>
|
||
|
|
<i class="fas fa-chevron-right fa-icon mx-2 text-xs"></i>
|
||
|
|
<span>知识库</span>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<!-- 页面标题和操作区 -->
|
||
|
|
<div class="flex justify-between items-center mb-6">
|
||
|
|
<h1 class="text-2xl font-bold text-gray-800">知识库管理</h1>
|
||
|
|
<div class="flex space-x-3">
|
||
|
|
<div class="relative">
|
||
|
|
<input type="text" placeholder="搜索知识..." class="py-2 pl-10 pr-4 text-sm rounded-button border border-gray-300 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
||
|
|
<i class="fas fa-search fa-icon text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2"></i>
|
||
|
|
</div>
|
||
|
|
<button class="bg-primary text-white px-4 py-2 rounded-button hover:bg-opacity-90 flex items-center space-x-2">
|
||
|
|
<i class="fas fa-plus fa-icon text-sm"></i>
|
||
|
|
<span class="whitespace-nowrap">新建知识</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 公告栏 -->
|
||
|
|
<div class="bg-white rounded-md shadow-sm p-3 mb-6">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-button text-xs font-medium mr-3">公告</div>
|
||
|
|
<div class="scroll-container w-full">
|
||
|
|
<div class="scroll-content text-sm text-gray-700">
|
||
|
|
<span class="mr-8">系统将于 2023 年 12 月 15 日 00:00 - 02:00 进行维护升级</span>
|
||
|
|
<span class="mr-8">新员工入职指南已更新，请及时查阅</span>
|
||
|
|
<span class="mr-8">2023 年度绩效考核标准已发布</span>
|
||
|
|
<span class="mr-8">系统将于 2023 年 12 月 15 日 00:00 - 02:00 进行维护升级</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 分类筛选 -->
|
||
|
|
<div class="flex items-center space-x-4 mb-6 overflow-x-auto pb-2">
|
||
|
|
<button class="px-4 py-2 bg-primary text-white rounded-button whitespace-nowrap">全部</button>
|
||
|
|
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">政策制度</button>
|
||
|
|
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">操作手册</button>
|
||
|
|
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">培训资料</button>
|
||
|
|
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">常见问题</button>
|
||
|
|
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">模板下载</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 知识卡片列表 -->
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||
|
|
<!-- 卡片1 -->
|
||
|
|
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
||
|
|
<div class="h-40 overflow-hidden">
|
||
|
|
<img src="https://mastergo.com/ai/api/search-image?query=a20modern20business20document20with20clean20design20and20minimalist20layout20on20a20white20desk20with20a20pen20and20coffee20cup20in20the20background&width=400&height=200&orientation=landscape&flag=1e4cf2beacde2cc80fc63a0f89a9703a" alt="文档封面" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-4">
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<h3 class="font-medium text-gray-800">2023 年员工手册</h3>
|
||
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-button">政策制度</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">包含公司文化、行为规范、考勤制度、福利政策等最新修订版员工手册，适用于全体员工。</p>
|
||
|
|
<div class="flex justify-between items-center text-xs text-gray-500">
|
||
|
|
<span>更新于 2023-11-20</span>
|
||
|
|
<span>下载 128 次</span>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex space-x-2">
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 卡片2 -->
|
||
|
|
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
||
|
|
<div class="h-40 overflow-hidden">
|
||
|
|
<img src="https://mastergo.com/ai/api/search-image?query=a20step20by20step20illustration20of20HR20software20interface20with20clear20numbering20and20annotations20on20a20light20gray20background&width=400&height=200&orientation=landscape&flag=108451af3b1eb2058f31b710d4071080" alt="操作手册封面" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-4">
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<h3 class="font-medium text-gray-800">考勤系统操作指南</h3>
|
||
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-button">操作手册</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">详细说明如何使用公司考勤系统，包括打卡、请假申请、加班申请、考勤异常处理等操作步骤。</p>
|
||
|
|
<div class="flex justify-between items-center text-xs text-gray-500">
|
||
|
|
<span>更新于 2023-10-15</span>
|
||
|
|
<span>下载 256 次</span>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex space-x-2">
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 卡片3 -->
|
||
|
|
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
||
|
|
<div class="h-40 overflow-hidden">
|
||
|
|
<img src="https://mastergo.com/ai/api/search-image?query=a20professional20training20presentation20slide20with20bullet20points20and20infographics20on20a20projector20screen20in20a20meeting20room&width=400&height=200&orientation=landscape&flag=91a52e2f3cc2550ca2a643ea105f2d4b" alt="培训资料封面" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-4">
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<h3 class="font-medium text-gray-800">新员工入职培训</h3>
|
||
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-button">培训资料</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">新员工入职培训全套资料，包含公司介绍、部门职能、产品知识、安全规范等内容。</p>
|
||
|
|
<div class="flex justify-between items-center text-xs text-gray-500">
|
||
|
|
<span>更新于 2023-09-28</span>
|
||
|
|
<span>下载 189 次</span>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex space-x-2">
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 卡片4 -->
|
||
|
|
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
||
|
|
<div class="h-40 overflow-hidden">
|
||
|
|
<img src="https://mastergo.com/ai/api/search-image?query=a20frequently20asked20questions20list20with20question20marks20and20answers20in20a20modern20digital20interface20design&width=400&height=200&orientation=landscape&flag=923ef06f9362683938111ad04bb8643c" alt="FAQ封面" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-4">
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<h3 class="font-medium text-gray-800">HR 系统常见问题</h3>
|
||
|
|
<span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-button">常见问题</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">整理了员工在使用 HR 系统过程中遇到的常见问题及解决方案，持续更新中。</p>
|
||
|
|
<div class="flex justify-between items-center text-xs text-gray-500">
|
||
|
|
<span>更新于 2023-11-05</span>
|
||
|
|
<span>浏览 342 次</span>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex space-x-2">
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-eye fa-icon mr-1"></i> 查看
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-bookmark fa-icon mr-1"></i> 收藏
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 卡片5 -->
|
||
|
|
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
||
|
|
<div class="h-40 overflow-hidden">
|
||
|
|
<img src="https://mastergo.com/ai/api/search-image?query=a20collection20of20office20document20templates20including20forms20and20contracts20neatly20stacked20on20a20desk20with20a20laptop&width=400&height=200&orientation=landscape&flag=2a11c867bb72b869508c9cbccb7f198c" alt="模板封面" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-4">
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<h3 class="font-medium text-gray-800">人力资源常用模板</h3>
|
||
|
|
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-button">模板下载</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">包含劳动合同、离职申请表、转正申请表、调岗申请表等常用人力资源表格模板。</p>
|
||
|
|
<div class="flex justify-between items-center text-xs text-gray-500">
|
||
|
|
<span>更新于 2023-08-12</span>
|
||
|
|
<span>下载 421 次</span>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex space-x-2">
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 卡片6 -->
|
||
|
|
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
||
|
|
<div class="h-40 overflow-hidden">
|
||
|
|
<img src="https://mastergo.com/ai/api/search-image?query=a20performance20management20framework20diagram20with20key20metrics20and20evaluation20criteria20presented20in20a20modern20corporate20style&width=400&height=200&orientation=landscape&flag=72c9f106f07f07f22208f2c8edfd99fb" alt="绩效封面" class="w-full h-full object-cover">
|
||
|
|
</div>
|
||
|
|
<div class="p-4">
|
||
|
|
<div class="flex justify-between items-start mb-2">
|
||
|
|
<h3 class="font-medium text-gray-800">绩效考核标准与流程</h3>
|
||
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-button">政策制度</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">详细说明公司绩效考核的标准、流程、时间节点及评分细则，适用于管理人员参考。</p>
|
||
|
|
<div class="flex justify-between items-center text-xs text-gray-500">
|
||
|
|
<span>更新于 2023-07-30</span>
|
||
|
|
<span>下载 178 次</span>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex space-x-2">
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
||
|
|
</button>
|
||
|
|
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
||
|
|
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="flex justify-center mt-8">
|
||
|
|
<nav class="inline-flex rounded-md shadow-sm">
|
||
|
|
<button class="px-3 py-1 rounded-l-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">
|
||
|
|
<i class="fas fa-chevron-left fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
<button class="px-3 py-1 border-t border-b border-gray-300 bg-primary text-white">1</button>
|
||
|
|
<button class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">2</button>
|
||
|
|
<button class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">3</button>
|
||
|
|
<button class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">4</button>
|
||
|
|
<button class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">5</button>
|
||
|
|
<button class="px-3 py-1 rounded-r-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">
|
||
|
|
<i class="fas fa-chevron-right fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- 页脚 -->
|
||
|
|
<footer class="w-full bg-gray-800 text-white py-8">
|
||
|
|
<div class="container mx-auto px-6">
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-6">
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-medium mb-4">关于我们</h3>
|
||
|
|
<ul class="space-y-2 text-sm 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>
|
||
|
|
<h3 class="text-lg font-medium mb-4">帮助中心</h3>
|
||
|
|
<ul class="space-y-2 text-sm 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>
|
||
|
|
<h3 class="text-lg font-medium mb-4">联系我们</h3>
|
||
|
|
<ul class="space-y-2 text-sm text-gray-300">
|
||
|
|
<li><i class="fas fa-map-marker-alt fa-icon mr-2"></i> 北京市海淀区中关村南大街5号</li>
|
||
|
|
<li><i class="fas fa-phone fa-icon mr-2"></i> 400-888-8888</li>
|
||
|
|
<li><i class="fas fa-envelope fa-icon mr-2"></i> hr@company.com</li>
|
||
|
|
<li><i class="fas fa-clock fa-icon mr-2"></i> 周一至周五 9:00-18:00</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-medium mb-4">关注我们</h3>
|
||
|
|
<div class="flex space-x-4 mb-4">
|
||
|
|
<a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary">
|
||
|
|
<i class="fab fa-weixin fa-icon"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary">
|
||
|
|
<i class="fab fa-weibo fa-icon"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary">
|
||
|
|
<i class="fab fa-linkedin-in fa-icon"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary">
|
||
|
|
<i class="fab fa-github fa-icon"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<p class="text-sm text-gray-300">订阅我们的新闻通讯</p>
|
||
|
|
<div class="mt-2 flex">
|
||
|
|
<input type="email" placeholder="您的邮箱" class="py-2 px-3 text-sm rounded-l-md border-none focus:outline-none focus:ring-1 focus:ring-primary w-full">
|
||
|
|
<button class="bg-primary text-white px-3 py-2 rounded-r-md hover:bg-opacity-90">
|
||
|
|
<i class="fas fa-paper-plane fa-icon"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pt-6 border-t border-gray-700 text-center text-sm text-gray-400">
|
||
|
|
<p>© 2023 人力管理系统 版权所有 | 京ICP备12345678号-1 | 京公网安备11010802012345号</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|