61698639ef
主要更新： - ✅ 完成主题配色从暗色到亮蓝白配色的全面转换 - ✅ 实现高薪岗位页面及后端API集成 - ✅ 完成登录注册页面及认证系统 - ✅ 实现预招录确认功能 - ✅ 添加数据库管理和维护工具脚本 - ✅ 优化错误处理和用户体验 核心功能： 1. 首页 (index.html) - 3D地球、专业分类、过渡岗位 2. 高薪岗位页面 (high.html) - 岗位详情、预招录确认、成功案例 3. 登录注册 (auth.html) - 用户认证、专业分类选择 4. 后端API - RESTful接口，JWT认证，MySQL数据库 技术栈： - 前端：Three.js, GSAP, 原生JavaScript - 后端：Node.js, Express, MySQL - 认证：JWT, bcrypt - 样式：自定义CSS，响应式设计 数据库工具： - kill-by-ids.js - 批量终止MySQL进程 - unlock-all-tables.js - 解锁数据库表 - init-db.js - 初始化数据库 - 其他管理脚本 🤖 Generated with Claude Code Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
387 lines
16 KiB
HTML
387 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>大专生就业服务平台 - 登录/注册</title>
|
|
<style>
|
|
/* --- 1. 全局与背景 --- */
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700&display=swap');
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background-color: #f8fafc;
|
|
background-image:
|
|
radial-gradient(ellipse at 50% 30%, rgba(224, 242, 254, 0.8) 0%, rgba(148, 163, 184, 0.2) 50%, transparent 80%),
|
|
radial-gradient(circle at center, #e0f2fe 0%, #f8fafc 100%);
|
|
font-family: 'Noto Sans SC', sans-serif;
|
|
color: #0f172a;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bg-glow {
|
|
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
|
width: 100vw; height: 100vw;
|
|
background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 60%);
|
|
filter: blur(100px); z-index: -1; pointer-events: none;
|
|
}
|
|
|
|
/* --- 2. 主容器 --- */
|
|
.auth-container {
|
|
position: relative;
|
|
width: 400px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(37, 99, 235, 0.2);
|
|
border-radius: 24px;
|
|
padding: 40px;
|
|
box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.15);
|
|
overflow: visible; /* 修改：允许自定义下拉框溢出容器 */
|
|
transition: height 0.4s ease;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center; font-size: 28px; margin-bottom: 8px; font-weight: 700;
|
|
background: linear-gradient(90deg, #1e40af, #3b82f6, #60a5fa);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center; font-size: 14px; color: #64748b;
|
|
margin-bottom: 32px; letter-spacing: 1px;
|
|
}
|
|
|
|
/* --- 3. 输入框基础样式 --- */
|
|
.input-group { position: relative; margin-bottom: 20px; }
|
|
|
|
.input-field {
|
|
width: 100%; padding: 12px 16px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border: 1px solid rgba(100, 116, 139, 0.2);
|
|
border-radius: 12px;
|
|
color: #0f172a; font-size: 15px; outline: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.input-field:focus {
|
|
border-color: #2563eb;
|
|
background: rgba(255, 255, 255, 1);
|
|
box-shadow: 0 0 15px rgba(37, 99, 235, 0.2);
|
|
}
|
|
|
|
.input-field::placeholder { color: #94a3b8; }
|
|
|
|
/* =========================================
|
|
--- 自定义下拉框 (Custom Select) 核心样式 ---
|
|
========================================= */
|
|
/* 隐藏原生 select */
|
|
select.input-field.hidden-native {
|
|
display: none !important;
|
|
}
|
|
|
|
.custom-select-container {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 模拟的输入框触发器 */
|
|
.custom-select-trigger {
|
|
/* 继承 input-field 的样式 */
|
|
width: 100%; padding: 12px 16px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border: 1px solid rgba(100, 116, 139, 0.2);
|
|
border-radius: 12px;
|
|
color: #94a3b8; /* 默认占位符颜色 */
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
transition: all 0.3s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
/* 选中后的文字颜色变深 */
|
|
.custom-select-trigger.has-value {
|
|
color: #0f172a;
|
|
}
|
|
|
|
.custom-select-trigger.active {
|
|
border-color: #2563eb;
|
|
background: rgba(255, 255, 255, 1);
|
|
box-shadow: 0 0 15px rgba(37, 99, 235, 0.2);
|
|
}
|
|
|
|
/* 下拉箭头图标 */
|
|
.custom-select-trigger::after {
|
|
content: ''; width: 8px; height: 8px;
|
|
border-right: 2px solid #2563eb;
|
|
border-bottom: 2px solid #2563eb;
|
|
transform: rotate(45deg);
|
|
transition: transform 0.3s;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.custom-select-trigger.active::after {
|
|
transform: rotate(-135deg);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 下拉选项列表 */
|
|
.custom-options {
|
|
position: absolute;
|
|
top: 100%; left: 0; right: 0;
|
|
margin-top: 8px;
|
|
background: #ffffff; /* 白色背景 */
|
|
border: 1px solid rgba(37, 99, 235, 0.3);
|
|
border-radius: 12px;
|
|
z-index: 100;
|
|
/* 关键：限制高度，启用滚动，防止全屏 */
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
opacity: 0; visibility: hidden;
|
|
transform: translateY(-10px);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
|
|
}
|
|
|
|
/* 滚动条美化 */
|
|
.custom-options::-webkit-scrollbar { width: 4px; }
|
|
.custom-options::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-options::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.3); border-radius: 2px; }
|
|
|
|
.custom-options.open {
|
|
opacity: 1; visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.custom-option {
|
|
padding: 12px 16px;
|
|
color: #475569;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
border-bottom: 1px solid rgba(100, 116, 139, 0.1);
|
|
}
|
|
|
|
.custom-option:last-child { border-bottom: none; }
|
|
|
|
.custom-option:hover, .custom-option.selected {
|
|
background: rgba(37, 99, 235, 0.1);
|
|
color: #2563eb;
|
|
}
|
|
|
|
/* --- 4. 按钮与链接 --- */
|
|
.btn-submit {
|
|
width: 100%; padding: 14px;
|
|
background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
|
|
border: none; border-radius: 12px; color: white;
|
|
font-size: 16px; font-weight: 600; cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative; overflow: hidden; margin-top: 10px;
|
|
}
|
|
.btn-submit:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
|
|
filter: brightness(1.1);
|
|
}
|
|
.btn-submit:active { transform: translateY(0); }
|
|
|
|
.switch-text { text-align: center; margin-top: 24px; font-size: 14px; color: #64748b; }
|
|
.switch-link { color: #2563eb; text-decoration: none; font-weight: 500; margin-left: 5px; cursor: pointer; transition: color 0.3s; }
|
|
.switch-link:hover { color: #3b82f6; text-decoration: underline; }
|
|
|
|
.msg-container { font-size: 13px; margin-top: 10px; text-align: center; min-height: 20px; }
|
|
.error-text { color: #f87171; }
|
|
.success-text { color: #4ade80; }
|
|
|
|
/* --- 5. 切换动画 --- */
|
|
.form-section { opacity: 1; transition: opacity 0.4s ease, transform 0.4s ease; }
|
|
.hidden { display: none; opacity: 0; transform: translateX(20px); }
|
|
.fade-in { animation: fadeIn 0.5s forwards; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
/* --- 6. 移动端适配 --- */
|
|
@media screen and (max-width: 768px) {
|
|
body {
|
|
overflow-y: auto;
|
|
min-height: -webkit-fill-available;
|
|
align-items: flex-start; /* 移动端靠上对齐，防止键盘遮挡 */
|
|
padding: 40px 0;
|
|
}
|
|
.auth-container {
|
|
width: 90%; max-width: 400px;
|
|
padding: 30px 20px; margin: 0 auto;
|
|
}
|
|
h2 { font-size: 24px; }
|
|
.subtitle { margin-bottom: 24px; }
|
|
.input-group { margin-bottom: 16px; }
|
|
.input-field { font-size: 16px; padding: 14px 16px; }
|
|
/* 移动端下拉框最大高度稍微减小，确保不溢出 */
|
|
.custom-options { max-height: 200px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg-glow"></div>
|
|
|
|
<div class="auth-container">
|
|
|
|
<div id="login-form-container" class="form-section">
|
|
<h2>欢迎回来</h2>
|
|
<p class="subtitle">登录就业服务平台</p>
|
|
<form onsubmit="event.preventDefault(); handleLogin();">
|
|
<div class="input-group">
|
|
<input type="text" id="login-username" class="input-field" placeholder="用户名/学号" required>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="password" id="login-password" class="input-field" placeholder="密码" required>
|
|
</div>
|
|
<div id="login-error-msg" class="msg-container error-text"></div>
|
|
<button type="submit" id="login-submit-btn" class="btn-submit">立即登录</button>
|
|
</form>
|
|
<div class="switch-text">
|
|
还没有账号？<span id="switch-to-register" class="switch-link">去注册</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="register-form-container" class="form-section hidden">
|
|
<h2>创建账号</h2>
|
|
<p class="subtitle">开启你的职业生涯</p>
|
|
<form onsubmit="event.preventDefault(); handleRegister();">
|
|
<div class="input-group">
|
|
<input type="text" id="register-username" class="input-field" placeholder="真实姓名" required>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="password" id="register-password" class="input-field" placeholder="设置密码" required>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="password" id="register-password-confirm" class="input-field" placeholder="确认密码" required>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="email" id="register-email" class="input-field" placeholder="电子邮箱 (可选)">
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="tel" id="register-phone" class="input-field" placeholder="手机号码" required>
|
|
</div>
|
|
|
|
<div class="input-group" id="professional-category-wrapper">
|
|
<select id="register-professional-category" class="input-field">
|
|
<option value="">请选择专业大类（可选）</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="register-error-msg" class="msg-container error-text"></div>
|
|
<div id="register-success-msg" class="msg-container success-text"></div>
|
|
<button type="submit" id="register-submit-btn" class="btn-submit">注册账号</button>
|
|
</form>
|
|
<div class="switch-text">
|
|
已有账号？<span id="switch-to-login" class="switch-link">直接登录</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="js/auth.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const originalSelect = document.getElementById('register-professional-category');
|
|
if (!originalSelect) return;
|
|
|
|
// 1. 隐藏原生 Select
|
|
originalSelect.classList.add('hidden-native');
|
|
|
|
// 2. 创建自定义 DOM 结构
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'custom-select-container';
|
|
|
|
const trigger = document.createElement('div');
|
|
trigger.className = 'custom-select-trigger';
|
|
// 初始化显示文本
|
|
trigger.textContent = originalSelect.options[originalSelect.selectedIndex]?.text || '请选择专业大类（可选）';
|
|
|
|
const optionsList = document.createElement('div');
|
|
optionsList.className = 'custom-options';
|
|
|
|
wrapper.appendChild(trigger);
|
|
wrapper.appendChild(optionsList);
|
|
|
|
// 将自定义结构插入到原生 Select 后面
|
|
originalSelect.parentNode.insertBefore(wrapper, originalSelect.nextSibling);
|
|
|
|
// 3. 渲染选项列表的函数
|
|
function renderOptions() {
|
|
optionsList.innerHTML = '';
|
|
Array.from(originalSelect.options).forEach(opt => {
|
|
const optionDiv = document.createElement('div');
|
|
optionDiv.className = 'custom-option';
|
|
if (opt.selected) optionDiv.classList.add('selected');
|
|
optionDiv.textContent = opt.text;
|
|
optionDiv.dataset.value = opt.value;
|
|
|
|
optionDiv.addEventListener('click', function() {
|
|
// 更新原生 Select 的值
|
|
originalSelect.value = this.dataset.value;
|
|
// 触发 change 事件，保证原有业务逻辑感知到变化
|
|
const event = new Event('change', { bubbles: true });
|
|
originalSelect.dispatchEvent(event);
|
|
|
|
// 更新 UI
|
|
trigger.textContent = this.textContent;
|
|
trigger.classList.add('has-value'); // 变亮色
|
|
optionsList.classList.remove('open');
|
|
trigger.classList.remove('active');
|
|
|
|
// 更新选中样式
|
|
wrapper.querySelectorAll('.custom-option').forEach(el => el.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
});
|
|
|
|
optionsList.appendChild(optionDiv);
|
|
});
|
|
}
|
|
|
|
// 初次渲染
|
|
renderOptions();
|
|
|
|
// 4. 绑定交互事件
|
|
trigger.addEventListener('click', function(e) {
|
|
e.stopPropagation(); // 防止冒泡
|
|
// 关闭其他打开的下拉框（如果有多个）
|
|
document.querySelectorAll('.custom-options.open').forEach(el => {
|
|
if (el !== optionsList) el.classList.remove('open');
|
|
});
|
|
optionsList.classList.toggle('open');
|
|
trigger.classList.toggle('active');
|
|
});
|
|
|
|
// 点击外部关闭
|
|
document.addEventListener('click', function(e) {
|
|
if (!wrapper.contains(e.target)) {
|
|
optionsList.classList.remove('open');
|
|
trigger.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// 5. [关键] 使用 MutationObserver 监听原生 Select 的变化
|
|
// 当 auth.js 异步加载完数据并插入 option 时，这里会自动更新自定义列表
|
|
const observer = new MutationObserver(function(mutations) {
|
|
renderOptions();
|
|
// 如果当前没有选中值，重置显示文本
|
|
if (!originalSelect.value) {
|
|
trigger.textContent = originalSelect.options[0]?.text || '请选择专业大类（可选）';
|
|
trigger.classList.remove('has-value');
|
|
}
|
|
});
|
|
|
|
observer.observe(originalSelect, { childList: true, subtree: true });
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |