|
|
<!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;
|
|
|
}
|
|
|
.fa-icon {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.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%); }
|
|
|
}
|
|
|
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;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="bg-secondary flex flex-col min-h-screen">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<header class="bg-primary text-white shadow-md">
|
|
|
<div class="container mx-auto px-6 py-3 flex items-center justify-between">
|
|
|
<!-- Logo -->
|
|
|
<div class="flex items-center">
|
|
|
<span class="font-['Pacifico'] text-xl mr-10">人力</span>
|
|
|
|
|
|
<!-- 导航菜单 -->
|
|
|
<nav class="hidden md:flex space-x-6 text-sm">
|
|
|
<a href="#" class="hover:text-gray-200 transition">多维统计</a>
|
|
|
<a href="#" class="hover:text-gray-200 transition">人员管理</a>
|
|
|
<a href="#" class="hover:text-gray-200 transition">组织管理</a>
|
|
|
<a href="#" class="hover:text-gray-200 transition">考勤管理</a>
|
|
|
<a href="#" class="hover:text-gray-200 transition">绩效管理</a>
|
|
|
<a href="#" class="hover:text-gray-200 transition">薪酬管理</a>
|
|
|
<a href="#" class="hover:text-gray-200 transition">知识库</a>
|
|
|
<a href="#" class="hover:text-gray-200 transition">后台管理</a>
|
|
|
</nav>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧功能区 -->
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<!-- 搜索框 -->
|
|
|
<div class="relative hidden md:block">
|
|
|
<input type="text" placeholder="搜索..." class="bg-white text-gray-800 rounded-button pl-8 pr-4 py-1 text-sm w-48 focus:outline-none focus:ring-2 focus:ring-blue-300">
|
|
|
<i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
|
|
|
<!-- AI助手 -->
|
|
|
<button class="bg-blue-400 hover:bg-blue-500 text-white rounded-button px-3 py-1 text-sm flex items-center whitespace-nowrap">
|
|
|
<i class="fas fa-robot mr-1 fa-icon w-4 h-4"></i>
|
|
|
AI助手
|
|
|
</button>
|
|
|
|
|
|
<!-- 用户头像 -->
|
|
|
<div class="relative">
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=professional+asian+business+man+portrait+with+white+background&width=40&height=40&orientation=portrait&flag=c3384d61361d70a4af4b1ace2fce914a"
|
|
|
alt="用户头像"
|
|
|
class="w-8 h-8 rounded-full object-cover cursor-pointer">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<!-- 公告栏 -->
|
|
|
<div class="bg-yellow-50 text-yellow-800 py-2 px-6 text-sm">
|
|
|
<div class="container mx-auto flex items-center">
|
|
|
<i class="fas fa-bullhorn mr-2 text-yellow-600 fa-icon w-4 h-4"></i>
|
|
|
<div class="scroll-container w-full">
|
|
|
<div class="scroll-content">
|
|
|
<span class="mr-8">系统将于今晚 23:00 至次日 02:00 进行维护升级</span>
|
|
|
<span class="mr-8">2023年度员工满意度调查问卷已发布，请及时填写</span>
|
|
|
<span class="mr-8">关于2024年春节放假安排的通知已发布</span>
|
|
|
<span class="mr-8">新员工入职培训将于下周一上午9:00在3楼会议室举行</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 主体内容 -->
|
|
|
<main class="flex-grow container mx-auto px-6 py-6">
|
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
|
<!-- 左侧组织架构树 -->
|
|
|
<div class="w-full md:w-1/5 bg-white rounded-md shadow p-4">
|
|
|
<h2 class="text-lg font-semibold mb-4 text-gray-800">组织架构</h2>
|
|
|
<div class="space-y-2">
|
|
|
<div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 p-2 rounded">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-building mr-2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
|
<span>集团公司</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
|
|
|
<div class="ml-6 space-y-2">
|
|
|
<div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 p-2 rounded">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
|
<span>技术中心</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
|
|
|
<div class="ml-6 space-y-2">
|
|
|
<div class="flex items-center cursor-pointer hover:bg-gray-50 p-2 rounded">
|
|
|
<i class="fas fa-users mr-2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
|
<span>前端开发部</span>
|
|
|
</div>
|
|
|
<div class="flex items-center cursor-pointer hover:bg-gray-50 p-2 rounded">
|
|
|
<i class="fas fa-users mr-2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
|
<span>后端开发部</span>
|
|
|
</div>
|
|
|
<div class="flex items-center cursor-pointer hover:bg-gray-50 p-2 rounded">
|
|
|
<i class="fas fa-users mr-2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
|
<span>测试部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 p-2 rounded">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
|
<span>产品中心</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 p-2 rounded">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
|
<span>市场部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 p-2 rounded">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
|
<span>人力资源部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 p-2 rounded">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap mr-2 text-gray-500 fa-icon w-4 h-4"></i>
|
|
|
<span>财务部</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down text-gray-400 fa-icon w-3 h-3"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧审批详情 -->
|
|
|
<div class="w-full md:w-4/5 space-y-6">
|
|
|
<!-- 基本信息卡片 -->
|
|
|
<div class="bg-white rounded-md shadow p-6">
|
|
|
<div class="flex justify-between items-start 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 rounded-button px-4 py-1 text-sm flex items-center whitespace-nowrap">
|
|
|
<i class="fas fa-check mr-1 fa-icon w-4 h-4"></i>
|
|
|
通过
|
|
|
</button>
|
|
|
<button class="bg-red-500 hover:bg-red-600 text-white rounded-button px-4 py-1 text-sm flex items-center whitespace-nowrap">
|
|
|
<i class="fas fa-times mr-1 fa-icon w-4 h-4"></i>
|
|
|
拒绝
|
|
|
</button>
|
|
|
<button class="border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-button px-4 py-1 text-sm flex items-center whitespace-nowrap">
|
|
|
<i class="fas fa-print mr-1 fa-icon w-4 h-4"></i>
|
|
|
打印
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
|
|
<!-- 申请人照片 -->
|
|
|
<div class="col-span-1">
|
|
|
<div class="border border-gray-200 rounded-md p-2">
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=professional+asian+woman+portrait+with+white+background&width=300&height=400&orientation=portrait&flag=e2879a3072d5b6c4e667ed194ee97198"
|
|
|
alt="申请人照片"
|
|
|
class="w-full h-auto rounded-md">
|
|
|
<p class="text-center text-sm text-gray-600 mt-2">申请人照片</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 身份证照片 -->
|
|
|
<div class="col-span-1">
|
|
|
<div class="border border-gray-200 rounded-md p-2">
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=chinese+id+card+front+and+back+on+white+background&width=300&height=200&orientation=landscape&flag=814a4ec5adb146a60ec2bd2cfc924f4f"
|
|
|
alt="身份证照片"
|
|
|
class="w-full h-auto rounded-md">
|
|
|
<p class="text-center text-sm text-gray-600 mt-2">身份证正反面</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 基本信息 -->
|
|
|
<div class="col-span-1">
|
|
|
<div class="space-y-3">
|
|
|
<div class="flex justify-between">
|
|
|
<span class="text-gray-600">申请人姓名：</span>
|
|
|
<span class="font-medium">林晓梅</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="text-gray-600">性别：</span>
|
|
|
<span class="font-medium">女</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="text-gray-600">年龄：</span>
|
|
|
<span class="font-medium">28</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="text-gray-600">联系电话：</span>
|
|
|
<span class="font-medium">138****5678</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="text-gray-600">申请部门：</span>
|
|
|
<span class="font-medium">产品中心 - 用户体验部</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="text-gray-600">职位：</span>
|
|
|
<span class="font-medium">高级产品经理</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="text-gray-600">入职日期：</span>
|
|
|
<span class="font-medium">2023-11-15</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="text-gray-600">薪资待遇：</span>
|
|
|
<span class="font-medium">¥18,000/月</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="text-gray-600">审批状态：</span>
|
|
|
<span class="font-medium text-primary">审批中</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 教育和工作经历 -->
|
|
|
<div class="mb-6">
|
|
|
<h3 class="text-lg font-medium text-gray-800 mb-3">教育背景</h3>
|
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
|
<div class="flex justify-between mb-2">
|
|
|
<span class="font-medium">2014.09 - 2018.06</span>
|
|
|
<span class="font-medium">北京大学</span>
|
|
|
<span>信息管理与信息系统</span>
|
|
|
<span>本科</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="font-medium">2018.09 - 2021.06</span>
|
|
|
<span class="font-medium">清华大学</span>
|
|
|
<span>工商管理</span>
|
|
|
<span>硕士</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<h3 class="text-lg font-medium text-gray-800 mb-3">工作经历</h3>
|
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
|
<div class="flex justify-between mb-2">
|
|
|
<span class="font-medium">2021.07 - 2023.04</span>
|
|
|
<span class="font-medium">字节跳动</span>
|
|
|
<span>产品经理</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between">
|
|
|
<span class="font-medium">2023.05 - 2023.10</span>
|
|
|
<span class="font-medium">腾讯科技</span>
|
|
|
<span>高级产品经理</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 审批流程 -->
|
|
|
<div class="bg-white rounded-md shadow p-6">
|
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-6">审批流程</h2>
|
|
|
|
|
|
<div class="relative">
|
|
|
<!-- 时间轴 -->
|
|
|
<div class="absolute left-4 h-full w-0.5 bg-gray-200 top-0"></div>
|
|
|
|
|
|
<!-- 流程步骤 -->
|
|
|
<div class="space-y-8">
|
|
|
<!-- 步骤1 -->
|
|
|
<div class="relative pl-12">
|
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
|
|
|
<i class="fas fa-check fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
<h3 class="font-medium">提交申请</h3>
|
|
|
<span class="text-sm text-gray-500">2023-10-20 09:30</span>
|
|
|
</div>
|
|
|
<p class="text-gray-600 text-sm">申请人林晓梅提交了入职申请</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 步骤2 -->
|
|
|
<div class="relative pl-12">
|
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
|
|
|
<i class="fas fa-check fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
<h3 class="font-medium">部门初审</h3>
|
|
|
<span class="text-sm text-gray-500">2023-10-21 14:15</span>
|
|
|
</div>
|
|
|
<p class="text-gray-600 text-sm">部门经理张伟审核通过</p>
|
|
|
<div class="mt-2 text-sm bg-blue-50 text-blue-700 p-2 rounded">
|
|
|
<p>意见：候选人专业背景和工作经验符合岗位要求，建议录用</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 步骤3 -->
|
|
|
<div class="relative pl-12">
|
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
|
|
|
<i class="fas fa-check fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
<h3 class="font-medium">部门复审</h3>
|
|
|
<span class="text-sm text-gray-500">2023-10-23 10:45</span>
|
|
|
</div>
|
|
|
<p class="text-gray-600 text-sm">产品总监李强审核通过</p>
|
|
|
<div class="mt-2 text-sm bg-blue-50 text-blue-700 p-2 rounded">
|
|
|
<p>意见：面试表现优秀，专业能力突出，同意录用</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 步骤4 -->
|
|
|
<div class="relative pl-12">
|
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
|
|
|
<i class="fas fa-check fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
<h3 class="font-medium">HR审核</h3>
|
|
|
<span class="text-sm text-gray-500">2023-10-25 16:20</span>
|
|
|
</div>
|
|
|
<p class="text-gray-600 text-sm">HRBP王芳审核通过</p>
|
|
|
<div class="mt-2 text-sm bg-blue-50 text-blue-700 p-2 rounded">
|
|
|
<p>意见：背景调查无异常，薪资符合公司标准，同意录用</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 步骤5 -->
|
|
|
<div class="relative pl-12">
|
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-yellow-400 flex items-center justify-center text-white">
|
|
|
<i class="fas fa-spinner fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
<h3 class="font-medium">总经理审批</h3>
|
|
|
<span class="text-sm text-gray-500">待审批</span>
|
|
|
</div>
|
|
|
<p class="text-gray-600 text-sm">等待总经理赵明审批</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 步骤6 -->
|
|
|
<div class="relative pl-12">
|
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-white">
|
|
|
<i class="fas fa-ellipsis-h fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 rounded-md p-4 opacity-70">
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
<h3 class="font-medium">入职生效</h3>
|
|
|
<span class="text-sm text-gray-500">待处理</span>
|
|
|
</div>
|
|
|
<p class="text-gray-600 text-sm">审批通过后自动生效</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 步骤7 -->
|
|
|
<div class="relative pl-12">
|
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-white">
|
|
|
<i class="fas fa-ellipsis-h fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
<div class="bg-gray-50 rounded-md p-4 opacity-70">
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
|
<h3 class="font-medium">审批完结</h3>
|
|
|
<span class="text-sm text-gray-500">待处理</span>
|
|
|
</div>
|
|
|
<p class="text-gray-600 text-sm">流程自动归档</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<!-- 页脚 -->
|
|
|
<footer class="bg-gray-800 text-white py-8">
|
|
|
<div class="container mx-auto px-6">
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
|
<div>
|
|
|
<h3 class="text-lg font-medium mb-4">关于我们</h3>
|
|
|
<ul class="space-y-2 text-sm text-gray-300">
|
|
|
<li><a href="#" class="hover:text-white transition">公司简介</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">发展历程</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">企业文化</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">荣誉资质</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<h3 class="text-lg font-medium mb-4">产品服务</h3>
|
|
|
<ul class="space-y-2 text-sm text-gray-300">
|
|
|
<li><a href="#" class="hover:text-white transition">人力资源系统</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">考勤管理系统</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">绩效管理系统</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">薪酬管理系统</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<h3 class="text-lg font-medium mb-4">帮助中心</h3>
|
|
|
<ul class="space-y-2 text-sm text-gray-300">
|
|
|
<li><a href="#" class="hover:text-white transition">使用文档</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">常见问题</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">视频教程</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">在线客服</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<h3 class="text-lg font-medium mb-4">联系我们</h3>
|
|
|
<ul class="space-y-2 text-sm text-gray-300">
|
|
|
<li class="flex items-start">
|
|
|
<i class="fas fa-map-marker-alt mr-2 mt-1 fa-icon w-4 h-4"></i>
|
|
|
<span>北京市海淀区中关村软件园12号楼</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-phone-alt mr-2 fa-icon w-4 h-4"></i>
|
|
|
<span>400-888-8888</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-envelope mr-2 fa-icon w-4 h-4"></i>
|
|
|
<span>hr@company.com</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-sm text-gray-400 flex flex-col md:flex-row justify-between items-center">
|
|
|
<div class="mb-4 md:mb-0">
|
|
|
<span>© 2023 人力资源管理系统 版权所有</span>
|
|
|
<span class="mx-2">|</span>
|
|
|
<a href="#" class="hover:text-white transition">隐私政策</a>
|
|
|
<span class="mx-2">|</span>
|
|
|
<a href="#" class="hover:text-white transition">服务条款</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex space-x-4">
|
|
|
<a href="#" class="hover:text-white transition">
|
|
|
<i class="fab fa-weixin fa-icon w-5 h-5"></i>
|
|
|
</a>
|
|
|
<a href="#" class="hover:text-white transition">
|
|
|
<i class="fab fa-weibo fa-icon w-5 h-5"></i>
|
|
|
</a>
|
|
|
<a href="#" class="hover:text-white transition">
|
|
|
<i class="fab fa-linkedin-in fa-icon w-5 h-5"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html>
|
