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