后台管理页面开发
jiangxucong
1 day ago
parent
db02bd7d5d
commit
142e047979
@ -0,0 +1,216 @@
|
||||
<!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>
|
||||
.font-logo {
|
||||
font-family: "Pacifico", serif;
|
||||
}
|
||||
|
||||
.fa-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.required:after {
|
||||
content: "*";
|
||||
color: #FF4D4F;
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-white text-gray-800 font-sans">
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="fixed top-0 left-0 w-full bg-primary text-white h-[60px] flex items-center justify-between px-4 z-50">
|
||||
<div class="font-logo text-xl">人力</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center bg-primary-light px-3 py-1 rounded-button">
|
||||
<i class="fas fa-robot fa-icon w-4 h-4 mr-1"></i>
|
||||
<span class="text-sm">AI助手</span>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center overflow-hidden">
|
||||
<i class="fas fa-user fa-icon text-primary w-4 h-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- 主要内容区 -->
|
||||
<main class="pt-[80px] pb-[100px] px-4 max-w-[960px] mx-auto">
|
||||
<h1 class="text-2xl font-bold mb-8 text-center">人员入职登记</h1>
|
||||
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||
<!-- 刷脸组件 -->
|
||||
<div class="flex flex-col items-center mb-8">
|
||||
<div
|
||||
class="w-[120px] h-[120px] rounded-full border-2 border-dashed border-gray-300 flex items-center justify-center mb-4">
|
||||
<i class="fas fa-camera fa-icon text-gray-400 text-3xl"></i>
|
||||
</div>
|
||||
<button class="bg-primary text-white px-4 py-2 rounded-button text-sm">
|
||||
点击刷脸认证
|
||||
</button>
|
||||
</div>
|
||||
<!-- 表单区域 -->
|
||||
<form class="space-y-6">
|
||||
<!-- 入职部门 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">入职部门</label>
|
||||
<div class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-button text-gray-700">技术研发部
|
||||
</div>
|
||||
</div>
|
||||
<!-- 岗位 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">岗位</label>
|
||||
<div class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-button text-gray-700">前端开发工程师
|
||||
</div>
|
||||
</div>
|
||||
<!-- 入职时间 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">入职时间</label>
|
||||
<div class="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-button text-gray-700">
|
||||
2025-07-02</div>
|
||||
</div>
|
||||
<!-- 姓名 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 required">姓名</label>
|
||||
<input type="text"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-button focus:ring-primary focus:border-primary"
|
||||
placeholder="请输入真实姓名">
|
||||
</div>
|
||||
<!-- 年龄 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 required">年龄</label>
|
||||
<input type="number"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-button focus:ring-primary focus:border-primary"
|
||||
placeholder="请输入年龄">
|
||||
</div>
|
||||
<!-- 手机号 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 required">手机号</label>
|
||||
<input type="tel"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-button focus:ring-primary focus:border-primary"
|
||||
placeholder="请输入手机号码">
|
||||
</div>
|
||||
<!-- 身份证正反面 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 required">身份证正反面</label>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-300 rounded-button p-4 flex flex-col items-center">
|
||||
<i class="fas fa-id-card fa-icon text-gray-400 text-2xl mb-2"></i>
|
||||
<span class="text-xs text-gray-500 mb-2">身份证正面</span>
|
||||
<button type="button" class="bg-secondary text-gray-700 px-3 py-1 rounded-button text-xs">
|
||||
上传照片
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-300 rounded-button p-4 flex flex-col items-center">
|
||||
<i class="fas fa-id-card fa-icon text-gray-400 text-2xl mb-2"></i>
|
||||
<span class="text-xs text-gray-500 mb-2">身份证反面</span>
|
||||
<button type="button" class="bg-secondary text-gray-700 px-3 py-1 rounded-button text-xs">
|
||||
上传照片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 身份证号 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 required">身份证号</label>
|
||||
<input type="text"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-button focus:ring-primary focus:border-primary"
|
||||
placeholder="请输入身份证号码">
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">备注</label>
|
||||
<textarea
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-button focus:ring-primary focus:border-primary"
|
||||
rows="3" placeholder="可填写特殊情况说明"></textarea>
|
||||
</div>
|
||||
<!-- 提交按钮 -->
|
||||
<div class="pt-4">
|
||||
<button type="submit"
|
||||
class="w-full bg-primary text-white py-3 rounded-button font-medium hover:bg-primary-dark transition">
|
||||
提交入职申请
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<!-- 底部通栏 -->
|
||||
<footer class="fixed bottom-0 left-0 w-full bg-secondary py-4 text-gray-600 text-xs">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-4 gap-4 mb-4">
|
||||
<div>
|
||||
<h3 class="font-medium mb-2">关于我们</h3>
|
||||
<ul class="space-y-1">
|
||||
<li><a href="#" class="hover:text-primary">公司简介</a></li>
|
||||
<li><a href="#" class="hover:text-primary">发展历程</a></li>
|
||||
<li><a href="#" class="hover:text-primary">企业文化</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium mb-2">服务支持</h3>
|
||||
<ul class="space-y-1">
|
||||
<li><a href="#" class="hover:text-primary">帮助中心</a></li>
|
||||
<li><a href="#" class="hover:text-primary">常见问题</a></li>
|
||||
<li><a href="#" class="hover:text-primary">在线客服</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium mb-2">法律声明</h3>
|
||||
<ul class="space-y-1">
|
||||
<li><a href="#" class="hover:text-primary">隐私政策</a></li>
|
||||
<li><a href="#" class="hover:text-primary">用户协议</a></li>
|
||||
<li><a href="#" class="hover:text-primary">知识产权</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium mb-2">联系我们</h3>
|
||||
<ul class="space-y-1">
|
||||
<li><a href="#" class="hover:text-primary">联系方式</a></li>
|
||||
<li><a href="#" class="hover:text-primary">加入我们</a></li>
|
||||
<li><a href="#" class="hover:text-primary">反馈建议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center pt-2 border-t border-gray-200">
|
||||
<p>© 2023 人力系统 版权所有</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,440 @@
|
||||
<!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>
|
||||
<script>document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('.setTimeBtn').forEach(btn=> {
|
||||
btn.addEventListener('click', function() {
|
||||
const timeSettings=this.closest('.course-item').querySelector('.time-settings');
|
||||
timeSettings.classList.toggle('hidden');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.fa-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tree-item:hover {
|
||||
background-color: rgba(45, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.course-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.course-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="min-h-[1024px] flex flex-col bg-[#F5F6FA]">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="w-full h-[60px] bg-primary text-white shadow-md">
|
||||
<div class="w-[1200px] h-full mx-auto flex items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center">
|
||||
<h1 class="text-2xl font-['Pacifico']">人力</h1>
|
||||
</div>
|
||||
<!-- 导航菜单 -->
|
||||
<nav class="flex-1 mx-8">
|
||||
<ul class="flex space-x-6 text-sm">
|
||||
<li class="hover:underline cursor-pointer">多维统计</li>
|
||||
<li class="hover:underline cursor-pointer">人员管理</li>
|
||||
<li class="hover:underline cursor-pointer">组织管理</li>
|
||||
<li class="hover:underline cursor-pointer">考勤管理</li>
|
||||
<li class="hover:underline cursor-pointer">绩效管理</li>
|
||||
<li class="hover:underline cursor-pointer">薪酬管理</li>
|
||||
<li class="hover:underline cursor-pointer">知识库</li>
|
||||
<li class="hover:underline cursor-pointer">后台管理</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- 右侧功能区 -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- 搜索框 -->
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="搜索..."
|
||||
class="h-8 pl-8 pr-3 text-sm rounded-button text-gray-700 focus:outline-none">
|
||||
<i
|
||||
class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500 fa-icon w-4 h-4"></i>
|
||||
</div>
|
||||
<!-- 用户头像 -->
|
||||
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center cursor-pointer">
|
||||
<i class="fas fa-user text-primary fa-icon w-4 h-4"></i>
|
||||
</div>
|
||||
<!-- AI助手 -->
|
||||
<button
|
||||
class="h-8 px-3 bg-white text-primary rounded-button flex items-center space-x-1 hover:bg-opacity-90">
|
||||
<i class="fas fa-robot fa-icon w-4 h-4"></i>
|
||||
<span class="text-sm whitespace-nowrap">AI助手</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 主要内容区域 -->
|
||||
<main class="flex-1 w-[1200px] mx-auto my-6 flex">
|
||||
<!-- 左侧组织架构树 -->
|
||||
<aside class="w-1/5 mr-6 bg-white rounded-md shadow p-4">
|
||||
<h2 class="text-lg font-semibold mb-4 text-gray-700">组织架构</h2>
|
||||
<div class="space-y-1">
|
||||
<!-- 一级部门 -->
|
||||
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-chevron-down fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
||||
<span class="text-sm">集团总部</span>
|
||||
</div>
|
||||
<!-- 二级部门 -->
|
||||
<div class="ml-4 mt-1 space-y-1">
|
||||
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-chevron-down fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
||||
<span class="text-sm">人力资源部</span>
|
||||
</div>
|
||||
<!-- 三级部门 -->
|
||||
<div class="ml-4 mt-1 space-y-1">
|
||||
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
||||
<span class="text-sm">招聘组</span>
|
||||
</div>
|
||||
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
||||
<span class="text-sm">培训组</span>
|
||||
</div>
|
||||
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
||||
<span class="text-sm">薪酬组</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-chevron-right fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
||||
<span class="text-sm">财务部</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-chevron-right fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
||||
<span class="text-sm">市场部</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-chevron-right fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
||||
<span class="text-sm">华东分公司</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-item pl-2 py-1 rounded cursor-pointer">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-chevron-right fa-icon w-3 h-3 mr-1 text-gray-500"></i>
|
||||
<span class="text-sm">华南分公司</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- 右侧培训管理页面 -->
|
||||
<section class="w-4/5 bg-white rounded-md shadow p-6">
|
||||
<!-- 页面标题和操作按钮 -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-xl font-semibold text-gray-800">培训管理</h2>
|
||||
<button class="bg-primary text-white px-4 py-2 rounded-button hover:bg-opacity-90 whitespace-nowrap">
|
||||
<i class="fas fa-plus fa-icon w-4 h-4 mr-1"></i>
|
||||
新建培训
|
||||
</button>
|
||||
</div>
|
||||
<!-- 培训基本信息 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-medium mb-4 text-gray-700">基本信息</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">培训名称</label>
|
||||
<input type="text"
|
||||
class="w-full h-10 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">培训封面</label>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-gray-100 rounded-md flex items-center justify-center cursor-pointer">
|
||||
<i class="fas fa-image fa-icon w-6 h-6 text-gray-400"></i>
|
||||
</div>
|
||||
<span class="ml-2 text-sm text-gray-500">点击上传封面</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">主题设计</label>
|
||||
<div class="h-32 border border-gray-300 rounded-md p-2 bg-gray-50">
|
||||
<p class="text-sm text-gray-500">在此输入培训主题和描述...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 培训详情 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-medium mb-4 text-gray-700">培训详情</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="flex space-x-4">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">开始时间</label>
|
||||
<div class="flex items-center h-10 px-3 border border-gray-300 rounded-md">
|
||||
<input type="date" class="flex-1 focus:outline-none">
|
||||
<i class="fas fa-calendar-alt fa-icon w-4 h-4 text-gray-500 ml-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">结束时间</label>
|
||||
<div class="flex items-center h-10 px-3 border border-gray-300 rounded-md">
|
||||
<input type="date" class="flex-1 focus:outline-none">
|
||||
<i class="fas fa-calendar-alt fa-icon w-4 h-4 text-gray-500 ml-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">培训费用(元)</label>
|
||||
<input type="number"
|
||||
class="w-full h-10 px-3 border border-gray-300 rounded-md focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 课程管理 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-medium mb-4 text-gray-700">课程管理</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- 可选课程 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h4 class="text-sm font-medium text-gray-700">可选课程</h4>
|
||||
<div class="relative w-32">
|
||||
<input type="text" placeholder="搜索课程"
|
||||
class="w-full h-8 pl-8 pr-2 text-sm border border-gray-300 rounded-button focus:outline-none">
|
||||
<i
|
||||
class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500 fa-icon w-4 h-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-64 overflow-y-auto border border-gray-300 rounded-md p-2 space-y-2">
|
||||
<!-- 课程项 -->
|
||||
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium">高效沟通技巧</p>
|
||||
<p class="text-xs text-gray-500">讲师: 张明远</p>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">2小时</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium">团队协作与领导力</p>
|
||||
<p class="text-xs text-gray-500">讲师: 李思雨</p>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">3小时</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium">项目管理实战</p>
|
||||
<p class="text-xs text-gray-500">讲师: 王建国</p>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">4小时</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium">Excel高级应用</p>
|
||||
<p class="text-xs text-gray-500">讲师: 陈晓芳</p>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">2.5小时</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-item p-2 bg-gray-50 rounded-md cursor-pointer">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium">商务礼仪与职业形象</p>
|
||||
<p class="text-xs text-gray-500">讲师: 赵雅芝</p>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">2小时</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已选课程 -->
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-700 mb-2">已选课程</h4>
|
||||
<div class="h-64 overflow-y-auto border border-gray-300 rounded-md p-2 space-y-2">
|
||||
<div class="course-item p-2 bg-primary bg-opacity-5 rounded-md">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium">高效沟通技巧</p>
|
||||
<p class="text-xs text-gray-500">讲师: 张明远</p>
|
||||
</div>
|
||||
<div class="flex space-x-1">
|
||||
<span
|
||||
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">2小时</span>
|
||||
<button
|
||||
class="text-primary text-xs hover:underline setTimeBtn">设置时间</button>
|
||||
<i class="fas fa-times fa-icon w-4 h-4 text-red-500 cursor-pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-settings hidden bg-gray-50 p-2 rounded-md space-y-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs text-gray-600">上课时间:</span>
|
||||
<input type="date"
|
||||
class="flex-1 text-xs p-1 border border-gray-300 rounded-button focus:outline-none focus:border-primary">
|
||||
<input type="time"
|
||||
class="w-24 text-xs p-1 border border-gray-300 rounded-button focus:outline-none focus:border-primary">
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-xs px-2 py-1 bg-primary text-white rounded-button hover:bg-opacity-90 whitespace-nowrap">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-item p-2 bg-primary bg-opacity-5 rounded-md">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium">团队协作与领导力</p>
|
||||
<p class="text-xs text-gray-500">讲师: 李思雨</p>
|
||||
</div>
|
||||
<div class="flex space-x-1">
|
||||
<span
|
||||
class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded-full">3小时</span>
|
||||
<button
|
||||
class="text-primary text-xs hover:underline setTimeBtn">设置时间</button>
|
||||
<i class="fas fa-times fa-icon w-4 h-4 text-red-500 cursor-pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-settings hidden bg-gray-50 p-2 rounded-md space-y-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs text-gray-600">上课时间:</span>
|
||||
<input type="date"
|
||||
class="flex-1 text-xs p-1 border border-gray-300 rounded-button focus:outline-none focus:border-primary">
|
||||
<input type="time"
|
||||
class="w-24 text-xs p-1 border border-gray-300 rounded-button focus:outline-none focus:border-primary">
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="text-xs px-2 py-1 bg-primary text-white rounded-button hover:bg-opacity-90 whitespace-nowrap">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-end space-x-3">
|
||||
<button
|
||||
class="px-4 py-2 border border-gray-300 rounded-button hover:bg-gray-50 whitespace-nowrap">取消</button>
|
||||
<button
|
||||
class="px-4 py-2 bg-primary text-white rounded-button hover:bg-opacity-90 whitespace-nowrap">保存</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- 页脚 -->
|
||||
<footer class="w-full h-[200px] bg-gray-800 text-white">
|
||||
<div class="w-[1200px] h-full mx-auto py-8">
|
||||
<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 class="cursor-pointer hover:text-white">公司简介</li>
|
||||
<li class="cursor-pointer hover:text-white">发展历程</li>
|
||||
<li class="cursor-pointer hover:text-white">企业文化</li>
|
||||
<li class="cursor-pointer hover:text-white">加入我们</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium mb-3">帮助中心</h3>
|
||||
<ul class="space-y-2 text-xs text-gray-400">
|
||||
<li class="cursor-pointer hover:text-white">使用指南</li>
|
||||
<li class="cursor-pointer hover:text-white">常见问题</li>
|
||||
<li class="cursor-pointer hover:text-white">视频教程</li>
|
||||
<li class="cursor-pointer hover:text-white">API文档</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium mb-3">联系方式</h3>
|
||||
<ul class="space-y-2 text-xs text-gray-400">
|
||||
<li class="cursor-pointer hover:text-white">客服电话: 400-123-4567</li>
|
||||
<li class="cursor-pointer hover:text-white">邮箱: support@hrsystem.com</li>
|
||||
<li class="cursor-pointer hover:text-white">地址: 北京市海淀区科技园路88号</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium mb-3">友情链接</h3>
|
||||
<ul class="space-y-2 text-xs text-gray-400">
|
||||
<li class="cursor-pointer hover:text-white">人力资源协会</li>
|
||||
<li class="cursor-pointer hover:text-white">人才招聘网</li>
|
||||
<li class="cursor-pointer hover:text-white">职业培训平台</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-4 border-t border-gray-700 text-center text-xs text-gray-400">
|
||||
<p>© 2023 人力资源管理系统 版权所有 | 京ICP备12345678号</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,358 @@
|
||||
<!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>
|
||||
.font-logo {
|
||||
font-family: "Pacifico", serif;
|
||||
}
|
||||
.fa-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.scroll-container {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.scroll-content {
|
||||
display: inline-block;
|
||||
animation: scroll 20s linear infinite;
|
||||
}
|
||||
@keyframes scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
.tree-node {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.tree-node:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-[1024px] flex flex-col bg-secondary">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="w-full h-[60px] bg-primary text-white sticky top-0 z-50 shadow-md">
|
||||
<div class="container mx-auto h-full px-4 flex items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center">
|
||||
<span class="font-logo text-2xl mr-8">人力</span>
|
||||
</div>
|
||||
|
||||
<!-- 主导航 -->
|
||||
<nav class="flex-1 flex justify-center">
|
||||
<ul class="flex space-x-6 text-sm">
|
||||
<li class="hover:text-secondary cursor-pointer">多维统计</li>
|
||||
<li class="hover:text-secondary cursor-pointer">人员管理</li>
|
||||
<li class="hover:text-secondary cursor-pointer">组织管理</li>
|
||||
<li class="hover:text-secondary cursor-pointer">考勤管理</li>
|
||||
<li class="hover:text-secondary cursor-pointer">绩效管理</li>
|
||||
<li class="hover:text-secondary cursor-pointer">薪酬管理</li>
|
||||
<li class="hover:text-secondary cursor-pointer">知识库</li>
|
||||
<li class="hover:text-secondary cursor-pointer">后台管理</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- 右侧功能区 -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- 搜索框 -->
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="搜索..." class="bg-white/20 text-white placeholder-white/70 rounded-button pl-8 pr-4 py-1 text-sm w-40 focus:outline-none focus:ring-1 focus:ring-white">
|
||||
<i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-white/70 text-sm"></i>
|
||||
</div>
|
||||
|
||||
<!-- AI助手 -->
|
||||
<button class="bg-white/10 hover:bg-white/20 rounded-button px-3 py-1 text-sm flex items-center space-x-1">
|
||||
<i class="fas fa-robot text-sm"></i>
|
||||
<span>AI助手</span>
|
||||
</button>
|
||||
|
||||
<!-- 用户头像 -->
|
||||
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center cursor-pointer">
|
||||
<i class="fas fa-user text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<main class="flex-1 container mx-auto px-4 py-6 flex">
|
||||
<!-- 左侧组织架构树 -->
|
||||
<aside class="w-1/5 pr-4">
|
||||
<div class="bg-white rounded-md shadow-sm p-4 h-full">
|
||||
<h3 class="text-sm font-medium mb-4 text-gray-700">组织架构</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-building mr-2 text-gray-500 text-sm"></i>
|
||||
<span class="text-sm">集团公司</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-4">
|
||||
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||||
<span class="text-sm">华东事业部</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-4">
|
||||
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||||
<span class="text-sm">上海分公司</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-4">
|
||||
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-users mr-2 text-gray-500 text-sm"></i>
|
||||
<span class="text-sm">研发中心</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-users mr-2 text-gray-500 text-sm"></i>
|
||||
<span class="text-sm">市场部</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||||
<span class="text-sm">杭州分公司</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||||
<span class="text-sm">华南事业部</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-node cursor-pointer p-2 rounded-md hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-sitemap mr-2 text-gray-500 text-sm"></i>
|
||||
<span class="text-sm">华北事业部</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<section class="w-4/5">
|
||||
<!-- 筛选区 -->
|
||||
<div class="bg-white rounded-md shadow-sm p-4 mb-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium text-gray-700">汇报关系</h3>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center">
|
||||
<span class="text-sm text-gray-500 mr-2">年份:</span>
|
||||
<div class="relative">
|
||||
<button class="bg-secondary hover:bg-gray-100 rounded-button px-3 py-1 text-sm flex items-center space-x-1">
|
||||
<span>2023</span>
|
||||
<i class="fas fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-primary hover:bg-blue-600 text-white rounded-button px-3 py-1 text-sm flex items-center space-x-1">
|
||||
<i class="fas fa-filter text-xs"></i>
|
||||
<span>筛选</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 汇报关系树 -->
|
||||
<div class="bg-white rounded-md shadow-sm p-6">
|
||||
<div class="flex justify-center">
|
||||
<div class="relative">
|
||||
<!-- 第一层 -->
|
||||
<div class="flex justify-center mb-8">
|
||||
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||||
<div class="w-12 h-12 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||||
<i class="fas fa-user text-primary"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-medium">张明远</h4>
|
||||
<p class="text-xs text-gray-500">CEO</p>
|
||||
<p class="text-xs text-gray-500">集团公司</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二层 -->
|
||||
<div class="flex justify-center space-x-16 mb-8">
|
||||
<div class="relative">
|
||||
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||||
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||||
<i class="fas fa-user text-primary text-sm"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-medium">李华</h4>
|
||||
<p class="text-xs text-gray-500">副总裁</p>
|
||||
<p class="text-xs text-gray-500">华东事业部</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||||
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||||
<i class="fas fa-user text-primary text-sm"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-medium">王伟</h4>
|
||||
<p class="text-xs text-gray-500">副总裁</p>
|
||||
<p class="text-xs text-gray-500">华南事业部</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三层 -->
|
||||
<div class="flex justify-center space-x-32 mb-8">
|
||||
<div class="relative">
|
||||
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||||
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||||
<i class="fas fa-user text-primary text-xs"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-medium">陈思</h4>
|
||||
<p class="text-xs text-gray-500">总监</p>
|
||||
<p class="text-xs text-gray-500">上海分公司</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||||
<div class="tree-node p-4 rounded-md shadow-sm border border-gray-100 w-48 text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||||
<i class="fas fa-user text-primary text-xs"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-medium">赵阳</h4>
|
||||
<p class="text-xs text-gray-500">总监</p>
|
||||
<p class="text-xs text-gray-500">杭州分公司</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四层 -->
|
||||
<div class="flex justify-center space-x-64">
|
||||
<div class="relative">
|
||||
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||||
<div class="tree-node p-3 rounded-md shadow-sm border border-gray-100 w-40 text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||||
<i class="fas fa-user text-primary text-xs"></i>
|
||||
</div>
|
||||
<h4 class="text-xs font-medium">周婷</h4>
|
||||
<p class="text-xs text-gray-500">经理</p>
|
||||
<p class="text-xs text-gray-500">研发中心</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute top-0 left-1/2 h-8 w-px bg-gray-300 transform -translate-x-1/2"></div>
|
||||
<div class="tree-node p-3 rounded-md shadow-sm border border-gray-100 w-40 text-center">
|
||||
<div class="w-8 h-8 rounded-full bg-primary/10 mx-auto mb-2 flex items-center justify-center">
|
||||
<i class="fas fa-user text-primary text-xs"></i>
|
||||
</div>
|
||||
<h4 class="text-xs font-medium">吴昊</h4>
|
||||
<p class="text-xs text-gray-500">经理</p>
|
||||
<p class="text-xs text-gray-500">市场部</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 底部通栏 -->
|
||||
<footer class="w-full bg-gray-800 text-white py-8">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h4 class="text-sm font-medium mb-4">关于我们</h4>
|
||||
<ul class="space-y-2 text-xs text-gray-300">
|
||||
<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>
|
||||
<h4 class="text-sm font-medium mb-4">产品服务</h4>
|
||||
<ul class="space-y-2 text-xs text-gray-300">
|
||||
<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>
|
||||
<h4 class="text-sm font-medium mb-4">帮助中心</h4>
|
||||
<ul class="space-y-2 text-xs text-gray-300">
|
||||
<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">API文档</a></li>
|
||||
<li><a href="#" class="hover:text-white">联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium mb-4">联系我们</h4>
|
||||
<ul class="space-y-2 text-xs text-gray-300">
|
||||
<li class="flex items-center"><i class="fas fa-phone-alt mr-2 text-xs"></i> 400-888-8888</li>
|
||||
<li class="flex items-center"><i class="fas fa-envelope mr-2 text-xs"></i> service@hrsystem.com</li>
|
||||
<li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-xs"></i> 上海市浦东新区张江高科技园区</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 mt-8 pt-6 flex justify-between items-center">
|
||||
<p class="text-xs text-gray-400">© 2023 人力管理系统 版权所有</p>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
|
||||
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,563 @@
|
||||
<!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%);
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.org-tree {
|
||||
height: calc(100vh - 156px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.performance-dashboard {
|
||||
height: calc(100vh - 156px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: white;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url('https://mastergo.com/ai/api/search-image?query=professional20business20person20portrait20with20neutral20background20high20quality20realistic20detailed20face20corporate20style20suit20and20tie20sharp20focus20on20eyes20and20facial20features20studio20lighting20isolated20on20light20gray20background&width=64&height=64&orientation=squarish&flag=689e31f860f98150523d3e36c0018c44');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.ai-assistant {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ai-assistant::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #00FF9D;
|
||||
border-radius: 9999px;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-secondary min-h-screen flex flex-col">
|
||||
<!-- 顶部导航 -->
|
||||
<header class="w-full">
|
||||
<nav class="bg-primary text-white h-15 flex items-center px-6">
|
||||
<div class="flex items-center space-x-8 w-full">
|
||||
<div class="font-['Pacifico'] text-xl">人力</div>
|
||||
<div class="flex space-x-6 text-sm flex-1">
|
||||
<a href="#" class="hover:opacity-80">多维统计</a>
|
||||
<a href="#" class="hover:opacity-80">人员管理</a>
|
||||
<a href="#" class="hover:opacity-80">组织管理</a>
|
||||
<a href="#" class="hover:opacity-80">考勤管理</a>
|
||||
<a href="#" class="hover:opacity-80">绩效管理</a>
|
||||
<a href="#" class="hover:opacity-80">薪酬管理</a>
|
||||
<a href="#" class="hover:opacity-80">知识库</a>
|
||||
<a href="#" class="hover:opacity-80">后台管理</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="搜索..."
|
||||
class="bg-white bg-opacity-20 text-white placeholder-white text-sm px-4 py-1 !rounded-button w-40 focus:outline-none">
|
||||
<i
|
||||
class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-white text-sm"></i>
|
||||
</div>
|
||||
<div class="user-avatar !rounded-button cursor-pointer"></div>
|
||||
<button
|
||||
class="ai-assistant bg-white text-primary text-sm px-3 py-1 !rounded-button flex items-center space-x-1">
|
||||
<i class="fas fa-robot text-xs"></i>
|
||||
<span>AI 助手</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="bg-yellow-50 text-yellow-800 text-xs h-9 px-6 flex items-center">
|
||||
<span class="font-medium mr-2">公告：</span>
|
||||
<div class="overflow-hidden whitespace-nowrap">
|
||||
<div class="marquee inline-block">
|
||||
年度绩效考核即将开始，请各部门负责人及时提交考核计划 | 2023年第三季度优秀员工评选结果已公布 | 公司新福利政策：增加年度体检项目 | 人力资源系统将于本周六凌晨2:00-4:00进行维护升级
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 flex max-w-7xl mx-auto w-full px-6 py-4">
|
||||
<!-- 左侧组织架构树 -->
|
||||
<div class="w-1/5 pr-4">
|
||||
<div class="bg-white rounded-lg shadow-sm p-4 org-tree">
|
||||
<h3 class="text-sm font-medium mb-3">组织架构</h3>
|
||||
<div class="space-y-1">
|
||||
<div class="text-sm font-medium py-1 px-2 bg-primary bg-opacity-10 text-primary rounded">公司总部</div>
|
||||
<div class="pl-4">
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">总裁办公室</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">人力资源中心</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">财务中心</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">技术研发中心</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">市场营销中心</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">产品运营中心</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">客户服务中心</div>
|
||||
</div>
|
||||
<div class="text-sm font-medium py-1 px-2 bg-primary bg-opacity-10 text-primary rounded">华东分公司</div>
|
||||
<div class="pl-4">
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">上海办事处</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">杭州办事处</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">南京办事处</div>
|
||||
</div>
|
||||
<div class="text-sm font-medium py-1 px-2 bg-primary bg-opacity-10 text-primary rounded">华南分公司</div>
|
||||
<div class="pl-4">
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">广州办事处</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">深圳办事处</div>
|
||||
</div>
|
||||
<div class="text-sm font-medium py-1 px-2 bg-primary bg-opacity-10 text-primary rounded">华北分公司</div>
|
||||
<div class="pl-4">
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">北京办事处</div>
|
||||
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">天津办事处</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧绩效仪表盘 -->
|
||||
<div class="w-4/5 pl-4">
|
||||
<div class="bg-white rounded-lg shadow-sm p-4 performance-dashboard">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-medium">绩效仪表盘</h2>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-sm">绩效计划：</span>
|
||||
<div class="relative">
|
||||
<button class="bg-secondary text-sm px-3 py-1 !rounded-button flex items-center space-x-1">
|
||||
<span>2023年Q3季度考核</span>
|
||||
<i class="fas fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表区域 -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<div class="bg-white rounded-lg shadow-sm p-4">
|
||||
<h3 class="text-sm font-medium mb-2">绩效评分分布</h3>
|
||||
<div class="chart-container" id="scoreDistributionChart"></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow-sm p-4">
|
||||
<h3 class="text-sm font-medium mb-2">部门绩效平均分</h3>
|
||||
<div class="flex justify-end mb-2">
|
||||
<div class="relative">
|
||||
<button
|
||||
class="bg-secondary text-sm px-3 py-1 !rounded-button flex items-center space-x-1">
|
||||
<span>一级部门</span>
|
||||
<i class="fas fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" id="departmentScoreChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 人员绩效明细表 -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-4">
|
||||
<h3 class="text-sm font-medium mb-3">人员绩效明细</h3>
|
||||
<div class="table-container">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="table-header">
|
||||
<tr class="border-b">
|
||||
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<span>姓名</span>
|
||||
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<span>部门</span>
|
||||
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<span>总分</span>
|
||||
<i class="fas fa-sort-down ml-1 text-xs opacity-50"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<span>代码行数</span>
|
||||
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<span>文档字数</span>
|
||||
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<span>项目金额数</span>
|
||||
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<span>出勤时长</span>
|
||||
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||||
<div class="flex items-center">
|
||||
<span>价值观</span>
|
||||
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">张明远</td>
|
||||
<td class="py-2 px-3">技术研发中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">96.5</td>
|
||||
<td class="py-2 px-3">12500</td>
|
||||
<td class="py-2 px-3">8500</td>
|
||||
<td class="py-2 px-3">¥1,250,000</td>
|
||||
<td class="py-2 px-3">186</td>
|
||||
<td class="py-2 px-3">48.0</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">李思颖</td>
|
||||
<td class="py-2 px-3">市场营销中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">95.0</td>
|
||||
<td class="py-2 px-3">11800</td>
|
||||
<td class="py-2 px-3">9200</td>
|
||||
<td class="py-2 px-3">¥1,100,000</td>
|
||||
<td class="py-2 px-3">182</td>
|
||||
<td class="py-2 px-3">47.0</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">王浩然</td>
|
||||
<td class="py-2 px-3">产品运营中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">93.5</td>
|
||||
<td class="py-2 px-3">11000</td>
|
||||
<td class="py-2 px-3">7800</td>
|
||||
<td class="py-2 px-3">¥980,000</td>
|
||||
<td class="py-2 px-3">180</td>
|
||||
<td class="py-2 px-3">47.0</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">陈雨桐</td>
|
||||
<td class="py-2 px-3">人力资源中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">92.0</td>
|
||||
<td class="py-2 px-3">10500</td>
|
||||
<td class="py-2 px-3">9500</td>
|
||||
<td class="py-2 px-3">¥920,000</td>
|
||||
<td class="py-2 px-3">178</td>
|
||||
<td class="py-2 px-3">46.5</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">刘子轩</td>
|
||||
<td class="py-2 px-3">技术研发中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">91.5</td>
|
||||
<td class="py-2 px-3">9800</td>
|
||||
<td class="py-2 px-3">7200</td>
|
||||
<td class="py-2 px-3">¥890,000</td>
|
||||
<td class="py-2 px-3">175</td>
|
||||
<td class="py-2 px-3">46.0</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">赵欣然</td>
|
||||
<td class="py-2 px-3">客户服务中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">90.0</td>
|
||||
<td class="py-2 px-3">9200</td>
|
||||
<td class="py-2 px-3">8500</td>
|
||||
<td class="py-2 px-3">¥850,000</td>
|
||||
<td class="py-2 px-3">172</td>
|
||||
<td class="py-2 px-3">45.5</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">孙伟杰</td>
|
||||
<td class="py-2 px-3">财务中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">89.5</td>
|
||||
<td class="py-2 px-3">8900</td>
|
||||
<td class="py-2 px-3">6800</td>
|
||||
<td class="py-2 px-3">¥820,000</td>
|
||||
<td class="py-2 px-3">170</td>
|
||||
<td class="py-2 px-3">45.0</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">周晓彤</td>
|
||||
<td class="py-2 px-3">市场营销中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">88.0</td>
|
||||
<td class="py-2 px-3">8500</td>
|
||||
<td class="py-2 px-3">7900</td>
|
||||
<td class="py-2 px-3">¥780,000</td>
|
||||
<td class="py-2 px-3">168</td>
|
||||
<td class="py-2 px-3">44.5</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">吴宇航</td>
|
||||
<td class="py-2 px-3">技术研发中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">87.5</td>
|
||||
<td class="py-2 px-3">8200</td>
|
||||
<td class="py-2 px-3">6500</td>
|
||||
<td class="py-2 px-3">¥750,000</td>
|
||||
<td class="py-2 px-3">165</td>
|
||||
<td class="py-2 px-3">44.0</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-secondary">
|
||||
<td class="py-2 px-3">郑雅文</td>
|
||||
<td class="py-2 px-3">产品运营中心</td>
|
||||
<td class="py-2 px-3 font-medium text-primary">86.0</td>
|
||||
<td class="py-2 px-3">8000</td>
|
||||
<td class="py-2 px-3">7800</td>
|
||||
<td class="py-2 px-3">¥720,000</td>
|
||||
<td class="py-2 px-3">162</td>
|
||||
<td class="py-2 px-3">43.5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-3 text-sm">
|
||||
<div>显示 1 到 10 条，共 128 条记录</div>
|
||||
<div class="flex space-x-2">
|
||||
<button class="bg-secondary px-3 py-1 !rounded-button">上一页</button>
|
||||
<button class="bg-primary text-white px-3 py-1 !rounded-button">1</button>
|
||||
<button class="bg-secondary px-3 py-1 !rounded-button">2</button>
|
||||
<button class="bg-secondary px-3 py-1 !rounded-button">3</button>
|
||||
<span class="px-2 py-1">...</span>
|
||||
<button class="bg-secondary px-3 py-1 !rounded-button">13</button>
|
||||
<button class="bg-secondary px-3 py-1 !rounded-button">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-gray-800 text-gray-300 text-xs py-6 px-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-white mb-3">关于我们</h4>
|
||||
<ul class="space-y-2">
|
||||
<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>
|
||||
<h4 class="text-sm font-medium text-white mb-3">产品服务</h4>
|
||||
<ul class="space-y-2">
|
||||
<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>
|
||||
<h4 class="text-sm font-medium text-white mb-3">帮助中心</h4>
|
||||
<ul class="space-y-2">
|
||||
<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>
|
||||
<h4 class="text-sm font-medium text-white mb-3">联系我们</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><i class="fas fa-map-marker-alt mr-2"></i> 北京市海淀区中关村南大街5号</li>
|
||||
<li><i class="fas fa-phone-alt mr-2"></i> 400-888-8888</li>
|
||||
<li><i class="fas fa-envelope mr-2"></i> hr@company.com</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-in"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 mt-6 pt-6 flex justify-between">
|
||||
<div>© 2023 人力资源管理系统 版权所有</div>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="hover:text-white">隐私政策</a>
|
||||
<a href="#" class="hover:text-white">服务条款</a>
|
||||
<a href="#" class="hover:text-white">法律声明</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// 绩效评分分布饼图
|
||||
const scoreDistributionChart = echarts.init(document.getElementById('scoreDistributionChart'));
|
||||
const scoreDistributionOption = {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 'center',
|
||||
data: ['0-60分', '60-80分', '80-100分']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '绩效评分分布',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 12, name: '0-60分', itemStyle: { color: '#FF6B6B' } },
|
||||
{ value: 45, name: '60-80分', itemStyle: { color: '#4ECDC4' } },
|
||||
{ value: 71, name: '80-100分', itemStyle: { color: '#45B7D1' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
scoreDistributionChart.setOption(scoreDistributionOption);
|
||||
// 部门绩效平均分柱状图
|
||||
const departmentScoreChart = echarts.init(document.getElementById('departmentScoreChart'));
|
||||
const departmentScoreOption = {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['技术研发', '市场营销', '产品运营', '人力资源', '财务中心', '客户服务']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '平均分',
|
||||
type: 'bar',
|
||||
data: [89.5, 87.2, 85.8, 84.3, 83.7, 82.1],
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
const colorList = ['#45B7D1', '#4ECDC4', '#A5DEE4', '#7AC5CD', '#66C6C4', '#45B7D1'];
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
departmentScoreChart.setOption(departmentScoreOption);
|
||||
// 窗口大小变化时重新调整图表大小
|
||||
window.addEventListener('resize', function () {
|
||||
scoreDistributionChart.resize();
|
||||
departmentScoreChart.resize();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,10 +1,431 @@
|
||||
@import '~@/utils/utils.less';
|
||||
|
||||
.frameContent {
|
||||
width: 100%;
|
||||
.staffInfoContainer {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
// background-color: #f5f6fa;
|
||||
|
||||
.announcementBar {
|
||||
background: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.announcement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.announcementLabel {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.anticon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollContainer {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scrollContent {
|
||||
display: inline-block;
|
||||
animation: scroll 30s linear infinite;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
// padding: 12px;
|
||||
|
||||
.contentCard {
|
||||
.ant-card-head {
|
||||
.ant-card-head-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchCard {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 搜索表单容器样式 */
|
||||
.searchFormContainer {
|
||||
.searchForm {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.ant-form-item-label {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
label {
|
||||
color: #333 !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-select-selector,
|
||||
.ant-picker {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #4c7bff;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.ant-select-focused .ant-select-selector,
|
||||
&.ant-picker-focused {
|
||||
border-color: #2d5cf6;
|
||||
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-selection-placeholder,
|
||||
.ant-input::placeholder,
|
||||
.ant-picker-input input::placeholder {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索按钮样式 */
|
||||
.searchButton {
|
||||
background: linear-gradient(135deg, #2d5cf6 0%, #4c7bff 100%);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 8px rgba(45, 92, 246, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: linear-gradient(135deg, #4c7bff 0%, #6b8fff 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(45, 92, 246, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 重置按钮样式 */
|
||||
.resetButton {
|
||||
background: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
color: #666;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: #4c7bff;
|
||||
color: #2d5cf6;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
color: #ff7875;
|
||||
}
|
||||
}
|
||||
|
||||
/* 展开按钮样式 */
|
||||
.expandButton {
|
||||
color: #2d5cf6;
|
||||
font-size: 14px;
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #4c7bff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actionBar {
|
||||
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.totalInfo {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.exportButton {
|
||||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
||||
border: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
// margin-top: -8px;
|
||||
height: 35px;
|
||||
padding: 0 16px;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: linear-gradient(135deg, #73d13d 0%, #95de64 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.addButton {
|
||||
// background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
|
||||
// border: none;
|
||||
// border-radius: 8px;
|
||||
// font-weight: 600;
|
||||
// font-size: 14px;
|
||||
// box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
|
||||
// transition: all 0.3s ease;
|
||||
// // margin-top: -8px;
|
||||
// height: 35px;
|
||||
// padding: 0 16px;
|
||||
|
||||
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// background: linear-gradient(135deg, #ffa940 0%, #ffc069 100%);
|
||||
// transform: translateY(-2px);
|
||||
// box-shadow: 0 6px 20px rgba(250, 140, 22, 0.4);
|
||||
// }
|
||||
|
||||
// &:active {
|
||||
// transform: translateY(0);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.tableCard {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
padding-bottom: 10px;
|
||||
|
||||
.ant-table-wrapper {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-thead>tr>th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ant-table-tbody>tr {
|
||||
&:hover>td {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
>td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paginationWrapper {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
|
||||
.ant-pagination {
|
||||
.ant-pagination-total-text {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.ant-pagination-item {
|
||||
border-radius: 4px;
|
||||
|
||||
&.ant-pagination-item-active {
|
||||
background-color: #2d5cf6;
|
||||
border-color: #2d5cf6;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
// padding: 12px;
|
||||
|
||||
.contentCard {
|
||||
border: none !important;
|
||||
.ant-card-head {
|
||||
.ant-card-head-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actionBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.totalInfo {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 12px 24px 0px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 1200px) {
|
||||
.staffInfoContainer {
|
||||
.mainContent {
|
||||
.searchCard {
|
||||
.ant-row {
|
||||
.ant-col {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义主题色
|
||||
.ant-btn-primary {
|
||||
background-color: #2d5cf6;
|
||||
border-color: #2d5cf6;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #4c7bff;
|
||||
border-color: #4c7bff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tree .ant-tree-node-selected {
|
||||
background-color: #e6f7ff !important;
|
||||
}
|
||||
|
||||
.ant-select-focused .ant-select-selector,
|
||||
.ant-input-affix-wrapper-focused,
|
||||
.ant-input:focus,
|
||||
.ant-input-focused {
|
||||
border-color: #2d5cf6 !important;
|
||||
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important;
|
||||
}
|
||||
|
||||
// 标签样式优化
|
||||
.ant-tag {
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// 按钮组间距调整
|
||||
.ant-space-item {
|
||||
.ant-btn+.ant-btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格链接按钮样式
|
||||
.ant-btn-link {
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { Button, Col, Form, Input, Row, Space } from 'antd';
|
||||
import { ClearOutlined, SearchOutlined, SettingOutlined, CodeOutlined } from '@ant-design/icons';
|
||||
import styles from "../ConfigManage.less";
|
||||
|
||||
const ConfigManageRenderSimpleForm = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
const { submitButtons, handleSearch, handleFormReset, params } = props;
|
||||
|
||||
React.useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
configName: params?.configName,
|
||||
configCode: params?.configCode,
|
||||
});
|
||||
}, [params]);
|
||||
|
||||
const onFinish = values => {
|
||||
const searchParams = {
|
||||
...values,
|
||||
};
|
||||
handleSearch && handleSearch(searchParams);
|
||||
};
|
||||
|
||||
const myhandleFormReset = () => {
|
||||
form.resetFields();
|
||||
handleFormReset && handleFormReset();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.searchFormContainer}>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
layout="vertical"
|
||||
className={styles.searchForm}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="configName"
|
||||
label="配置项名称"
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入配置项名称"
|
||||
allowClear
|
||||
prefix={<SettingOutlined />}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
name="configCode"
|
||||
label="配置项Code"
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入配置项Code"
|
||||
allowClear
|
||||
prefix={<CodeOutlined />}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label=" " colon={false}>
|
||||
<Space size="middle">
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
icon={<SearchOutlined />}
|
||||
className={styles.searchButton}
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
<Button
|
||||
onClick={myhandleFormReset}
|
||||
icon={<ClearOutlined />}
|
||||
className={styles.resetButton}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default ConfigManageRenderSimpleForm;
|
||||
@ -1,10 +1,618 @@
|
||||
@import '~@/utils/utils.less';
|
||||
|
||||
.frameContent {
|
||||
width: 100%;
|
||||
.dataDictContainer,
|
||||
.staffInfoContainer {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
// background-color: #f5f6fa;
|
||||
|
||||
.announcementBar {
|
||||
background: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.announcement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.announcementLabel {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.anticon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollContainer {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scrollContent {
|
||||
display: inline-block;
|
||||
animation: scroll 30s linear infinite;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
// padding: 12px;
|
||||
|
||||
.contentCard {
|
||||
.ant-card-head {
|
||||
.ant-card-head-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.treeCard {
|
||||
height: 600px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
|
||||
/* 搜索框样式 */
|
||||
.tree-search {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #d9d9d9;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
border: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
font-size: 13px;
|
||||
|
||||
&::placeholder {
|
||||
color: #bfbfbf;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-prefix {
|
||||
color: #bfbfbf;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.treeHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.treeContainer {
|
||||
height: 480px; /* 减少高度为搜索框留空间 */
|
||||
overflow-y: auto;
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
||||
.orgTree {
|
||||
.ant-tree-treenode {
|
||||
padding: 2px 0;
|
||||
|
||||
.ant-tree-node-content-wrapper {
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 6px 10px;
|
||||
margin: 1px 0;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
|
||||
transform: translateX(3px);
|
||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
|
||||
}
|
||||
|
||||
&.ant-tree-node-selected {
|
||||
background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%) !important;
|
||||
box-shadow: 0 3px 12px rgba(24, 144, 255, 0.25);
|
||||
border-left: 3px solid #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tree-iconEle {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.ant-tree-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 展开/收起图标样式 */
|
||||
.ant-tree-switcher {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.ant-tree-switcher-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tree节点标题样式 */
|
||||
.tree-node-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.anticon {
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: rgba(24, 144, 255, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: rgba(24, 144, 255, 0.12);
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.node-title {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.node-count {
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
margin-left: auto;
|
||||
background: #f5f5f5;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchCard {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 搜索表单容器样式 */
|
||||
.searchFormContainer {
|
||||
.searchForm {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.ant-form-item-label {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
label {
|
||||
color: #333 !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-select-selector,
|
||||
.ant-picker {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #4c7bff;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.ant-select-focused .ant-select-selector,
|
||||
&.ant-picker-focused {
|
||||
border-color: #2d5cf6;
|
||||
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-selection-placeholder,
|
||||
.ant-input::placeholder,
|
||||
.ant-picker-input input::placeholder {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索按钮样式 */
|
||||
.searchButton {
|
||||
background: linear-gradient(135deg, #2d5cf6 0%, #4c7bff 100%);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 8px rgba(45, 92, 246, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: linear-gradient(135deg, #4c7bff 0%, #6b8fff 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(45, 92, 246, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 重置按钮样式 */
|
||||
.resetButton {
|
||||
background: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
color: #666;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: #4c7bff;
|
||||
color: #2d5cf6;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
color: #ff7875;
|
||||
}
|
||||
}
|
||||
|
||||
/* 展开按钮样式 */
|
||||
.expandButton {
|
||||
color: #2d5cf6;
|
||||
font-size: 14px;
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #4c7bff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actionBar {
|
||||
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.totalInfo {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.exportButton {
|
||||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
// margin-top: -8px;
|
||||
height: 35px;
|
||||
padding: 0 16px;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: linear-gradient(135deg, #73d13d 0%, #95de64 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.addButton {
|
||||
background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
// margin-top: -8px;
|
||||
height: 35px;
|
||||
padding: 0 16px;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: linear-gradient(135deg, #ffa940 0%, #ffc069 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(250, 140, 22, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableCard {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
padding-bottom: 10px;
|
||||
|
||||
.ant-table-wrapper {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-thead>tr>th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ant-table-tbody>tr {
|
||||
&:hover>td {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
>td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paginationWrapper {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
|
||||
.ant-pagination {
|
||||
.ant-pagination-total-text {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.ant-pagination-item {
|
||||
border-radius: 4px;
|
||||
|
||||
&.ant-pagination-item-active {
|
||||
background-color: #2d5cf6;
|
||||
border-color: #2d5cf6;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
// padding: 12px;
|
||||
|
||||
.contentCard {
|
||||
border: none !important;
|
||||
.ant-card-head {
|
||||
.ant-card-head-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actionBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.totalInfo {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 1200px) {
|
||||
.staffInfoContainer {
|
||||
.mainContent {
|
||||
.searchCard {
|
||||
.ant-row {
|
||||
.ant-col {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义主题色
|
||||
.ant-btn-primary {
|
||||
background-color: #2d5cf6;
|
||||
border-color: #2d5cf6;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #4c7bff;
|
||||
border-color: #4c7bff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tree .ant-tree-node-selected {
|
||||
background-color: #e6f7ff !important;
|
||||
}
|
||||
|
||||
.ant-select-focused .ant-select-selector,
|
||||
.ant-input-affix-wrapper-focused,
|
||||
.ant-input:focus,
|
||||
.ant-input-focused {
|
||||
border-color: #2d5cf6 !important;
|
||||
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important;
|
||||
}
|
||||
|
||||
// 标签样式优化
|
||||
.ant-tag {
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// 按钮组间距调整
|
||||
.ant-space-item {
|
||||
.ant-btn+.ant-btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格链接按钮样式
|
||||
.ant-btn-link {
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@ -0,0 +1,197 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
InputNumber,
|
||||
Row,
|
||||
Col,
|
||||
message
|
||||
} from 'antd';
|
||||
import {
|
||||
UserOutlined,
|
||||
PhoneOutlined,
|
||||
TeamOutlined,
|
||||
ApartmentOutlined
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
class PerformanceAdd extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.formRef = React.createRef();
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
handleSubmit = (values) => {
|
||||
console.log('新增人员信息:', values);
|
||||
|
||||
// 这里可以调用API接口保存数据
|
||||
// 模拟保存成功
|
||||
message.success('新增人员成功！');
|
||||
|
||||
// 重置表单
|
||||
this.formRef.current?.resetFields();
|
||||
|
||||
// 调用父组件的回调函数
|
||||
if (this.props.onSuccess) {
|
||||
this.props.onSuccess(values);
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
this.handleCancel();
|
||||
};
|
||||
|
||||
// 取消操作
|
||||
handleCancel = () => {
|
||||
// 重置表单
|
||||
this.formRef.current?.resetFields();
|
||||
|
||||
// 调用父组件的关闭回调
|
||||
if (this.props.onCancel) {
|
||||
this.props.onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { visible, loading = false } = this.props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="新增人员"
|
||||
open={visible}
|
||||
onOk={() => this.formRef.current?.submit()}
|
||||
onCancel={this.handleCancel}
|
||||
width={600}
|
||||
confirmLoading={loading}
|
||||
destroyOnClose={true}
|
||||
maskClosable={false}
|
||||
>
|
||||
<Form
|
||||
ref={this.formRef}
|
||||
layout="vertical"
|
||||
onFinish={this.handleSubmit}
|
||||
initialValues={{
|
||||
workType: '全职'
|
||||
}}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="姓名"
|
||||
rules={[
|
||||
{ required: true, message: '请输入姓名' },
|
||||
{ min: 2, max: 10, message: '姓名长度为2-10个字符' }
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入姓名"
|
||||
prefix={<UserOutlined />}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="age"
|
||||
label="年龄"
|
||||
rules={[
|
||||
{ required: true, message: '请输入年龄' }
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="请输入年龄"
|
||||
min={18}
|
||||
max={65}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="department"
|
||||
label="部门"
|
||||
rules={[
|
||||
{ required: true, message: '请选择部门' }
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择部门"
|
||||
suffixIcon={<ApartmentOutlined />}
|
||||
>
|
||||
<Option value="技术部">技术部</Option>
|
||||
<Option value="产品部">产品部</Option>
|
||||
<Option value="运营部">运营部</Option>
|
||||
<Option value="财务部">财务部</Option>
|
||||
<Option value="人事部">人事部</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="position"
|
||||
label="岗位"
|
||||
rules={[
|
||||
{ required: true, message: '请选择岗位' }
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择岗位"
|
||||
suffixIcon={<TeamOutlined />}
|
||||
>
|
||||
<Option value="高级工程师">高级工程师</Option>
|
||||
<Option value="产品经理">产品经理</Option>
|
||||
<Option value="运营专员">运营专员</Option>
|
||||
<Option value="会计">会计</Option>
|
||||
<Option value="HR专员">HR专员</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="workType"
|
||||
label="工作性质"
|
||||
rules={[
|
||||
{ required: true, message: '请选择工作性质' }
|
||||
]}
|
||||
>
|
||||
<Select placeholder="请选择工作性质">
|
||||
<Option value="全职">全职</Option>
|
||||
{/* <Option value="兼职">兼职</Option> */}
|
||||
<Option value="实习">实习</Option>
|
||||
<Option value="外包">外包</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="phone"
|
||||
label="电话"
|
||||
rules={[
|
||||
{ required: true, message: '请输入电话号码' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入电话号码"
|
||||
prefix={<PhoneOutlined />}
|
||||
maxLength={11}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PerformanceAdd;
|
||||
Loading…
Reference in New Issue