|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>人力资源管理系统</title>
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<script>
|
|
|
tailwind.config = {
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
primary: '#2D5CF6',
|
|
|
secondary: '#F5F6FA',
|
|
|
},
|
|
|
borderRadius: {
|
|
|
'none': '0px',
|
|
|
'sm': '2px',
|
|
|
DEFAULT: '4px',
|
|
|
'md': '8px',
|
|
|
'lg': '12px',
|
|
|
'xl': '16px',
|
|
|
'2xl': '20px',
|
|
|
'3xl': '24px',
|
|
|
'full': '9999px',
|
|
|
'button': '4px'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
.marquee {
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
box-sizing: border-box;
|
|
|
animation: marquee 20s linear infinite;
|
|
|
}
|
|
|
@keyframes marquee {
|
|
|
0% { transform: translateX(100%); }
|
|
|
100% { transform: translateX(-100%); }
|
|
|
}
|
|
|
.card-shadow {
|
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
|
}
|
|
|
.icon-container {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="min-h-[1024px] bg-secondary flex flex-col">
|
|
|
<!-- 顶部导航 -->
|
|
|
<!-- <header class="w-full bg-primary text-white">
|
|
|
<nav class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
|
|
|
<div class="flex items-center space-x-10">
|
|
|
<h1 class="text-xl font-['Pacifico']">人力</h1>
|
|
|
<div class="flex space-x-6 text-sm">
|
|
|
<a href="#" class="hover:text-gray-200">多维统计</a>
|
|
|
<a href="#" class="hover:text-gray-200">人员管理</a>
|
|
|
<a href="#" class="hover:text-gray-200">组织管理</a>
|
|
|
<a href="#" class="hover:text-gray-200">考勤管理</a>
|
|
|
<a href="#" class="hover:text-gray-200">绩效管理</a>
|
|
|
<a href="#" class="hover:text-gray-200">薪酬管理</a>
|
|
|
<a href="#" class="hover:text-gray-200">知识库</a>
|
|
|
<a href="#" class="hover:text-gray-200">后台管理</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="relative">
|
|
|
<input type="text" placeholder="搜索..." class="py-1 px-3 pl-8 text-sm rounded-button text-gray-800 w-40">
|
|
|
<i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center">
|
|
|
<i class="fas fa-user text-primary"></i>
|
|
|
</div>
|
|
|
<span class="text-sm">张明远</span>
|
|
|
</div>
|
|
|
<button class="bg-white text-primary text-sm py-1 px-3 rounded-button flex items-center space-x-1">
|
|
|
<i class="fas fa-robot"></i>
|
|
|
<span>AI助手</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</nav>
|
|
|
<div class="bg-amber-50 text-black py-1 px-4 text-xs">
|
|
|
<div class="marquee">
|
|
|
<span>【系统公告】2025年度绩效考核标准已更新，请各部门负责人及时查阅。 | 2025年第一季度员工满意度调查结果已发布，整体满意度达到92.5%。 | 提醒：2025年上半年绩效计划填报截止日期为6月30日，请及时完成。 | 新员工入职培训将于7月5日在总部3楼会议室举行。</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header> -->
|
|
|
|
|
|
<!-- 主内容区 -->
|
|
|
<main class="flex-1 max-w-7xl mx-auto px-4 py-6 w-full">
|
|
|
<!-- 筛选区 -->
|
|
|
<div class="bg-white p-4 rounded-lg card-shadow mb-6">
|
|
|
<div class="grid grid-cols-4 gap-4">
|
|
|
<div>
|
|
|
<label class="block text-xs text-gray-600 mb-1">姓名</label>
|
|
|
<input type="text" class="w-full border border-gray-300 rounded-button px-2 py-1 text-sm">
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-xs text-gray-600 mb-1">电话</label>
|
|
|
<input type="text" class="w-full border border-gray-300 rounded-button px-2 py-1 text-sm">
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-xs text-gray-600 mb-1">身份证</label>
|
|
|
<input type="text" class="w-full border border-gray-300 rounded-button px-2 py-1 text-sm">
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-xs text-gray-600 mb-1">绩效计划</label>
|
|
|
<div class="relative">
|
|
|
<button class="w-full border border-gray-300 rounded-button px-2 py-1 text-sm text-left flex justify-between items-center">
|
|
|
<span>2025年度</span>
|
|
|
<i class="fas fa-chevron-down text-xs"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex justify-end mt-4">
|
|
|
<button class="bg-primary text-white text-sm py-1 px-4 rounded-button mr-2">查询</button>
|
|
|
<button class="bg-white border border-gray-300 text-gray-700 text-sm py-1 px-4 rounded-button">重置</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 人员信息 -->
|
|
|
<div class="bg-white p-4 rounded-lg card-shadow mb-6">
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center">
|
|
|
<i class="fas fa-user text-gray-500 text-2xl"></i>
|
|
|
</div>
|
|
|
<div class="grid grid-cols-4 gap-4 flex-1">
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">性别</p>
|
|
|
<p class="text-sm">男</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">年龄</p>
|
|
|
<p class="text-sm">32</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">部门</p>
|
|
|
<p class="text-sm">技术研发中心</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">岗位</p>
|
|
|
<p class="text-sm">高级软件工程师</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">绩效计划名称</p>
|
|
|
<p class="text-sm">2025年度技术岗绩效计划</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 绩效公式 -->
|
|
|
<div class="bg-white p-4 rounded-lg card-shadow mb-6">
|
|
|
<p class="text-sm font-medium mb-2">绩效公式</p>
|
|
|
<p class="text-xs bg-gray-100 p-2 rounded-button">
|
|
|
总分 = 代码量 × 0.1 + 文档字数 × 0.01 + 培训次数 × 3 + 项目金额 × 0.01 + 项目比重 × 0.1 + 工作时长 × 0.01 + 执行力 × 0.1 + 对公司认同度 × 0.1
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 绩效总分 -->
|
|
|
<div class="bg-white p-4 rounded-lg card-shadow mb-6">
|
|
|
<div class="flex justify-between">
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">绩效总分</p>
|
|
|
<p class="text-2xl font-bold text-primary">92</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">审批状态</p>
|
|
|
<p class="text-sm text-green-600 font-medium">已确认</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 客观指标 -->
|
|
|
<div class="bg-white p-4 rounded-lg card-shadow mb-6">
|
|
|
<p class="text-sm font-medium mb-3">客观指标</p>
|
|
|
<div class="grid grid-cols-3 gap-4">
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">代码量</p>
|
|
|
<p class="text-sm">15,672 行</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">文档字数</p>
|
|
|
<p class="text-sm">28,500 字</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">培训次数</p>
|
|
|
<p class="text-sm">8 次</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">项目金额</p>
|
|
|
<p class="text-sm">¥1,250,000</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">项目比重</p>
|
|
|
<p class="text-sm">35%</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500">工作时长</p>
|
|
|
<p class="text-sm">1,850 小时</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 主观指标 -->
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6">
|
|
|
<!-- 执行力 -->
|
|
|
<div class="bg-white p-4 rounded-lg card-shadow">
|
|
|
<p class="text-sm font-medium mb-3">执行力</p>
|
|
|
<div class="flex items-center space-x-2 mb-3">
|
|
|
<span class="text-xs text-gray-500">评分：</span>
|
|
|
<div class="flex">
|
|
|
<i class="fas fa-star text-yellow-400"></i>
|
|
|
<i class="fas fa-star text-yellow-400"></i>
|
|
|
<i class="fas fa-star text-yellow-400"></i>
|
|
|
<i class="fas fa-star text-yellow-400"></i>
|
|
|
<i class="fas fa-star text-gray-300"></i>
|
|
|
</div>
|
|
|
<span class="text-xs">4.0</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500 mb-1">评价</p>
|
|
|
<textarea class="w-full border border-gray-300 rounded-button px-2 py-1 text-sm h-20" placeholder="请输入评价内容...">该员工能够高效执行分配的任务，在项目开发过程中表现出色，能够按时保质完成工作。在团队协作中主动承担责任，遇到问题能够积极寻求解决方案。</textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 对公司认同 -->
|
|
|
<div class="bg-white p-4 rounded-lg card-shadow">
|
|
|
<p class="text-sm font-medium mb-3">对公司认同度</p>
|
|
|
<div class="flex items-center space-x-2 mb-3">
|
|
|
<span class="text-xs text-gray-500">评分：</span>
|
|
|
<div class="flex">
|
|
|
<i class="fas fa-star text-yellow-400"></i>
|
|
|
<i class="fas fa-star text-yellow-400"></i>
|
|
|
<i class="fas fa-star text-yellow-400"></i>
|
|
|
<i class="fas fa-star text-yellow-400"></i>
|
|
|
<i class="fas fa-star-half-alt text-yellow-400"></i>
|
|
|
</div>
|
|
|
<span class="text-xs">4.5</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p class="text-xs text-gray-500 mb-1">评价</p>
|
|
|
<textarea class="w-full border border-gray-300 rounded-button px-2 py-1 text-sm h-20" placeholder="请输入评价内容...">该员工高度认同公司文化和价值观，积极参与公司组织的各项活动。在日常工作中能够主动传播正能量，对新员工起到良好的示范作用。对公司发展战略有深刻理解并积极支持。</textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
<div class="flex justify-end space-x-3 mb-6">
|
|
|
<button class="bg-primary text-white text-sm py-2 px-6 rounded-button">保存评价</button>
|
|
|
<button class="bg-white border border-primary text-primary text-sm py-2 px-6 rounded-button">返回列表</button>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<!-- 页脚 -->
|
|
|
<footer class="w-full bg-gray-800 text-white py-6">
|
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
|
<div class="grid grid-cols-4 gap-8">
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium mb-3">关于我们</h3>
|
|
|
<ul class="space-y-2 text-xs text-gray-400">
|
|
|
<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-sm font-medium mb-3">产品服务</h3>
|
|
|
<ul class="space-y-2 text-xs text-gray-400">
|
|
|
<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-sm font-medium mb-3">帮助中心</h3>
|
|
|
<ul class="space-y-2 text-xs text-gray-400">
|
|
|
<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-sm font-medium mb-3">联系我们</h3>
|
|
|
<ul class="space-y-2 text-xs text-gray-400">
|
|
|
<li>电话：400-888-8888</li>
|
|
|
<li>邮箱：service@hrsystem.com</li>
|
|
|
<li>地址：北京市海淀区科技园路88号</li>
|
|
|
<li class="flex space-x-3 mt-3">
|
|
|
<a href="#" class="hover:text-white"><i class="fab fa-weixin"></i></a>
|
|
|
<a href="#" class="hover:text-white"><i class="fab fa-weibo"></i></a>
|
|
|
<a href="#" class="hover:text-white"><i class="fab fa-linkedin"></i></a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="border-t border-gray-700 mt-6 pt-6 text-center text-xs text-gray-400">
|
|
|
<p>© 2025 人力资源管理系统 版权所有 | 京ICP备12345678号-1 | 京公网安备11010802023456号</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html>
|
