|
|
|
|
|
<!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>
|
|
|
|
|
|
body {
|
|
|
|
|
|
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
|
|
|
|
min-height: 1024px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.nav-item:hover {
|
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
|
|
|
}
|
|
|
|
|
|
.tree-node:hover {
|
|
|
|
|
|
background-color: #E6E9F0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.form-card {
|
|
|
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
}
|
|
|
|
|
|
.scroll-container {
|
|
|
|
|
|
animation: scroll 15s linear infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes scroll {
|
|
|
|
|
|
0% { transform: translateX(0); }
|
|
|
|
|
|
100% { transform: translateX(-50%); }
|
|
|
|
|
|
}
|
|
|
|
|
|
i.fa-icon {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="bg-gray-50">
|
|
|
|
|
|
<!-- 顶部导航栏 -->
|
|
|
|
|
|
<!-- <header class="bg-primary text-white sticky top-0 z-50">
|
|
|
|
|
|
<div class="container mx-auto px-4 h-15 flex items-center justify-between">
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
|
<span class="font-['Pacifico'] text-xl mr-10">人力</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="flex-1 flex justify-center">
|
|
|
|
|
|
<ul class="flex space-x-6">
|
|
|
|
|
|
<li class="nav-item px-3 py-2 rounded-button cursor-pointer">多维统计</li>
|
|
|
|
|
|
<li class="nav-item px-3 py-2 rounded-button cursor-pointer">人员管理</li>
|
|
|
|
|
|
<li class="nav-item px-3 py-2 rounded-button cursor-pointer">组织管理</li>
|
|
|
|
|
|
<li class="nav-item px-3 py-2 rounded-button cursor-pointer">考勤管理</li>
|
|
|
|
|
|
<li class="nav-item px-3 py-2 rounded-button cursor-pointer">绩效管理</li>
|
|
|
|
|
|
<li class="nav-item px-3 py-2 rounded-button cursor-pointer">薪酬管理</li>
|
|
|
|
|
|
<li class="nav-item px-3 py-2 rounded-button cursor-pointer">知识库</li>
|
|
|
|
|
|
<li class="nav-item px-3 py-2 rounded-button cursor-pointer">后台管理</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<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 rounded-button pl-8 pr-4 py-1 w-40 focus:outline-none">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-magnifying-glass absolute left-2 top-1/2 transform -translate-y-1/2 text-white text-sm"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
|
|
|
|
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-user text-primary text-sm"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="text-sm">张明远</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button class="bg-white text-primary text-sm px-3 py-1 rounded-button flex items-center space-x-1">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-robot text-sm"></i>
|
|
|
|
|
|
<span>AI 助手</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header> -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 公告栏 -->
|
|
|
|
|
|
<div class="bg-primary bg-opacity-10 py-2 overflow-hidden">
|
|
|
|
|
|
<div class="container mx-auto px-4">
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
|
<span class="bg-primary text-white text-xs px-2 py-1 rounded-button mr-3 whitespace-nowrap">公告</span>
|
|
|
|
|
|
<div class="relative w-full overflow-hidden">
|
|
|
|
|
|
<div class="scroll-container whitespace-nowrap">
|
|
|
|
|
|
<span class="text-sm mr-8">2023年度绩效考核方案已发布，请各部门负责人及时查阅</span>
|
|
|
|
|
|
<span class="text-sm mr-8">薪酬管理系统将于本周五18:00-20:00进行升级维护</span>
|
|
|
|
|
|
<span class="text-sm mr-8">新员工入职培训计划已更新，请相关人员做好准备</span>
|
|
|
|
|
|
<span class="text-sm mr-8">2023年度绩效考核方案已发布，请各部门负责人及时查阅</span>
|
|
|
|
|
|
<span class="text-sm mr-8">薪酬管理系统将于本周五18:00-20:00进行升级维护</span>
|
|
|
|
|
|
<span class="text-sm mr-8">新员工入职培训计划已更新，请相关人员做好准备</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 主体内容 -->
|
|
|
|
|
|
<main class="container mx-auto px-4 py-6">
|
|
|
|
|
|
<div class="flex">
|
|
|
|
|
|
<!-- 左侧组织架构树 -->
|
|
|
|
|
|
<div class="w-1/5 pr-4">
|
|
|
|
|
|
<div class="bg-white rounded-md shadow-sm p-4 h-full">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
|
|
|
|
<h3 class="font-medium text-gray-700">组织架构</h3>
|
|
|
|
|
|
<div class="flex space-x-2">
|
|
|
|
|
|
<button class="text-gray-500 hover:text-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-expand text-sm"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button class="text-gray-500 hover:text-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-filter text-sm"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="space-y-1">
|
|
|
|
|
|
<div class="tree-node flex items-center py-1 px-2 rounded-button cursor-pointer">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-building text-gray-500 mr-2 text-sm"></i>
|
|
|
|
|
|
<span class="text-sm">集团公司</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pl-4">
|
|
|
|
|
|
<div class="tree-node flex items-center py-1 px-2 rounded-button cursor-pointer">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-building text-gray-500 mr-2 text-sm"></i>
|
|
|
|
|
|
<span class="text-sm">北京分公司</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pl-4">
|
|
|
|
|
|
<div class="tree-node flex items-center py-1 px-2 rounded-button cursor-pointer">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-users text-gray-500 mr-2 text-sm"></i>
|
|
|
|
|
|
<span class="text-sm">人力资源部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tree-node flex items-center py-1 px-2 rounded-button cursor-pointer">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chart-line text-gray-500 mr-2 text-sm"></i>
|
|
|
|
|
|
<span class="text-sm">财务部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tree-node flex items-center py-1 px-2 rounded-button cursor-pointer">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-laptop-code text-gray-500 mr-2 text-sm"></i>
|
|
|
|
|
|
<span class="text-sm">技术研发部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="tree-node flex items-center py-1 px-2 rounded-button cursor-pointer">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-building text-gray-500 mr-2 text-sm"></i>
|
|
|
|
|
|
<span class="text-sm">上海分公司</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pl-4">
|
|
|
|
|
|
<div class="tree-node flex items-center py-1 px-2 rounded-button cursor-pointer">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-users text-gray-500 mr-2 text-sm"></i>
|
|
|
|
|
|
<span class="text-sm">人力资源部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tree-node flex items-center py-1 px-2 rounded-button cursor-pointer">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-shopping-bag text-gray-500 mr-2 text-sm"></i>
|
|
|
|
|
|
<span class="text-sm">市场部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="tree-node flex items-center py-1 px-2 rounded-button cursor-pointer">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-building text-gray-500 mr-2 text-sm"></i>
|
|
|
|
|
|
<span class="text-sm">深圳分公司</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 右侧薪酬规则设置 -->
|
|
|
|
|
|
<div class="w-4/5">
|
|
|
|
|
|
<div class="bg-white rounded-md shadow-sm p-6">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-6">
|
|
|
|
|
|
<h2 class="text-xl font-semibold text-gray-800">薪酬计算规则设置</h2>
|
|
|
|
|
|
<div class="flex space-x-3">
|
|
|
|
|
|
<button class="bg-primary text-white text-sm px-4 py-2 rounded-button flex items-center space-x-2">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-save text-sm"></i>
|
|
|
|
|
|
<span>保存规则</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button class="bg-white border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-button flex items-center space-x-2">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-times text-sm"></i>
|
|
|
|
|
|
<span>取消</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="space-y-6">
|
|
|
|
|
|
<!-- 基本信息 -->
|
|
|
|
|
|
<div class="form-card bg-secondary rounded-md p-4">
|
|
|
|
|
|
<h3 class="font-medium text-gray-700 mb-3">基本信息</h3>
|
|
|
|
|
|
<div class="grid grid-cols-3 gap-4">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block text-sm text-gray-600 mb-1">规则名称</label>
|
|
|
|
|
|
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block text-sm text-gray-600 mb-1">适用组织</label>
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="集团公司/北京分公司" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block text-sm text-gray-600 mb-1">生效日期</label>
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="2023-07-01" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-calendar-days absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 薪酬项设置 -->
|
|
|
|
|
|
<div class="form-card bg-secondary rounded-md p-4">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-3">
|
|
|
|
|
|
<h3 class="font-medium text-gray-700">薪酬项设置</h3>
|
|
|
|
|
|
<button class="text-primary text-sm flex items-center space-x-1">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-plus text-sm"></i>
|
|
|
|
|
|
<span>添加薪酬项</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="overflow-x-auto">
|
|
|
|
|
|
<table class="w-full">
|
|
|
|
|
|
<thead>
|
|
|
|
|
|
<tr class="text-left text-sm text-gray-500 border-b border-gray-200">
|
|
|
|
|
|
<th class="pb-2">薪酬项名称</th>
|
|
|
|
|
|
<th class="pb-2">类型</th>
|
|
|
|
|
|
<th class="pb-2">计税方式</th>
|
|
|
|
|
|
<th class="pb-2">计算公式</th>
|
|
|
|
|
|
<th class="pb-2">操作</th>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody class="divide-y divide-gray-200">
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<input type="text" value="基本工资" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="固定工资" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="税前" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<input type="text" value="岗位工资基数 * 职级系数" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-64 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-trash text-sm"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<input type="text" value="绩效奖金" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="浮动工资" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="税前" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<input type="text" value="基本工资 * 绩效系数" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-64 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-trash text-sm"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<input type="text" value="交通补贴" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="补贴" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="税后" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<input type="text" value="固定金额 500" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-64 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-3">
|
|
|
|
|
|
<button class="text-red-500 hover:text-red-700">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-trash text-sm"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 社保公积金设置 -->
|
|
|
|
|
|
<div class="form-card bg-secondary rounded-md p-4">
|
|
|
|
|
|
<h3 class="font-medium text-gray-700 mb-3">社保公积金设置</h3>
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block text-sm text-gray-600 mb-1">社保缴纳基数</label>
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="员工基本工资" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block text-sm text-gray-600 mb-1">公积金缴纳基数</label>
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="员工基本工资" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
|
<label class="block text-sm text-gray-600 mb-2">缴纳比例</label>
|
|
|
|
|
|
<div class="overflow-x-auto">
|
|
|
|
|
|
<table class="w-full">
|
|
|
|
|
|
<thead>
|
|
|
|
|
|
<tr class="text-left text-sm text-gray-500 border-b border-gray-200">
|
|
|
|
|
|
<th class="pb-2">项目</th>
|
|
|
|
|
|
<th class="pb-2">单位比例</th>
|
|
|
|
|
|
<th class="pb-2">个人比例</th>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody class="divide-y divide-gray-200">
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="py-2">养老保险</td>
|
|
|
|
|
|
<td class="py-2">
|
|
|
|
|
|
<div class="relative w-24">
|
|
|
|
|
|
<input type="text" value="16%" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-full focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-2">
|
|
|
|
|
|
<div class="relative w-24">
|
|
|
|
|
|
<input type="text" value="8%" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-full focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="py-2">医疗保险</td>
|
|
|
|
|
|
<td class="py-2">
|
|
|
|
|
|
<div class="relative w-24">
|
|
|
|
|
|
<input type="text" value="9.5%" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-full focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-2">
|
|
|
|
|
|
<div class="relative w-24">
|
|
|
|
|
|
<input type="text" value="2%" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-full focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="py-2">失业保险</td>
|
|
|
|
|
|
<td class="py-2">
|
|
|
|
|
|
<div class="relative w-24">
|
|
|
|
|
|
<input type="text" value="0.5%" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-full focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-2">
|
|
|
|
|
|
<div class="relative w-24">
|
|
|
|
|
|
<input type="text" value="0.5%" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-full focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td class="py-2">公积金</td>
|
|
|
|
|
|
<td class="py-2">
|
|
|
|
|
|
<div class="relative w-24">
|
|
|
|
|
|
<input type="text" value="12%" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-full focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td class="py-2">
|
|
|
|
|
|
<div class="relative w-24">
|
|
|
|
|
|
<input type="text" value="12%" class="border border-gray-300 rounded-md px-2 py-1 text-sm w-full focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 个税设置 -->
|
|
|
|
|
|
<div class="form-card bg-secondary rounded-md p-4">
|
|
|
|
|
|
<h3 class="font-medium text-gray-700 mb-3">个人所得税设置</h3>
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block text-sm text-gray-600 mb-1">起征点</label>
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="5000" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block text-sm text-gray-600 mb-1">专项附加扣除</label>
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<input type="text" value="自动计算" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 底部通栏 -->
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8 mt-10">
|
|
|
|
|
|
<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">视频教程</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="fa-icon fa-solid fa-phone mr-2 text-sm"></i>
|
|
|
|
|
|
<span>400-888-8888</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="flex items-center">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-envelope mr-2 text-sm"></i>
|
|
|
|
|
|
<span>service@hrsystem.com</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="flex items-center">
|
|
|
|
|
|
<i class="fa-icon fa-solid fa-location-dot mr-2 text-sm"></i>
|
|
|
|
|
|
<span>北京市海淀区中关村软件园</span>
|
|
|
|
|
|
</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="fa-icon fa-brands fa-weixin text-sm"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
|
|
|
|
|
<i class="fa-icon fa-brands fa-weibo text-sm"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
|
|
|
|
|
<i class="fa-icon fa-brands fa-linkedin-in text-sm"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
