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 '87325fc3ad'
${ noResults }
flx-lms-fe/public/绩效设定.html

319 lines
16 KiB
HTML
Raw Normal View History Unescape Escape

初始化
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 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>