|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>人力资源管理系统</title>
|
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
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-pacifico {
|
|
|
|
|
|
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 15s linear infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes scroll {
|
|
|
|
|
|
0% { transform: translateX(0); }
|
|
|
|
|
|
100% { transform: translateX(-50%); }
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="min-h-[1024px] bg-secondary flex flex-col">
|
|
|
|
|
|
<!-- 顶部导航栏 -->
|
|
|
|
|
|
<!-- <header class="bg-primary text-white w-full h-16 shadow-md">
|
|
|
|
|
|
<div class="container mx-auto h-full px-6 flex items-center justify-between">
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
|
<h1 class="font-pacifico text-2xl mr-10">人力</h1>
|
|
|
|
|
|
<nav class="hidden md:flex space-x-8">
|
|
|
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">多维统计</a>
|
|
|
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">人员管理</a>
|
|
|
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">组织管理</a>
|
|
|
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">考勤管理</a>
|
|
|
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">绩效管理</a>
|
|
|
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">薪酬管理</a>
|
|
|
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">知识库</a>
|
|
|
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">后台管理</a>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-6">
|
|
|
|
|
|
<div class="relative hidden md:block">
|
|
|
|
|
|
<input type="text" placeholder="搜索..." class="bg-white text-gray-800 text-sm rounded-button pl-4 pr-10 py-2 w-48 focus:outline-none">
|
|
|
|
|
|
<i class="fas fa-search absolute right-3 top-2.5 text-gray-500 text-sm"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<button class="hidden md:flex items-center space-x-1 bg-blue-600 hover:bg-blue-700 text-white text-sm px-3 py-1.5 rounded-button transition">
|
|
|
|
|
|
<i class="fas fa-robot fa-icon w-4 h-4"></i>
|
|
|
|
|
|
<span>AI助手</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<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="fas fa-user text-primary"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="text-sm hidden md:block">张明远</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header> -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 主要内容区 -->
|
|
|
|
|
|
<main class="flex-1 container mx-auto px-6 py-8 flex">
|
|
|
|
|
|
<!-- 左侧组织架构树 -->
|
|
|
|
|
|
<div class="w-1/5 pr-6">
|
|
|
|
|
|
<div class="bg-white rounded-md shadow p-4 h-full">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
|
|
|
|
<h2 class="font-medium text-gray-800">组织架构</h2>
|
|
|
|
|
|
<button class="text-primary text-sm">
|
|
|
|
|
|
<i class="fas fa-sync-alt fa-icon w-4 h-4"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="space-y-1">
|
|
|
|
|
|
<div class="flex items-center justify-between py-1.5 px-2 bg-gray-100 rounded">
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
|
<i class="fas fa-building fa-icon w-4 h-4 mr-2 text-gray-600"></i>
|
|
|
|
|
|
<span class="text-sm">集团公司</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pl-6 space-y-1">
|
|
|
|
|
|
<div class="flex items-center justify-between py-1.5 px-2 hover:bg-gray-50 rounded">
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
|
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-600"></i>
|
|
|
|
|
|
<span class="text-sm">技术中心</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pl-6 space-y-1">
|
|
|
|
|
|
<div class="flex items-center py-1.5 px-2 hover:bg-gray-50 rounded">
|
|
|
|
|
|
<i class="fas fa-code-branch fa-icon w-4 h-4 mr-2 text-gray-600"></i>
|
|
|
|
|
|
<span class="text-sm">前端开发部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center py-1.5 px-2 hover:bg-gray-50 rounded">
|
|
|
|
|
|
<i class="fas fa-code-branch fa-icon w-4 h-4 mr-2 text-gray-600"></i>
|
|
|
|
|
|
<span class="text-sm">后端开发部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center py-1.5 px-2 hover:bg-gray-50 rounded">
|
|
|
|
|
|
<i class="fas fa-code-branch fa-icon w-4 h-4 mr-2 text-gray-600"></i>
|
|
|
|
|
|
<span class="text-sm">测试部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between py-1.5 px-2 hover:bg-gray-50 rounded">
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
|
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-600"></i>
|
|
|
|
|
|
<span class="text-sm">产品中心</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between py-1.5 px-2 hover:bg-gray-50 rounded">
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
|
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-600"></i>
|
|
|
|
|
|
<span class="text-sm">市场部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between py-1.5 px-2 hover:bg-gray-50 rounded">
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
|
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-600"></i>
|
|
|
|
|
|
<span class="text-sm">人力资源部</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-500"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 右侧审批详情 -->
|
|
|
|
|
|
<div class="w-4/5">
|
|
|
|
|
|
<div class="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>
|
|
|
|
|
|
<div class="flex space-x-3">
|
|
|
|
|
|
<button class="bg-primary hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-button transition">
|
|
|
|
|
|
<i class="fas fa-check fa-icon w-4 h-4 mr-1"></i>
|
|
|
|
|
|
<span>同意</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button class="bg-red-500 hover:bg-red-600 text-white text-sm px-4 py-2 rounded-button transition">
|
|
|
|
|
|
<i class="fas fa-times fa-icon w-4 h-4 mr-1"></i>
|
|
|
|
|
|
<span>拒绝</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button class="border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm px-4 py-2 rounded-button transition">
|
|
|
|
|
|
<i class="fas fa-print fa-icon w-4 h-4 mr-1"></i>
|
|
|
|
|
|
<span>打印</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 基本信息 -->
|
|
|
|
|
|
<div class="mb-8">
|
|
|
|
|
|
<h3 class="text-lg font-medium text-gray-800 mb-4 pb-2 border-b">基本信息</h3>
|
|
|
|
|
|
<div class="grid grid-cols-3 gap-6">
|
|
|
|
|
|
<div class="col-span-1">
|
|
|
|
|
|
<div class="flex flex-col items-center">
|
|
|
|
|
|
<div class="w-32 h-32 rounded-full bg-gray-200 mb-3 overflow-hidden">
|
|
|
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=professional20asian20businessman20portrait20with20white20background20high20quality20photo20realistic20detailed20face20corporate20style20neutral20expression&width=300&height=300&orientation=squarish&flag=4bef40f432379c943d4dcedd922e3bf6"
|
|
|
|
|
|
alt="员工照片" class="w-full h-full object-cover">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="text-sm text-gray-600">员工照片</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-span-2">
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-1">员工姓名</p>
|
|
|
|
|
|
<p class="text-gray-800 font-medium">林志强</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-1">员工编号</p>
|
|
|
|
|
|
<p class="text-gray-800 font-medium">EMP20230085</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-1">原部门</p>
|
|
|
|
|
|
<p class="text-gray-800 font-medium">前端开发部</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-1">新部门</p>
|
|
|
|
|
|
<p class="text-gray-800 font-medium">产品设计部</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-1">原岗位</p>
|
|
|
|
|
|
<p class="text-gray-800 font-medium">高级前端工程师</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-1">新岗位</p>
|
|
|
|
|
|
<p class="text-gray-800 font-medium">产品设计师</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-1">异动类型</p>
|
|
|
|
|
|
<p class="text-gray-800 font-medium">部门调动</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-1">异动时间</p>
|
|
|
|
|
|
<p class="text-gray-800 font-medium">2023-06-15</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-span-2">
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-1">异动原因</p>
|
|
|
|
|
|
<p class="text-gray-800 font-medium">根据公司人才发展规划，结合员工个人职业发展意愿，经双方协商一致，同意调动。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 证件信息 -->
|
|
|
|
|
|
<div class="mb-8">
|
|
|
|
|
|
<h3 class="text-lg font-medium text-gray-800 mb-4 pb-2 border-b">证件信息</h3>
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-6">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-2">身份证正面</p>
|
|
|
|
|
|
<div class="h-48 bg-gray-100 rounded-md overflow-hidden">
|
|
|
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=Chinese20ID20card20front20side20realistic20photo20white20background20high20resolution20detailed20text20and20portrait&width=600&height=400&orientation=landscape&flag=e6c18985431a6efddd63bff3f2e5a4e9"
|
|
|
|
|
|
alt="身份证正面" class="w-full h-full object-cover">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-sm text-gray-500 mb-2">身份证反面</p>
|
|
|
|
|
|
<div class="h-48 bg-gray-100 rounded-md overflow-hidden">
|
|
|
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=Chinese20ID20card20back20side20realistic20photo20white20background20high20resolution20detailed20text20and20barcode&width=600&height=400&orientation=landscape&flag=2737ba49402a36d436de3b0671643607"
|
|
|
|
|
|
alt="身份证反面" class="w-full h-full object-cover">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 审批流程 -->
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h3 class="text-lg font-medium text-gray-800 mb-4 pb-2 border-b">审批流程</h3>
|
|
|
|
|
|
<div class="relative">
|
|
|
|
|
|
<!-- 时间轴 -->
|
|
|
|
|
|
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-200"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 流程节点 -->
|
|
|
|
|
|
<div class="space-y-8">
|
|
|
|
|
|
<!-- 提交申请 -->
|
|
|
|
|
|
<div class="relative pl-16">
|
|
|
|
|
|
<div class="absolute left-0 top-0 w-16 flex justify-center">
|
|
|
|
|
|
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-green-50 rounded-md p-4">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
|
|
|
<h4 class="font-medium text-green-800">提交申请</h4>
|
|
|
|
|
|
<span class="text-sm text-green-600">2023-06-05 09:30</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-sm text-gray-700">申请人：林志强</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 部门经理审批 -->
|
|
|
|
|
|
<div class="relative pl-16">
|
|
|
|
|
|
<div class="absolute left-0 top-0 w-16 flex justify-center">
|
|
|
|
|
|
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-green-50 rounded-md p-4">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
|
|
|
<h4 class="font-medium text-green-800">部门经理审批</h4>
|
|
|
|
|
|
<span class="text-sm text-green-600">2023-06-05 14:15</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-sm text-gray-700">审批人：王建国（前端开发部经理）</p>
|
|
|
|
|
|
<p class="text-sm text-gray-700 mt-1">审批意见：同意调动，该员工在产品设计方面有潜力。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 技术总监审批 -->
|
|
|
|
|
|
<div class="relative pl-16">
|
|
|
|
|
|
<div class="absolute left-0 top-0 w-16 flex justify-center">
|
|
|
|
|
|
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-green-50 rounded-md p-4">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
|
|
|
<h4 class="font-medium text-green-800">技术总监审批</h4>
|
|
|
|
|
|
<span class="text-sm text-green-600">2023-06-06 10:45</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-sm text-gray-700">审批人：张伟（技术中心总监）</p>
|
|
|
|
|
|
<p class="text-sm text-gray-700 mt-1">审批意见：同意，符合技术人才发展规划。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- HR审批 -->
|
|
|
|
|
|
<div class="relative pl-16">
|
|
|
|
|
|
<div class="absolute left-0 top-0 w-16 flex justify-center">
|
|
|
|
|
|
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-green-50 rounded-md p-4">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
|
|
|
<h4 class="font-medium text-green-800">HR审批</h4>
|
|
|
|
|
|
<span class="text-sm text-green-600">2023-06-07 11:20</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-sm text-gray-700">审批人：李芳（人力资源部经理）</p>
|
|
|
|
|
|
<p class="text-sm text-gray-700 mt-1">审批意见：已核实相关情况，同意调动。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 总经理审批 -->
|
|
|
|
|
|
<div class="relative pl-16">
|
|
|
|
|
|
<div class="absolute left-0 top-0 w-16 flex justify-center">
|
|
|
|
|
|
<div class="w-4 h-4 rounded-full bg-green-500 border-4 border-green-100"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-green-50 rounded-md p-4">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
|
|
|
<h4 class="font-medium text-green-800">总经理审批</h4>
|
|
|
|
|
|
<span class="text-sm text-green-600">2023-06-08 16:30</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-sm text-gray-700">审批人：陈明（总经理）</p>
|
|
|
|
|
|
<p class="text-sm text-gray-700 mt-1">审批意见：同意执行。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 入职生效 -->
|
|
|
|
|
|
<div class="relative pl-16">
|
|
|
|
|
|
<div class="absolute left-0 top-0 w-16 flex justify-center">
|
|
|
|
|
|
<div class="w-4 h-4 rounded-full bg-blue-500 border-4 border-blue-100"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-blue-50 rounded-md p-4">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
|
|
|
<h4 class="font-medium text-blue-800">入职生效</h4>
|
|
|
|
|
|
<span class="text-sm text-blue-600">待处理</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-sm text-gray-700">计划生效日期：2023-06-15</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 审批完结 -->
|
|
|
|
|
|
<div class="relative pl-16">
|
|
|
|
|
|
<div class="absolute left-0 top-0 w-16 flex justify-center">
|
|
|
|
|
|
<div class="w-4 h-4 rounded-full bg-gray-300 border-4 border-gray-100"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
|
|
|
<h4 class="font-medium text-gray-800">审批完结</h4>
|
|
|
|
|
|
<span class="text-sm text-gray-500">未开始</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 底部通栏 -->
|
|
|
|
|
|
<footer class="bg-gray-800 text-white w-full py-8">
|
|
|
|
|
|
<div class="container mx-auto px-6">
|
|
|
|
|
|
<div class="grid grid-cols-4 gap-8">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h3 class="text-sm font-medium mb-4">关于我们</h3>
|
|
|
|
|
|
<ul class="space-y-2">
|
|
|
|
|
|
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">公司简介</a></li>
|
|
|
|
|
|
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">发展历程</a></li>
|
|
|
|
|
|
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">企业文化</a></li>
|
|
|
|
|
|
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">管理团队</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h3 class="text-sm font-medium mb-4">产品服务</h3>
|
|
|
|
|
|
<ul class="space-y-2">
|
|
|
|
|
|
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">人力资源系统</a></li>
|
|
|
|
|
|
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">薪酬管理系统</a></li>
|
|
|
|
|
|
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">绩效考核系统</a></li>
|
|
|
|
|
|
<li><a href="#" class="text-xs text-gray-400 hover:text-white transition">培训发展平台</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h3 class="text-sm font-medium mb-4">联系我们</h3>
|
|
|
|
|
|
<ul class="space-y-2">
|
|
|
|
|
|
<li class="text-xs text-gray-400">电话：400-888-8888</li>
|
|
|
|
|
|
<li class="text-xs text-gray-400">邮箱：service@hrsystem.com</li>
|
|
|
|
|
|
<li class="text-xs text-gray-400">地址：北京市海淀区科技园路88号</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h3 class="text-sm font-medium mb-4">关注我们</h3>
|
|
|
|
|
|
<div class="flex space-x-4">
|
|
|
|
|
|
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition">
|
|
|
|
|
|
<i class="fab fa-weixin fa-icon w-4 h-4"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition">
|
|
|
|
|
|
<i class="fab fa-weibo fa-icon w-4 h-4"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition">
|
|
|
|
|
|
<i class="fab fa-linkedin-in fa-icon w-4 h-4"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center">
|
|
|
|
|
|
<p class="text-xs text-gray-500">© 2023 人力资源管理系统 版权所有 京ICP备12345678号</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
