|
|
<!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>
|
|
|
body {
|
|
|
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
|
}
|
|
|
|
|
|
.logo {
|
|
|
font-family: 'Pacifico', serif;
|
|
|
}
|
|
|
|
|
|
.scroll-container {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.scroll-content {
|
|
|
display: inline-block;
|
|
|
white-space: nowrap;
|
|
|
animation: scroll 20s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes scroll {
|
|
|
0% {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.avatar {
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
border-radius: 9999px;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
|
|
|
.salary-chart {
|
|
|
width: 100%;
|
|
|
height: 300px;
|
|
|
}
|
|
|
|
|
|
.hover-effect:hover {
|
|
|
background-color: #F5F6FA;
|
|
|
transition: background-color 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.search-input {
|
|
|
width: 200px;
|
|
|
transition: width 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.search-input:focus {
|
|
|
width: 250px;
|
|
|
}
|
|
|
|
|
|
.nav-item {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.nav-item::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 50%;
|
|
|
width: 0;
|
|
|
height: 2px;
|
|
|
background-color: white;
|
|
|
transition: all 0.3s ease;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
|
|
|
.nav-item:hover::after {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
i {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body class="min-h-[1024px] flex flex-col bg-gray-50">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<header class="bg-primary text-white sticky top-0 z-50 shadow-md">
|
|
|
<div class="container mx-auto px-4">
|
|
|
<div class="flex items-center justify-between h-16">
|
|
|
<!-- Logo -->
|
|
|
<div class="flex items-center">
|
|
|
<span class="logo text-xl font-bold">人力</span>
|
|
|
</div>
|
|
|
<!-- 主导航 -->
|
|
|
<nav class="hidden md:flex items-center space-x-6 text-sm">
|
|
|
<a href="#" class="nav-item">多维统计</a>
|
|
|
<a href="#" class="nav-item">人员管理</a>
|
|
|
<a href="#" class="nav-item">组织管理</a>
|
|
|
<a href="#" class="nav-item">考勤管理</a>
|
|
|
<a href="#" class="nav-item">绩效管理</a>
|
|
|
<a href="#" class="nav-item">薪酬管理</a>
|
|
|
<a href="#" class="nav-item">知识库</a>
|
|
|
<a href="#" class="nav-item">后台管理</a>
|
|
|
</nav>
|
|
|
<!-- 右侧功能区 -->
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<!-- 搜索框 -->
|
|
|
<div class="relative hidden md:block">
|
|
|
<input type="text" placeholder="搜索..."
|
|
|
class="search-input bg-primary-light text-white placeholder-white text-sm px-4 py-2 rounded-button border border-white/20 focus:outline-none focus:border-white/50">
|
|
|
<i
|
|
|
class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-white text-sm"></i>
|
|
|
</div>
|
|
|
<!-- AI助手 -->
|
|
|
<button
|
|
|
class="flex items-center space-x-1 bg-white/10 hover:bg-white/20 px-3 py-1 rounded-button text-sm transition-colors duration-200">
|
|
|
<i class="fas fa-robot text-white text-sm"></i>
|
|
|
<span>AI助手</span>
|
|
|
</button>
|
|
|
<!-- 用户头像 -->
|
|
|
<div class="relative">
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=professional20business20person20avatar20with20blue20background20modern20style20high20quality20detailed20face20suitable20for20corporate20profile20picture&width=32&height=32&orientation=squarish&flag=9f5df518eb860f9e9f398c83389a3114"
|
|
|
alt="用户头像" class="w-8 h-8 rounded-full object-cover cursor-pointer">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
<!-- 公告栏 -->
|
|
|
<div class="bg-secondary py-2 px-4">
|
|
|
<div class="container mx-auto">
|
|
|
<div class="scroll-container">
|
|
|
<div class="scroll-content text-sm text-gray-600">
|
|
|
<span class="font-semibold mr-4">公告：</span>
|
|
|
<span class="mr-8">2023年度绩效考核将于12月1日正式启动</span>
|
|
|
<span class="mr-8">公司年度旅游计划已发布，请各部门负责人查看邮件</span>
|
|
|
<span class="mr-8">新员工入职培训将于下周一上午9点在3楼会议室举行</span>
|
|
|
<span class="mr-8">薪酬系统升级维护将于本周六凌晨2点至4点进行</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 主要内容区 -->
|
|
|
<main class="flex-grow container mx-auto px-4 py-8">
|
|
|
<!-- 个人信息卡片 -->
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-6">
|
|
|
<div class="flex items-start">
|
|
|
<!-- 头像 -->
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=professional20asian20business20woman20portrait20with20blue20background20modern20office20style20high20quality20detailed20face20suitable20for20employee20profile20picture&width=80&height=80&orientation=squarish&flag=9f99ced8fd9576fe3f6eb62e456fcf9f"
|
|
|
alt="员工头像" class="avatar mr-6">
|
|
|
<!-- 基本信息 -->
|
|
|
<div class="flex-grow">
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
<h1 class="text-2xl font-bold text-gray-800">林雅婷</h1>
|
|
|
<span class="text-sm text-gray-500">员工ID: HR20230085</span>
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
|
|
<div>
|
|
|
<p class="text-gray-500">年龄</p>
|
|
|
<p class="font-medium">28岁</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-gray-500">性别</p>
|
|
|
<p class="font-medium">女</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-gray-500">部门</p>
|
|
|
<p class="font-medium">市场部</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-gray-500">岗位</p>
|
|
|
<p class="font-medium">市场策划主管</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mt-4 pt-4 border-t border-gray-100">
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
|
|
<div>
|
|
|
<p class="text-gray-500">入职日期</p>
|
|
|
<p class="font-medium">2020-05-15</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-gray-500">工龄</p>
|
|
|
<p class="font-medium">3年6个月</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-gray-500">职级</p>
|
|
|
<p class="font-medium">P2-3</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-gray-500">直属上级</p>
|
|
|
<p class="font-medium">张伟 (市场部经理)</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 操作按钮 -->
|
|
|
<div class="flex flex-col space-y-2 ml-4">
|
|
|
<button
|
|
|
class="flex items-center justify-center whitespace-nowrap bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-button text-sm">
|
|
|
<i class="fas fa-edit mr-2 text-sm"></i>
|
|
|
编辑信息
|
|
|
</button>
|
|
|
<button
|
|
|
class="flex items-center justify-center whitespace-nowrap bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-button text-sm">
|
|
|
<i class="fas fa-file-export mr-2 text-sm"></i>
|
|
|
导出资料
|
|
|
</button>
|
|
|
<button
|
|
|
class="flex items-center justify-center whitespace-nowrap bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-button text-sm">
|
|
|
<i class="fas fa-print mr-2 text-sm"></i>
|
|
|
打印档案
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 薪资概览 -->
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
|
|
<!-- 税前工资 -->
|
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
|
<h2 class="text-lg font-semibold text-gray-700">税前工资</h2>
|
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">+5% 上月</span>
|
|
|
</div>
|
|
|
<div class="flex items-end">
|
|
|
<span class="text-3xl font-bold text-primary">¥18,500</span>
|
|
|
<span class="text-sm text-gray-500 ml-2 mb-1">/月</span>
|
|
|
</div>
|
|
|
<div class="mt-4 text-sm text-gray-500">
|
|
|
<p>年度累计: ¥203,500</p>
|
|
|
<p>上月工资: ¥17,600</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 税后工资 -->
|
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
|
<h2 class="text-lg font-semibold text-gray-700">税后工资</h2>
|
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">+4.8% 上月</span>
|
|
|
</div>
|
|
|
<div class="flex items-end">
|
|
|
<span class="text-3xl font-bold text-primary">¥15,320</span>
|
|
|
<span class="text-sm text-gray-500 ml-2 mb-1">/月</span>
|
|
|
</div>
|
|
|
<div class="mt-4 text-sm text-gray-500">
|
|
|
<p>年度累计: ¥168,520</p>
|
|
|
<p>上月工资: ¥14,620</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 薪资构成 -->
|
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-4">薪资构成</h2>
|
|
|
<div class="space-y-3">
|
|
|
<div>
|
|
|
<div class="flex justify-between text-sm mb-1">
|
|
|
<span class="text-gray-600">基本工资</span>
|
|
|
<span class="font-medium">¥10,000</span>
|
|
|
</div>
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 54%"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="flex justify-between text-sm mb-1">
|
|
|
<span class="text-gray-600">绩效工资</span>
|
|
|
<span class="font-medium">¥5,500</span>
|
|
|
</div>
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 30%"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="flex justify-between text-sm mb-1">
|
|
|
<span class="text-gray-600">各类补贴</span>
|
|
|
<span class="font-medium">¥3,000</span>
|
|
|
</div>
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 16%"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 工资明细表 -->
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
|
|
|
<div class="px-6 py-4 border-b border-gray-100">
|
|
|
<h2 class="text-lg font-semibold text-gray-700">2023年10月工资明细</h2>
|
|
|
</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>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
<tr class="hover-effect">
|
|
|
<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">¥10,000</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥10,000</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 font-medium text-gray-900">¥10,000</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">¥6,000</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥5,500</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥500</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">¥5,500</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">KPI未达标</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">¥1,200</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥1,200</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 font-medium text-gray-900">¥1,200</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">主管级津贴</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">¥600</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥600</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 font-medium text-gray-900">¥600</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">22个工作日</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">¥800</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥800</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 font-medium text-gray-900">¥800</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">¥300</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥300</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 font-medium text-gray-900">¥300</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">¥1,100</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 font-medium text-gray-900">¥1,100</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">国庆加班3天</td>
|
|
|
</tr>
|
|
|
<tr class="bg-gray-50 hover:bg-gray-100">
|
|
|
<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">¥19,500</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥500</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">¥19,000</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">8%</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">¥800</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">-¥800</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">个人缴纳</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">2%</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">¥200</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">-¥200</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">个人缴纳</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">0.5%</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">¥50</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">-¥50</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">个人缴纳</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">12%</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">¥1,200</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">-¥1,200</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">个人缴纳</td>
|
|
|
</tr>
|
|
|
<tr class="hover-effect">
|
|
|
<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">-</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥1,430</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">-¥1,430</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">累计预扣法</td>
|
|
|
</tr>
|
|
|
<tr class="bg-gray-50 hover:bg-gray-100">
|
|
|
<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">-</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥3,680</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">-¥3,680</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
|
|
|
</tr>
|
|
|
<tr class="bg-primary-light hover:bg-primary-lighter">
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-white">实发工资</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-white">-</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-white">-</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-white">-</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-white">¥15,320</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-white">-</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 考勤记录 -->
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
|
|
|
<div class="px-6 py-4 border-b border-gray-100">
|
|
|
<div class="flex justify-between items-center">
|
|
|
<h2 class="text-lg font-semibold text-gray-700">2023年10月考勤记录</h2>
|
|
|
<div class="flex space-x-2">
|
|
|
<button
|
|
|
class="whitespace-nowrap bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-button text-sm">月度</button>
|
|
|
<button
|
|
|
class="whitespace-nowrap bg-primary text-white px-3 py-1 rounded-button text-sm">年度</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="px-6 py-4">
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
|
|
|
<div class="bg-green-50 p-4 rounded-lg">
|
|
|
<p class="text-sm text-gray-500">应出勤天数</p>
|
|
|
<p class="text-2xl font-bold text-green-600">22</p>
|
|
|
</div>
|
|
|
<div class="bg-blue-50 p-4 rounded-lg">
|
|
|
<p class="text-sm text-gray-500">实际出勤</p>
|
|
|
<p class="text-2xl font-bold text-blue-600">21</p>
|
|
|
</div>
|
|
|
<div class="bg-yellow-50 p-4 rounded-lg">
|
|
|
<p class="text-sm text-gray-500">迟到/早退</p>
|
|
|
<p class="text-2xl font-bold text-yellow-600">1</p>
|
|
|
</div>
|
|
|
<div class="bg-red-50 p-4 rounded-lg">
|
|
|
<p class="text-sm text-gray-500">缺勤</p>
|
|
|
<p class="text-2xl font-bold text-red-600">0.5</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mt-6">
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-01
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-02
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-03
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">10-04
|
|
|
迟到</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-05
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-06
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-07
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-08
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-09
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-10
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-11
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-12
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-13
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-14
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-15
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-16
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-17
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-18
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-19
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-20
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">10-21
|
|
|
缺勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-22
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-23
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-24
|
|
|
出勤</span>
|
|
|
<span
|
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">10-25
|
|
|
出 ```html
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>人力资源管理系统</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
</head>
|
|
|
|
|
|
<body class="bg-gray-50">
|
|
|
<!-- 导航栏 -->
|
|
|
<nav class="bg-[#2D5CF6] fixed w-full top-0 z-50">
|
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
|
<div class="flex justify-between h-16 items-center">
|
|
|
<div class="flex items-center">
|
|
|
<div class="text-white text-xl font-bold">人力</div>
|
|
|
<div class="hidden md:flex space-x-8 ml-10">
|
|
|
<a href="#"
|
|
|
class="text-white text-sm hover:bg-blue-600 px-3 py-2 rounded-md">多维统计</a>
|
|
|
<a href="#"
|
|
|
class="text-white text-sm hover:bg-blue-600 px-3 py-2 rounded-md">人员管理</a>
|
|
|
<a href="#"
|
|
|
class="text-white text-sm hover:bg-blue-600 px-3 py-2 rounded-md">组织管理</a>
|
|
|
<a href="#"
|
|
|
class="text-white text-sm hover:bg-blue-600 px-3 py-2 rounded-md">考勤管理</a>
|
|
|
<a href="#"
|
|
|
class="text-white text-sm hover:bg-blue-600 px-3 py-2 rounded-md">绩效管理</a>
|
|
|
<a href="#"
|
|
|
class="text-white text-sm hover:bg-blue-600 px-3 py-2 rounded-md">薪酬管理</a>
|
|
|
<a href="#"
|
|
|
class="text-white text-sm hover:bg-blue-600 px-3 py-2 rounded-md">知识库</a>
|
|
|
<a href="#"
|
|
|
class="text-white text-sm hover:bg-blue-600 px-3 py-2 rounded-md">后台管理</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="relative">
|
|
|
<input type="text" placeholder="搜索..."
|
|
|
class="bg-blue-600 text-white placeholder-blue-200 rounded-md py-1 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-white">
|
|
|
</div>
|
|
|
<button class="bg-blue-600 p-2 rounded-full">
|
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor"
|
|
|
viewBox="0 0 24 24">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
|
stroke-width="2"
|
|
|
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
|
|
</svg>
|
|
|
</button>
|
|
|
<img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/32"
|
|
|
alt="用户头像">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</nav>
|
|
|
<!-- 主要内容区 -->
|
|
|
<main class="max-w-7xl mx-auto px-4 mt-20">
|
|
|
<!-- 个人信息卡片 -->
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
|
|
|
<div class="flex items-start">
|
|
|
<img class="h-20 w-20 rounded-full" src="https://via.placeholder.com/80"
|
|
|
alt="员工头像">
|
|
|
<div class="ml-6">
|
|
|
<h2 class="text-xl font-bold">张三</h2>
|
|
|
<div class="mt-2 grid grid-cols-2 gap-4 text-sm text-gray-600">
|
|
|
<div>年龄：28岁</div>
|
|
|
<div>部门：技术部</div>
|
|
|
<div>工号：10086</div>
|
|
|
<div>岗位：高级工程师</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 薪资概览卡片 -->
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
|
|
|
<div class="grid grid-cols-2 gap-6">
|
|
|
<div>
|
|
|
<div class="text-gray-500 text-sm">税前工资</div>
|
|
|
<div class="text-2xl font-bold text-[#2D5CF6]">¥25,000</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="text-gray-500 text-sm">税后工资</div>
|
|
|
<div class="text-2xl font-bold text-[#2D5CF6]">¥20,000</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 工资明细表 -->
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
|
<h3 class="text-lg font-medium mb-4">工资明细</h3>
|
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
|
<thead class="bg-gray-50">
|
|
|
<tr>
|
|
|
<th
|
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
项目</th>
|
|
|
<th
|
|
|
class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
金额</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-6 py-4 text-sm text-gray-900">基本工资</td>
|
|
|
<td class="px-6 py-4 text-sm text-gray-900 text-right">¥15,000</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-6 py-4 text-sm text-gray-900">绩效工资</td>
|
|
|
<td class="px-6 py-4 text-sm text-gray-900 text-right">¥5,000</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-6 py-4 text-sm text-gray-900">岗位津贴</td>
|
|
|
<td class="px-6 py-4 text-sm text-gray-900 text-right">¥2,000</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-6 py-4 text-sm text-gray-900">餐补</td>
|
|
|
<td class="px-6 py-4 text-sm text-gray-900 text-right">¥1,000</td>
|
|
|
</tr>
|
|
|
<tr class="hover:bg-gray-50">
|
|
|
<td class="px-6 py-4 text-sm text-gray-900">加班费</td>
|
|
|
<td class="px-6 py-4 text-sm text-gray-900 text-right">¥2,000</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</main>
|
|
|
<!-- 页脚 -->
|
|
|
<footer class="bg-gray-800 text-gray-400 mt-12">
|
|
|
<div class="max-w-7xl mx-auto px-4 py-12">
|
|
|
<div class="grid grid-cols-4 gap-8">
|
|
|
<div>
|
|
|
<h3 class="text-white text-sm font-bold mb-4">关于我们</h3>
|
|
|
<ul class="space-y-2 text-xs">
|
|
|
<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-white text-sm font-bold mb-4">帮助中心</h3>
|
|
|
<ul class="space-y-2 text-xs">
|
|
|
<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-white text-sm font-bold mb-4">友情链接</h3>
|
|
|
<ul class="space-y-2 text-xs">
|
|
|
<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-white text-sm font-bold mb-4">联系方式</h3>
|
|
|
<ul class="space-y-2 text-xs">
|
|
|
<li>电话：400-123-4567</li>
|
|
|
<li>邮箱：hr@company.com</li>
|
|
|
<li>地址：北京市朝阳区科技园</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mt-8 pt-8 border-t border-gray-700 text-xs text-center">
|
|
|
<p>© 2024 人力资源管理系统 版权所有</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</body>
|
|
|
|
|
|
</html> |
