jiangxucong
/
flx-lms-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '142e047979'
${ noResults }
flx-lms-fe/public/考勤详情及排查.html

527 lines
32 KiB
HTML
Raw Normal View History Unescape Escape

后台管理页面开发
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 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>
.marquee {
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.card-hover:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.table-row-hover:hover {
background-color: #F5F6FA;
}
.button-click:active {
transform: scale(0.98);
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body class="min-h-[1024px] bg-secondary font-sans">
<!-- 顶部导航栏 -->
<header class="w-full bg-primary text-white shadow-md">
<div class="container mx-auto px-6 py-3 flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center">
<span class="font-['Pacifico'] text-xl mr-10">人力</span>
<!-- 导航菜单 -->
<nav class="hidden md:flex space-x-6">
<a href="#" class="text-sm hover:text-gray-200 transition">多维统计</a>
<a href="#" class="text-sm hover:text-gray-200 transition">人员管理</a>
<a href="#" class="text-sm hover:text-gray-200 transition">组织管理</a>
<a href="#" class="text-sm hover:text-gray-200 transition">考勤管理</a>
<a href="#" class="text-sm hover:text-gray-200 transition">绩效管理</a>
<a href="#" class="text-sm hover:text-gray-200 transition">薪酬管理</a>
<a href="#" class="text-sm hover:text-gray-200 transition">知识库</a>
<a href="#" class="text-sm hover:text-gray-200 transition">后台管理</a>
</nav>
</div>
<!-- 右侧功能区 -->
<div class="flex items-center space-x-4">
<!-- 搜索框 -->
<div class="relative hidden md:block">
<input type="text" placeholder="搜索..." class="bg-white text-gray-800 rounded-button pl-8 pr-4 py-1 text-sm w-48 focus:outline-none focus:ring-2 focus:ring-primary">
<i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm"></i>
</div>
<!-- 用户头像 -->
<div class="relative">
<img src="https://mastergo.com/ai/api/search-image?query=professional20business20person20avatar20with20blue20background20modern20flat20design20simple20and20clean20style20high20quality20detailed20facial20features20corporate20identity20isolated20on20solid20color20background&width=40&height=40&orientation=squarish&flag=9860deef32d4e3ff72a4534d7698d477"
alt="用户头像"
class="w-8 h-8 rounded-full object-cover cursor-pointer">
</div>
<!-- AI助手 -->
<button class="bg-white text-primary rounded-button px-3 py-1 text-sm flex items-center whitespace-nowrap button-click">
<i class="fas fa-robot mr-1 text-sm"></i>
AI助手
</button>
<!-- 移动端菜单按钮 -->
<button class="md:hidden">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</header>
<!-- 公告栏 -->
<div class="bg-white shadow-sm">
<div class="container mx-auto px-6 py-2 overflow-hidden">
<div class="flex items-center">
<span class="bg-red-500 text-white text-xs px-2 py-1 rounded mr-3">公告</span>
<div class="whitespace-nowrap marquee">
<span class="text-sm text-gray-700">系统将于2023年12月25日00:00至06:00进行升级维护，期间系统将无法访问，请提前做好工作安排。</span>
</div>
</div>
</div>
</div>
<!-- 主要内容区 -->
<main class="container mx-auto px-6 py-8">
<!-- 查询条件 -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
<div class="flex flex-wrap items-end -mx-2">
<div class="w-full md:w-1/4 px-2 mb-4 md:mb-0">
<label class="block text-sm font-medium text-gray-700 mb-1">员工 ID</label>
<input type="text" class="w-full border border-gray-300 rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入员工ID">
</div>
<div class="w-full md:w-1/4 px-2 mb-4 md:mb-0">
<label class="block text-sm font-medium text-gray-700 mb-1">员工姓名</label>
<input type="text" class="w-full border border-gray-300 rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入员工姓名">
</div>
<div class="w-full md:w-1/4 px-2 mb-4 md:mb-0">
<label class="block text-sm font-medium text-gray-700 mb-1">日期范围</label>
<div class="relative">
<input type="text" class="w-full border border-gray-300 rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="选择日期范围">
<i class="fas fa-calendar-alt absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm"></i>
</div>
</div>
<div class="w-full md:w-1/4 px-2">
<button class="w-full bg-primary text-white rounded-button px-4 py-2 text-sm hover:bg-blue-600 transition button-click whitespace-nowrap">
<i class="fas fa-search mr-1"></i> 查询
</button>
</div>
</div>
</div>
<!-- 第一行卡片组 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<!-- 员工基本信息卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover transition">
<div class="flex items-center mb-4">
<img src="https://mastergo.com/ai/api/search-image?query=professional20asian20business20woman20portrait20with20white20background20modern20office20attire20high20quality20detailed20facial20features20corporate20identity20isolated20on20solid20color20background&width=80&height=80&orientation=squarish&flag=be98d141ba2245f194713abc5bba69dc"
alt="员工头像"
class="w-16 h-16 rounded-full object-cover mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-800">张雨晴</h3>
<p class="text-sm text-gray-600">ID: E10086</p>
</div>
</div>
<div class="space-y-2">
<div class="flex">
<span class="text-sm text-gray-600 w-20">部门:</span>
<span class="text-sm text-gray-800">产品研发中心</span>
</div>
<div class="flex">
<span class="text-sm text-gray-600 w-20">岗位:</span>
<span class="text-sm text-gray-800">高级产品经理</span>
</div>
<div class="flex">
<span class="text-sm text-gray-600 w-20">职级:</span>
<span class="text-sm text-gray-800">P7</span>
</div>
<div class="flex">
<span class="text-sm text-gray-600 w-20">入职日期:</span>
<span class="text-sm text-gray-800">2019-05-15</span>
</div>
</div>
</div>
<!-- 考勤状态卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover transition">
<h3 class="text-lg font-semibold text-gray-800 mb-4">今日考勤状态</h3>
<div class="flex items-center mb-3">
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
<span class="text-sm font-medium text-gray-800">正常出勤</span>
</div>
<div class="space-y-2 text-sm text-gray-700">
<p>上班打卡: 08:58 (准时)</p>
<p>下班打卡: 18:32 (准时)</p>
<p>工作时长: 9小时34分钟</p>
<p>本月累计出勤: 18天</p>
</div>
</div>
<!-- 操作按钮卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover transition">
<h3 class="text-lg font-semibold text-gray-800 mb-4">快捷操作</h3>
<div class="grid grid-cols-2 gap-3">
<button class="bg-secondary text-gray-800 rounded-button px-3 py-2 text-sm hover:bg-gray-200 transition button-click whitespace-nowrap">
<i class="fas fa-sync-alt mr-1"></i> 重新同步
</button>
<button class="bg-secondary text-gray-800 rounded-button px-3 py-2 text-sm hover:bg-gray-200 transition button-click whitespace-nowrap">
<i class="fas fa-exclamation-triangle mr-1"></i> 异常提报
</button>
<button class="bg-secondary text-gray-800 rounded-button px-3 py-2 text-sm hover:bg-gray-200 transition button-click whitespace-nowrap">
<i class="fas fa-edit mr-1"></i> 修改记录
</button>
<button class="bg-secondary text-gray-800 rounded-button px-3 py-2 text-sm hover:bg-gray-200 transition button-click whitespace-nowrap">
<i class="fas fa-file-export mr-1"></i> 导出数据
</button>
<button class="bg-primary text-white rounded-button px-3 py-2 text-sm hover:bg-blue-600 transition button-click whitespace-nowrap col-span-2">
<i class="fas fa-chart-line mr-1"></i> 查看考勤分析
</button>
</div>
</div>
</div>
<!-- 考勤数据表格 -->
<div class="bg-white rounded-lg shadow overflow-hidden mb-6">
<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="table-row-hover">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2023-11-01</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">总部大楼-3F</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">正常</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">08:56</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">18:30</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">9小时34分钟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
<button class="text-primary hover:text-blue-600">详情</button>
</td>
</tr>
<tr class="table-row-hover">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2023-10-31</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">总部大楼-3F</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">正常</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">09:02</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">18:45</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">9小时43分钟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
<button class="text-primary hover:text-blue-600">详情</button>
</td>
</tr>
<tr class="table-row-hover">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2023-10-30</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">远程办公</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">远程</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">09:15</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">18:50</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">9小时35分钟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
<button class="text-primary hover:text-blue-600">详情</button>
</td>
</tr>
<tr class="table-row-hover">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2023-10-27</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">总部大楼-3F</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">迟到</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">09:35</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">18:20</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">8小时45分钟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
<button class="text-primary hover:text-blue-600">详情</button>
</td>
</tr>
<tr class="table-row-hover">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2023-10-26</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">总部大楼-3F</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">正常</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">08:50</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">18:10</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">9小时20分钟</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
<button class="text-primary hover:text-blue-600">详情</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
<div class="flex-1 flex justify-between sm:hidden">
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
上一页
</button>
<button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
下一页
</button>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">32</span> 条记录
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">上一页</span>
<i class="fas fa-chevron-left"></i>
</button>
<button aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1
</button>
<button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
2
</button>
<button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
3
</button>
<button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">下一页</span>
<i class="fas fa-chevron-right"></i>
</button>
</nav>
</div>
</div>
</div>
</div>
<!-- 第二行卡片组 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<!-- 排班数据卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover transition">
<h3 class="text-lg font-semibold text-gray-800 mb-4">当前排班</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-sm text-gray-600">排班名称:</span>
<span class="text-sm text-gray-800 font-medium">标准工作日</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">上班时间:</span>
<span class="text-sm text-gray-800 font-medium">09:00</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">下班时间:</span>
<span class="text-sm text-gray-800 font-medium">18:00</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">午休时间:</span>
<span class="text-sm text-gray-800 font-medium">12:00-13:30</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">适用日期:</span>
<span class="text-sm text-gray-800 font-medium">周一至周五</span>
</div>
<div class="pt-3 mt-3 border-t border-gray-200">
<button class="w-full bg-secondary text-gray-800 rounded-button px-3 py-2 text-sm hover:bg-gray-200 transition button-click whitespace-nowrap">
<i class="fas fa-calendar-alt mr-1"></i> 查看排班历史
</button>
</div>
</div>
</div>
<!-- 考勤明细卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover transition">
<h3 class="text-lg font-semibold text-gray-800 mb-4">本月考勤统计</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-sm text-gray-600">应出勤天数:</span>
<span class="text-sm text-gray-800 font-medium">22天</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">实际出勤天数:</span>
<span class="text-sm text-gray-800 font-medium">18天</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">迟到次数:</span>
<span class="text-sm text-gray-800 font-medium">1次</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">早退次数:</span>
<span class="text-sm text-gray-800 font-medium">0次</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">缺卡次数:</span>
<span class="text-sm text-gray-800 font-medium">0次</span>
</div>
<div class="pt-3 mt-3 border-t border-gray-200">
<button class="w-full bg-secondary text-gray-800 rounded-button px-3 py-2 text-sm hover:bg-gray-200 transition button-click whitespace-nowrap">
<i class="fas fa-chart-pie mr-1"></i> 查看详细统计
</button>
</div>
</div>
</div>
<!-- 同步信息卡片 -->
<div class="bg-white rounded-lg shadow p-6 card-hover transition">
<h3 class="text-lg font-semibold text-gray-800 mb-4">数据同步信息</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-sm text-gray-600">最后同步时间:</span>
<span class="text-sm text-gray-800 font-medium">2023-11-01 23:45:12</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">同步状态:</span>
<span class="text-sm text-green-600 font-medium">成功</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">最后计算时间:</span>
<span class="text-sm text-gray-800 font-medium">2023-11-02 00:15:30</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">计算状态:</span>
<span class="text-sm text-green-600 font-medium">成功</span>
</div>
<div class="pt-3 mt-3 border-t border-gray-200">
<div class="flex space-x-3">
<button class="flex-1 bg-secondary text-gray-800 rounded-button px-3 py-2 text-sm hover:bg-gray-200 transition button-click whitespace-nowrap">
<i class="fas fa-sync-alt mr-1"></i> 立即同步
</button>
<button class="flex-1 bg-primary text-white rounded-button px-3 py-2 text-sm hover:bg-blue-600 transition button-click whitespace-nowrap">
<i class="fas fa-calculator mr-1"></i> 重新计算
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 考勤分析图表 -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800">月度考勤分析</h3>
<div class="flex space-x-2">
<button class="bg-secondary text-gray-800 rounded-button px-3 py-1 text-sm hover:bg-gray-200 transition button-click whitespace-nowrap">
<i class="fas fa-calendar-alt mr-1"></i> 选择月份
</button>
<button class="bg-primary text-white rounded-button px-3 py-1 text-sm hover:bg-blue-600 transition button-click whitespace-nowrap">
<i class="fas fa-download mr-1"></i> 导出图表
</button>
</div>
</div>
<div class="h-80" id="attendanceChart"></div>
</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">
<div>
<h3 class="font-['Pacifico'] text-xl mb-4">人力</h3>
<p class="text-sm text-gray-400 mb-4">专业的人力资源管理解决方案提供商</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<div>
<h4 class="text-sm font-semibold mb-4">产品</h4>
<ul class="space-y-2">
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">人力资源管理系统</a></li>
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">考勤管理系统</a></li>
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">绩效管理系统</a></li>
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">薪酬管理系统</a></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold mb-4">解决方案</h4>
<ul class="space-y-2">
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">制造业解决方案</a></li>
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">零售业解决方案</a></li>
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">互联网行业解决方案</a></li>
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">教育行业解决方案</a></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold mb-4">联系我们</h4>
<ul class="space-y-2">
<li class="flex items-center text-sm text-gray-400">
<i class="fas fa-map-marker-alt mr-2"></i> 北京市海淀区中关村软件园
</li>
<li class="flex items-center text-sm text-gray-400">
<i class="fas fa-phone-alt mr-2"></i> 400-888-8888
</li>
<li class="flex items-center text-sm text-gray-400">
<i class="fas fa-envelope mr-2"></i> contact@hrsystem.com
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
<p class="text-xs text-gray-500 mb-4 md:mb-0">© 2023 人力资源管理系统. 保留所有权利.</p>
<div class="flex space-x-6">
<a href="#" class="text-xs text-gray-500 hover:text-white transition">隐私政策</a>
<a href="#" class="text-xs text-gray-500 hover:text-white transition">服务条款</a>
<a href="#" class="text-xs text-gray-500 hover:text-white transition">法律声明</a>
</div>
</div>
</div>
</footer>
</body>
</html>