You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
10 KiB
HTML
216 lines
10 KiB
HTML
<!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> |