|
|
@@ -0,0 +1,1934 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>智能招聘系统</title>
|
|
|
+ <!-- 国内CDN引入 -->
|
|
|
+ <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
+ <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
|
|
|
+ <style>
|
|
|
+ :root {
|
|
|
+ --primary: #2563eb;
|
|
|
+ --secondary: #f59e0b;
|
|
|
+ --dark: #1e293b;
|
|
|
+ --light: #f8fafc;
|
|
|
+ --success: #10b981;
|
|
|
+ --danger: #ef4444;
|
|
|
+ --warning: #f97316;
|
|
|
+ }
|
|
|
+
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background-color: #f1f5f9;
|
|
|
+ color: var(--dark);
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 登录页面样式 */
|
|
|
+ .login-container {
|
|
|
+ display: flex;
|
|
|
+ min-height: 100vh;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-box {
|
|
|
+ width: 400px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 40px;
|
|
|
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-logo {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--primary);
|
|
|
+ margin-bottom: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-tabs {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-tab {
|
|
|
+ flex: 1;
|
|
|
+ padding: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-tab.active {
|
|
|
+ color: var(--primary);
|
|
|
+ border-bottom: 2px solid var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-form {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-form.active {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-group {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-group label {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-control {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px 16px;
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-control:focus {
|
|
|
+ border-color: var(--primary);
|
|
|
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: var(--primary);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary:hover {
|
|
|
+ background: #1d4ed8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-links {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-link {
|
|
|
+ color: var(--primary);
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 主界面样式 */
|
|
|
+ .container {
|
|
|
+ display: flex;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 20px;
|
|
|
+ gap: 20px;
|
|
|
+ max-width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 左侧导航 */
|
|
|
+ .sidebar {
|
|
|
+ width: 240px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px;
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--primary);
|
|
|
+ margin-bottom: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-menu {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item {
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item:hover {
|
|
|
+ background-color: #f1f5f9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item.active {
|
|
|
+ background-color: #eff6ff;
|
|
|
+ color: var(--primary);
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item i {
|
|
|
+ width: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 主内容区 */
|
|
|
+ .main-content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部信息栏 */
|
|
|
+ .header {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 18px 24px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #e0f2fe;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--primary);
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-dropdown {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-menu {
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ right: 0;
|
|
|
+ width: 200px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ padding: 10px 0;
|
|
|
+ z-index: 100;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-item {
|
|
|
+ padding: 10px 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-item:hover {
|
|
|
+ background: #f1f5f9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-divider {
|
|
|
+ height: 1px;
|
|
|
+ background: #e2e8f0;
|
|
|
+ margin: 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 搜索栏 */
|
|
|
+ .search-bar {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-input {
|
|
|
+ flex: 1;
|
|
|
+ padding: 10px 16px;
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ padding: 10px 16px;
|
|
|
+ background: var(--primary);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 内容区域样式 */
|
|
|
+ .content-area {
|
|
|
+ flex: 1;
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 24px;
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ color: var(--primary);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 工作/简历卡片样式 */
|
|
|
+ .card-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
|
+ gap: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ transition: all 0.2s;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card:hover {
|
|
|
+ transform: translateY(-4px);
|
|
|
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-avatar {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #e0f2fe;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--primary);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-subtitle {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #64748b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-tag {
|
|
|
+ background: #f1f5f9;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #64748b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-footer {
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-match {
|
|
|
+ background: #dcfce7;
|
|
|
+ color: #166534;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-btn {
|
|
|
+ padding: 6px 12px;
|
|
|
+ background: var(--primary);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 简历分析表单 */
|
|
|
+ .resume-form {
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-section {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ padding: 16px;
|
|
|
+ background: #f8fafc;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-section-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ color: var(--primary);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-col {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ textarea.form-control {
|
|
|
+ min-height: 100px;
|
|
|
+ resize: vertical;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 职业匹配结果 */
|
|
|
+ .match-result {
|
|
|
+ margin-top: 24px;
|
|
|
+ padding: 16px;
|
|
|
+ background: #f8fafc;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .match-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .match-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 1px solid #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .match-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .match-job {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .match-score {
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 模态框样式 */
|
|
|
+ .modal-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ display: none;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-content {
|
|
|
+ background: white;
|
|
|
+ padding: 24px;
|
|
|
+ border-radius: 12px;
|
|
|
+ max-width: 600px;
|
|
|
+ width: 90%;
|
|
|
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
|
+ max-height: 90vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: none;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-btn-cancel {
|
|
|
+ background: #f1f5f9;
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-btn-confirm {
|
|
|
+ background: var(--success);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-btn:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 响应式设计 */
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .login-box {
|
|
|
+ width: 90%;
|
|
|
+ padding: 30px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar {
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-menu {
|
|
|
+ flex-direction: row;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-row {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- 登录页面 -->
|
|
|
+ <div class="login-container" id="loginPage">
|
|
|
+ <div class="login-box">
|
|
|
+ <div class="login-logo">
|
|
|
+ <i class="fas fa-briefcase"></i>
|
|
|
+ <span>智能招聘系统</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="login-tabs">
|
|
|
+ <div class="login-tab active" data-tab="candidate">应聘者登录</div>
|
|
|
+ <div class="login-tab" data-tab="recruiter">招聘者登录</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 应聘者登录表单 -->
|
|
|
+ <div class="login-form active" id="candidateLogin">
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="candidateUsername">用户名</label>
|
|
|
+ <input type="text" id="candidateUsername" class="form-control" placeholder="请输入用户名">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="candidatePassword">密码</label>
|
|
|
+ <input type="password" id="candidatePassword" class="form-control" placeholder="请输入密码">
|
|
|
+ </div>
|
|
|
+ <button class="btn btn-primary" id="candidateLoginBtn">登录</button>
|
|
|
+ <div class="login-links">
|
|
|
+ <span class="login-link" id="showRegister">注册账号</span>
|
|
|
+ <span class="login-link" id="showForgot">忘记密码</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 招聘者登录表单 -->
|
|
|
+ <div class="login-form" id="recruiterLogin">
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="recruiterUsername">用户名</label>
|
|
|
+ <input type="text" id="recruiterUsername" class="form-control" placeholder="请输入用户名">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="recruiterPassword">密码</label>
|
|
|
+ <input type="password" id="recruiterPassword" class="form-control" placeholder="请输入密码">
|
|
|
+ </div>
|
|
|
+ <button class="btn btn-primary" id="recruiterLoginBtn">登录</button>
|
|
|
+ <div class="login-links">
|
|
|
+ <span class="login-link" id="showRegister2">注册账号</span>
|
|
|
+ <span class="login-link" id="showForgot2">忘记密码</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 注册页面 -->
|
|
|
+ <div class="login-container" id="registerPage" style="display: none;">
|
|
|
+ <div class="login-box">
|
|
|
+ <div class="login-logo">
|
|
|
+ <i class="fas fa-user-plus"></i>
|
|
|
+ <span>注册账号</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="login-tabs">
|
|
|
+ <div class="login-tab active" data-tab="candidateReg">应聘者注册</div>
|
|
|
+ <div class="login-tab" data-tab="recruiterReg">招聘者注册</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 应聘者注册表单 -->
|
|
|
+ <div class="login-form active" id="candidateRegister">
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="regCandidateUsername">用户名</label>
|
|
|
+ <input type="text" id="regCandidateUsername" class="form-control" placeholder="请输入用户名">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="regCandidatePassword">密码</label>
|
|
|
+ <input type="password" id="regCandidatePassword" class="form-control" placeholder="请输入密码">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="regCandidateConfirm">确认密码</label>
|
|
|
+ <input type="password" id="regCandidateConfirm" class="form-control" placeholder="请再次输入密码">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="regCandidateEmail">电子邮箱</label>
|
|
|
+ <input type="email" id="regCandidateEmail" class="form-control" placeholder="请输入电子邮箱">
|
|
|
+ </div>
|
|
|
+ <button class="btn btn-primary" id="candidateRegisterBtn">注册</button>
|
|
|
+ <div class="login-links">
|
|
|
+ <span class="login-link" id="backToLogin">返回登录</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 招聘者注册表单 -->
|
|
|
+ <div class="login-form" id="recruiterRegister">
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="regRecruiterUsername">用户名</label>
|
|
|
+ <input type="text" id="regRecruiterUsername" class="form-control" placeholder="请输入用户名">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="regRecruiterPassword">密码</label>
|
|
|
+ <input type="password" id="regRecruiterPassword" class="form-control" placeholder="请输入密码">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="regRecruiterConfirm">确认密码</label>
|
|
|
+ <input type="password" id="regRecruiterConfirm" class="form-control" placeholder="请再次输入密码">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="regRecruiterEmail">电子邮箱</label>
|
|
|
+ <input type="email" id="regRecruiterEmail" class="form-control" placeholder="请输入电子邮箱">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="regCompany">公司名称</label>
|
|
|
+ <input type="text" id="regCompany" class="form-control" placeholder="请输入公司名称">
|
|
|
+ </div>
|
|
|
+ <button class="btn btn-primary" id="recruiterRegisterBtn">注册</button>
|
|
|
+ <div class="login-links">
|
|
|
+ <span class="login-link" id="backToLogin2">返回登录</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 忘记密码页面 -->
|
|
|
+ <div class="login-container" id="forgotPage" style="display: none;">
|
|
|
+ <div class="login-box">
|
|
|
+ <div class="login-logo">
|
|
|
+ <i class="fas fa-key"></i>
|
|
|
+ <span>找回密码</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="forgotEmail">电子邮箱</label>
|
|
|
+ <input type="email" id="forgotEmail" class="form-control" placeholder="请输入注册时使用的电子邮箱">
|
|
|
+ </div>
|
|
|
+ <button class="btn btn-primary" id="forgotBtn">发送重置链接</button>
|
|
|
+ <div class="login-links">
|
|
|
+ <span class="login-link" id="backToLogin3">返回登录</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主界面 - 应聘者 -->
|
|
|
+ <div class="container" id="candidateContainer">
|
|
|
+ <!-- 左侧导航 -->
|
|
|
+ <div class="sidebar">
|
|
|
+ <div class="logo">
|
|
|
+ <i class="fas fa-user-tie"></i>
|
|
|
+ <span>应聘者中心</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-menu">
|
|
|
+ <div class="nav-item active" id="navCandidateJobs">
|
|
|
+ <i class="fas fa-briefcase"></i>
|
|
|
+ <span>工作机会</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item" id="navCandidateResume">
|
|
|
+ <i class="fas fa-file-alt"></i>
|
|
|
+ <span>简历分析</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item" id="navCandidateInterview">
|
|
|
+ <i class="fas fa-video"></i>
|
|
|
+ <span>视频面试</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item" id="navCandidateRecords">
|
|
|
+ <i class="fas fa-history"></i>
|
|
|
+ <span>面试记录</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主内容区 -->
|
|
|
+ <div class="main-content">
|
|
|
+ <!-- 顶部信息栏 -->
|
|
|
+ <div class="header">
|
|
|
+ <div class="search-bar">
|
|
|
+ <input type="text" class="search-input" placeholder="搜索工作职位、公司...">
|
|
|
+ <button class="search-btn">
|
|
|
+ <i class="fas fa-search"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="user-info">
|
|
|
+ <div class="user-dropdown">
|
|
|
+ <div class="avatar" id="userAvatar">张</div>
|
|
|
+ <div class="dropdown-menu" id="userDropdown">
|
|
|
+ <div class="dropdown-item">
|
|
|
+ <i class="fas fa-user"></i> 个人中心
|
|
|
+ </div>
|
|
|
+ <div class="dropdown-item">
|
|
|
+ <i class="fas fa-cog"></i> 系统设置
|
|
|
+ </div>
|
|
|
+ <div class="dropdown-divider"></div>
|
|
|
+ <div class="dropdown-item">
|
|
|
+ <i class="fas fa-sign-out-alt"></i> 退出登录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-weight: 500;">张伟</div>
|
|
|
+ <div style="font-size: 12px; color: #64748b;">应聘者</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 工作机会页面 -->
|
|
|
+ <div class="content-area" id="candidateJobsPage">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-briefcase"></i>
|
|
|
+ <span>推荐工作机会</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-grid" id="jobGrid">
|
|
|
+ <!-- 工作卡片将通过JS动态生成 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 简历分析页面 -->
|
|
|
+ <div class="content-area" id="candidateResumePage" style="display: none;">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-file-alt"></i>
|
|
|
+ <span>我的简历</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="resume-form">
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="form-section-title">
|
|
|
+ <i class="fas fa-user"></i>
|
|
|
+ <span>基本信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumeName">姓名</label>
|
|
|
+ <input type="text" id="resumeName" class="form-control" placeholder="请输入您的姓名">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumeGender">性别</label>
|
|
|
+ <select id="resumeGender" class="form-control">
|
|
|
+ <option value="male">男</option>
|
|
|
+ <option value="female">女</option>
|
|
|
+ <option value="other">其他</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumeBirth">出生日期</label>
|
|
|
+ <input type="date" id="resumeBirth" class="form-control">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumePhone">联系电话</label>
|
|
|
+ <input type="tel" id="resumePhone" class="form-control" placeholder="请输入联系电话">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumeEmail">电子邮箱</label>
|
|
|
+ <input type="email" id="resumeEmail" class="form-control" placeholder="请输入电子邮箱">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumeLocation">居住地</label>
|
|
|
+ <input type="text" id="resumeLocation" class="form-control" placeholder="请输入居住城市">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="form-section-title">
|
|
|
+ <i class="fas fa-graduation-cap"></i>
|
|
|
+ <span>教育背景</span>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumeSchool">学校名称</label>
|
|
|
+ <input type="text" id="resumeSchool" class="form-control" placeholder="请输入学校名称">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumeDegree">学历</label>
|
|
|
+ <select id="resumeDegree" class="form-control">
|
|
|
+ <option value="bachelor">本科</option>
|
|
|
+ <option value="master">硕士</option>
|
|
|
+ <option value="phd">博士</option>
|
|
|
+ <option value="college">大专</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumeMajor">专业</label>
|
|
|
+ <input type="text" id="resumeMajor" class="form-control" placeholder="请输入所学专业">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="resumeGraduation">毕业时间</label>
|
|
|
+ <input type="date" id="resumeGraduation" class="form-control">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="form-section-title">
|
|
|
+ <i class="fas fa-briefcase"></i>
|
|
|
+ <span>工作经历</span>
|
|
|
+ </div>
|
|
|
+ <div id="workExperienceContainer">
|
|
|
+ <!-- 工作经历将通过JS动态添加 -->
|
|
|
+ </div>
|
|
|
+ <button class="btn" id="addWorkExperience" style="margin-top: 10px;">
|
|
|
+ <i class="fas fa-plus"></i> 添加工作经历
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="form-section-title">
|
|
|
+ <i class="fas fa-project-diagram"></i>
|
|
|
+ <span>项目经验</span>
|
|
|
+ </div>
|
|
|
+ <div id="projectExperienceContainer">
|
|
|
+ <!-- 项目经验将通过JS动态添加 -->
|
|
|
+ </div>
|
|
|
+ <button class="btn" id="addProjectExperience" style="margin-top: 10px;">
|
|
|
+ <i class="fas fa-plus"></i> 添加项目经验
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="form-section-title">
|
|
|
+ <i class="fas fa-star"></i>
|
|
|
+ <span>技能专长</span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="resumeSkills">技能 (用逗号分隔)</label>
|
|
|
+ <input type="text" id="resumeSkills" class="form-control" placeholder="例如: JavaScript, Python, 项目管理">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-section">
|
|
|
+ <div class="form-section-title">
|
|
|
+ <i class="fas fa-certificate"></i>
|
|
|
+ <span>证书资质</span>
|
|
|
+ </div>
|
|
|
+ <div id="certificateContainer">
|
|
|
+ <!-- 证书将通过JS动态添加 -->
|
|
|
+ </div>
|
|
|
+ <button class="btn" id="addCertificate" style="margin-top: 10px;">
|
|
|
+ <i class="fas fa-plus"></i> 添加证书
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-actions">
|
|
|
+ <button class="btn" id="cancelResume">
|
|
|
+ 取消
|
|
|
+ </button>
|
|
|
+ <button class="btn btn-primary" id="saveResume">
|
|
|
+ <i class="fas fa-save"></i> 保存简历
|
|
|
+ </button>
|
|
|
+ <button class="btn btn-primary" id="analyzeResume">
|
|
|
+ <i class="fas fa-chart-bar"></i> 分析匹配度
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 职业匹配结果 -->
|
|
|
+ <div class="match-result" id="matchResult" style="display: none;">
|
|
|
+ <div class="match-title">
|
|
|
+ <i class="fas fa-chart-pie"></i>
|
|
|
+ <span>职业匹配分析</span>
|
|
|
+ </div>
|
|
|
+ <div id="matchList">
|
|
|
+ <!-- 匹配结果将通过JS动态生成 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频面试页面 -->
|
|
|
+ <div class="content-area" id="candidateInterviewPage" style="display: none;">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-video"></i>
|
|
|
+ <span>视频面试</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center; padding: 40px;">
|
|
|
+ <i class="fas fa-video" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
|
|
|
+ <h3 style="margin-bottom: 20px;">等待面试邀请</h3>
|
|
|
+ <p style="color: #64748b; margin-bottom: 30px;">当招聘者发起面试邀请时，您将在此处看到面试信息</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 面试记录页面 -->
|
|
|
+ <div class="content-area" id="candidateRecordsPage" style="display: none;">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-history"></i>
|
|
|
+ <span>面试记录</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center; padding: 40px;">
|
|
|
+ <i class="fas fa-clock" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
|
|
|
+ <h3 style="margin-bottom: 20px;">暂无面试记录</h3>
|
|
|
+ <p style="color: #64748b;">完成面试后，您的面试记录将显示在此处</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主界面 - 招聘者 -->
|
|
|
+ <div class="container" id="recruiterContainer">
|
|
|
+ <!-- 左侧导航 -->
|
|
|
+ <div class="sidebar">
|
|
|
+ <div class="logo">
|
|
|
+ <i class="fas fa-building"></i>
|
|
|
+ <span>招聘者中心</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-menu">
|
|
|
+ <div class="nav-item active" id="navRecruiterCandidates">
|
|
|
+ <i class="fas fa-users"></i>
|
|
|
+ <span>候选人</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item" id="navRecruiterJobs">
|
|
|
+ <i class="fas fa-briefcase"></i>
|
|
|
+ <span>职位管理</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item" id="navRecruiterResume">
|
|
|
+ <i class="fas fa-file-alt"></i>
|
|
|
+ <span>简历分析</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item" id="navRecruiterInterview">
|
|
|
+ <i class="fas fa-video"></i>
|
|
|
+ <span>视频面试</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item" id="navRecruiterRecords">
|
|
|
+ <i class="fas fa-history"></i>
|
|
|
+ <span>面试记录</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item" id="navRecruiterAnalysis">
|
|
|
+ <i class="fas fa-chart-bar"></i>
|
|
|
+ <span>数据分析</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主内容区 -->
|
|
|
+ <div class="main-content">
|
|
|
+ <!-- 顶部信息栏 -->
|
|
|
+ <div class="header">
|
|
|
+ <div class="search-bar">
|
|
|
+ <input type="text" class="search-input" placeholder="搜索候选人姓名、技能...">
|
|
|
+ <button class="search-btn">
|
|
|
+ <i class="fas fa-search"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="user-info">
|
|
|
+ <div class="user-dropdown">
|
|
|
+ <div class="avatar" id="recruiterAvatar">李</div>
|
|
|
+ <div class="dropdown-menu" id="recruiterDropdown">
|
|
|
+ <div class="dropdown-item">
|
|
|
+ <i class="fas fa-user"></i> 个人中心
|
|
|
+ </div>
|
|
|
+ <div class="dropdown-item">
|
|
|
+ <i class="fas fa-cog"></i> 系统设置
|
|
|
+ </div>
|
|
|
+ <div class="dropdown-divider"></div>
|
|
|
+ <div class="dropdown-item">
|
|
|
+ <i class="fas fa-sign-out-alt"></i> 退出登录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="font-weight: 500;">李明</div>
|
|
|
+ <div style="font-size: 12px; color: #64748b;">XX公司招聘经理</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 候选人页面 -->
|
|
|
+ <div class="content-area" id="recruiterCandidatesPage">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-users"></i>
|
|
|
+ <span>候选人列表</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-grid" id="candidateGrid">
|
|
|
+ <!-- 候选人卡片将通过JS动态生成 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 职位管理页面 -->
|
|
|
+ <div class="content-area" id="recruiterJobsPage" style="display: none;">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-briefcase"></i>
|
|
|
+ <span>职位管理</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: right; margin-bottom: 20px;">
|
|
|
+ <button class="btn btn-primary" id="addJobBtn">
|
|
|
+ <i class="fas fa-plus"></i> 发布新职位
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="card-grid" id="jobManageGrid">
|
|
|
+ <!-- 职位管理卡片将通过JS动态生成 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 简历分析页面 -->
|
|
|
+ <div class="content-area" id="recruiterResumePage" style="display: none;">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-file-alt"></i>
|
|
|
+ <span>简历分析</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center; padding: 40px;">
|
|
|
+ <i class="fas fa-file-search" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
|
|
|
+ <h3 style="margin-bottom: 20px;">选择候选人查看简历</h3>
|
|
|
+ <p style="color: #64748b;">点击候选人列表中的候选人，查看其完整简历和AI分析报告</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频面试页面 -->
|
|
|
+ <div class="content-area" id="recruiterInterviewPage" style="display: none;">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-video"></i>
|
|
|
+ <span>视频面试</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center; padding: 40px;">
|
|
|
+ <i class="fas fa-video" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
|
|
|
+ <h3 style="margin-bottom: 20px;">发起视频面试</h3>
|
|
|
+ <p style="color: #64748b; margin-bottom: 30px;">选择候选人后，您可以发起视频面试邀请</p>
|
|
|
+ <button class="btn btn-primary" id="startInterviewBtn" style="display: none;">
|
|
|
+ <i class="fas fa-video"></i> 发起面试
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 面试记录页面 -->
|
|
|
+ <div class="content-area" id="recruiterRecordsPage" style="display: none;">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-history"></i>
|
|
|
+ <span>面试记录</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center; padding: 40px;">
|
|
|
+ <i class="fas fa-clock" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
|
|
|
+ <h3 style="margin-bottom: 20px;">暂无面试记录</h3>
|
|
|
+ <p style="color: #64748b;">完成面试后，您的面试记录将显示在此处</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据分析页面 -->
|
|
|
+ <div class="content-area" id="recruiterAnalysisPage" style="display: none;">
|
|
|
+ <div class="content-title">
|
|
|
+ <i class="fas fa-chart-bar"></i>
|
|
|
+ <span>数据分析</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center; padding: 40px;">
|
|
|
+ <i class="fas fa-chart-pie" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
|
|
|
+ <h3 style="margin-bottom: 20px;">数据分析面板</h3>
|
|
|
+ <p style="color: #64748b;">查看候选人数据、面试表现统计和招聘效果分析</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 发布职位模态框 -->
|
|
|
+ <div class="modal-overlay" id="jobModal">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-title">
|
|
|
+ <i class="fas fa-briefcase"></i>
|
|
|
+ <span>发布新职位</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="jobTitle">职位名称</label>
|
|
|
+ <input type="text" id="jobTitle" class="form-control" placeholder="例如: 高级产品经理">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="jobType">职位类型</label>
|
|
|
+ <select id="jobType" class="form-control">
|
|
|
+ <option value="fulltime">全职</option>
|
|
|
+ <option value="parttime">兼职</option>
|
|
|
+ <option value="intern">实习</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="jobDepartment">所属部门</label>
|
|
|
+ <input type="text" id="jobDepartment" class="form-control" placeholder="例如: 产品部">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="jobLocation">工作地点</label>
|
|
|
+ <input type="text" id="jobLocation" class="form-control" placeholder="例如: 北京">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="jobSalary">薪资范围</label>
|
|
|
+ <input type="text" id="jobSalary" class="form-control" placeholder="例如: 15k-30k">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="jobDescription">职位描述</label>
|
|
|
+ <textarea id="jobDescription" class="form-control" rows="5" placeholder="请输入职位描述和工作内容"></textarea>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="jobRequirements">任职要求</label>
|
|
|
+ <textarea id="jobRequirements" class="form-control" rows="5" placeholder="请输入任职要求和技能要求"></textarea>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="modal-buttons">
|
|
|
+ <button class="modal-btn modal-btn-cancel" id="cancelJob">
|
|
|
+ 取消
|
|
|
+ </button>
|
|
|
+ <button class="modal-btn modal-btn-confirm" id="confirmJob">
|
|
|
+ 发布职位
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 用户类型: candidate(应聘者) 或 recruiter(招聘者)
|
|
|
+ let userType = '';
|
|
|
+ let currentUser = null;
|
|
|
+
|
|
|
+ // 工作数据
|
|
|
+ const jobs = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: "高级产品经理",
|
|
|
+ company: "XX科技公司",
|
|
|
+ location: "北京",
|
|
|
+ salary: "25k-40k",
|
|
|
+ type: "全职",
|
|
|
+ experience: "5年以上",
|
|
|
+ skills: ["产品规划", "用户增长", "数据分析"],
|
|
|
+ description: "负责公司核心产品的规划与设计，主导产品从0到1的开发...",
|
|
|
+ posted: "2023-10-10",
|
|
|
+ match: 82
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: "UI设计师",
|
|
|
+ company: "YY设计公司",
|
|
|
+ location: "上海",
|
|
|
+ salary: "15k-25k",
|
|
|
+ type: "全职",
|
|
|
+ experience: "3年以上",
|
|
|
+ skills: ["界面设计", "用户体验", "Figma"],
|
|
|
+ description: "负责公司客户产品的界面设计和用户体验优化...",
|
|
|
+ posted: "2023-10-12",
|
|
|
+ match: 76
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: "前端开发工程师",
|
|
|
+ company: "ZZ互联网公司",
|
|
|
+ location: "深圳",
|
|
|
+ salary: "20k-35k",
|
|
|
+ type: "全职",
|
|
|
+ experience: "3年以上",
|
|
|
+ skills: ["Vue.js", "React", "TypeScript"],
|
|
|
+ description: "负责公司核心产品的前端架构设计和开发...",
|
|
|
+ posted: "2023-10-15",
|
|
|
+ match: 88
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: "市场营销经理",
|
|
|
+ company: "AA集团",
|
|
|
+ location: "广州",
|
|
|
+ salary: "18k-30k",
|
|
|
+ type: "全职",
|
|
|
+ experience: "5年以上",
|
|
|
+ skills: ["品牌策划", "数字营销", "市场分析"],
|
|
|
+ description: "制定并执行公司年度营销策略，管理营销团队...",
|
|
|
+ posted: "2023-10-08",
|
|
|
+ match: 79
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 候选人数据
|
|
|
+ const candidates = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "张伟",
|
|
|
+ position: "高级产品经理",
|
|
|
+ experience: "5年",
|
|
|
+ skills: ["产品规划", "用户增长", "数据分析", "Axure", "SQL"],
|
|
|
+ location: "北京",
|
|
|
+ match: 82,
|
|
|
+ resume: "张伟的简历内容..."
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "李娜",
|
|
|
+ position: "UI设计师",
|
|
|
+ experience: "3年",
|
|
|
+ skills: ["界面设计", "用户体验", "交互设计", "Sketch", "Figma"],
|
|
|
+ location: "上海",
|
|
|
+ match: 76,
|
|
|
+ resume: "李娜的简历内容..."
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "王强",
|
|
|
+ position: "前端开发工程师",
|
|
|
+ experience: "4年",
|
|
|
+ skills: ["Vue.js", "React", "TypeScript", "Node.js", "Webpack"],
|
|
|
+ location: "深圳",
|
|
|
+ match: 88,
|
|
|
+ resume: "王强的简历内容..."
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "赵敏",
|
|
|
+ position: "市场营销经理",
|
|
|
+ experience: "6年",
|
|
|
+ skills: ["品牌策划", "数字营销", "市场分析", "SEO", "Google Analytics"],
|
|
|
+ location: "广州",
|
|
|
+ match: 79,
|
|
|
+ resume: "赵敏的简历内容..."
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 职位管理数据
|
|
|
+ let managedJobs = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: "高级产品经理",
|
|
|
+ department: "产品部",
|
|
|
+ type: "全职",
|
|
|
+ location: "北京",
|
|
|
+ salary: "25k-40k",
|
|
|
+ posted: "2023-10-01",
|
|
|
+ applicants: 12,
|
|
|
+ status: "招聘中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: "UI设计师",
|
|
|
+ department: "设计部",
|
|
|
+ type: "全职",
|
|
|
+ location: "上海",
|
|
|
+ salary: "15k-25k",
|
|
|
+ posted: "2023-09-15",
|
|
|
+ applicants: 8,
|
|
|
+ status: "招聘中"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 初始化页面
|
|
|
+ const initPages = () => {
|
|
|
+ // 绑定登录/注册切换事件
|
|
|
+ document.querySelectorAll('.login-tab').forEach(tab => {
|
|
|
+ tab.addEventListener('click', function() {
|
|
|
+ const tabId = this.getAttribute('data-tab');
|
|
|
+
|
|
|
+ // 更新标签页状态
|
|
|
+ document.querySelectorAll('.login-tab').forEach(t => t.classList.remove('active'));
|
|
|
+ this.classList.add('active');
|
|
|
+
|
|
|
+ // 显示对应的表单
|
|
|
+ if (tabId.includes('Reg')) {
|
|
|
+ // 注册表单
|
|
|
+ document.querySelectorAll('.login-form').forEach(form => form.classList.remove('active'));
|
|
|
+ document.getElementById(tabId === 'candidateReg' ? 'candidateRegister' : 'recruiterRegister').classList.add('active');
|
|
|
+ } else {
|
|
|
+ // 登录表单
|
|
|
+ document.querySelectorAll('.login-form').forEach(form => form.classList.remove('active'));
|
|
|
+ document.getElementById(tabId === 'candidate' ? 'candidateLogin' : 'recruiterLogin').classList.add('active');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 绑定显示注册页面事件
|
|
|
+ document.getElementById('showRegister').addEventListener('click', showRegisterPage);
|
|
|
+ document.getElementById('showRegister2').addEventListener('click', showRegisterPage);
|
|
|
+
|
|
|
+ // 绑定显示忘记密码页面事件
|
|
|
+ document.getElementById('showForgot').addEventListener('click', showForgotPage);
|
|
|
+ document.getElementById('showForgot2').addEventListener('click', showForgotPage);
|
|
|
+
|
|
|
+ // 绑定返回登录事件
|
|
|
+ document.getElementById('backToLogin').addEventListener('click', showLoginPage);
|
|
|
+ document.getElementById('backToLogin2').addEventListener('click', showLoginPage);
|
|
|
+ document.getElementById('backToLogin3').addEventListener('click', showLoginPage);
|
|
|
+
|
|
|
+ // 绑定登录按钮事件
|
|
|
+ document.getElementById('candidateLoginBtn').addEventListener('click', () => login('candidate'));
|
|
|
+ document.getElementById('recruiterLoginBtn').addEventListener('click', () => login('recruiter'));
|
|
|
+
|
|
|
+ // 绑定注册按钮事件
|
|
|
+ document.getElementById('candidateRegisterBtn').addEventListener('click', () => register('candidate'));
|
|
|
+ document.getElementById('recruiterRegisterBtn').addEventListener('click', () => register('recruiter'));
|
|
|
+
|
|
|
+ // 绑定忘记密码按钮事件
|
|
|
+ document.getElementById('forgotBtn').addEventListener('click', forgotPassword);
|
|
|
+
|
|
|
+ // 生成工作卡片
|
|
|
+ document.getElementById('jobGrid').innerHTML = jobs.map(job => `
|
|
|
+ <div class="card" data-id="${job.id}">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="card-avatar">${job.company.charAt(0)}</div>
|
|
|
+ <div>
|
|
|
+ <div class="card-title">${job.title}</div>
|
|
|
+ <div class="card-subtitle">${job.company} · ${job.location}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-tags">
|
|
|
+ ${job.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
|
|
|
+ ${job.skills.length > 3 ? `<span class="card-tag">+${job.skills.length - 3}</span>` : ''}
|
|
|
+ </div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <span class="card-match">匹配度: ${job.match}%</span>
|
|
|
+ <button class="card-btn">申请职位</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `).join('');
|
|
|
+
|
|
|
+ // 生成候选人卡片
|
|
|
+ document.getElementById('candidateGrid').innerHTML = candidates.map(candidate => `
|
|
|
+ <div class="card" data-id="${candidate.id}">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="card-avatar">${candidate.name.charAt(0)}</div>
|
|
|
+ <div>
|
|
|
+ <div class="card-title">${candidate.name}</div>
|
|
|
+ <div class="card-subtitle">${candidate.position} · ${candidate.experience}经验</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-tags">
|
|
|
+ ${candidate.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
|
|
|
+ ${candidate.skills.length > 3 ? `<span class="card-tag">+${candidate.skills.length - 3}</span>` : ''}
|
|
|
+ </div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <span class="card-match">匹配度: ${candidate.match}%</span>
|
|
|
+ <button class="card-btn">查看简历</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `).join('');
|
|
|
+
|
|
|
+ // 生成职位管理卡片
|
|
|
+ updateJobManageGrid();
|
|
|
+
|
|
|
+ // 绑定工作卡片点击事件
|
|
|
+ document.querySelectorAll('#jobGrid .card').forEach(card => {
|
|
|
+ card.addEventListener('click', function() {
|
|
|
+ const jobId = parseInt(this.getAttribute('data-id'));
|
|
|
+ showJobDetail(jobId);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 绑定候选人卡片点击事件
|
|
|
+ document.querySelectorAll('#candidateGrid .card').forEach(card => {
|
|
|
+ card.addEventListener('click', function() {
|
|
|
+ const candidateId = parseInt(this.getAttribute('data-id'));
|
|
|
+ showCandidateDetail(candidateId);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 绑定职位管理卡片点击事件
|
|
|
+ document.querySelectorAll('#jobManageGrid .card').forEach(card => {
|
|
|
+ card.addEventListener('click', function() {
|
|
|
+ const jobId = parseInt(this.getAttribute('data-id'));
|
|
|
+ showJobManageDetail(jobId);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 绑定用户头像点击事件
|
|
|
+ document.getElementById('userAvatar').addEventListener('click', toggleUserDropdown);
|
|
|
+ document.getElementById('recruiterAvatar').addEventListener('click', toggleRecruiterDropdown);
|
|
|
+
|
|
|
+ // 绑定导航菜单点击事件 - 应聘者
|
|
|
+ document.getElementById('navCandidateJobs').addEventListener('click', () => switchCandidatePage('jobs'));
|
|
|
+ document.getElementById('navCandidateResume').addEventListener('click', () => switchCandidatePage('resume'));
|
|
|
+ document.getElementById('navCandidateInterview').addEventListener('click', () => switchCandidatePage('interview'));
|
|
|
+ document.getElementById('navCandidateRecords').addEventListener('click', () => switchCandidatePage('records'));
|
|
|
+
|
|
|
+ // 绑定导航菜单点击事件 - 招聘者
|
|
|
+ document.getElementById('navRecruiterCandidates').addEventListener('click', () => switchRecruiterPage('candidates'));
|
|
|
+ document.getElementById('navRecruiterJobs').addEventListener('click', () => switchRecruiterPage('jobs'));
|
|
|
+ document.getElementById('navRecruiterResume').addEventListener('click', () => switchRecruiterPage('resume'));
|
|
|
+ document.getElementById('navRecruiterInterview').addEventListener('click', () => switchRecruiterPage('interview'));
|
|
|
+ document.getElementById('navRecruiterRecords').addEventListener('click', () => switchRecruiterPage('records'));
|
|
|
+ document.getElementById('navRecruiterAnalysis').addEventListener('click', () => switchRecruiterPage('analysis'));
|
|
|
+
|
|
|
+ // 绑定简历表单事件
|
|
|
+ document.getElementById('addWorkExperience').addEventListener('click', addWorkExperienceField);
|
|
|
+ document.getElementById('addProjectExperience').addEventListener('click', addProjectExperienceField);
|
|
|
+ document.getElementById('addCertificate').addEventListener('click', addCertificateField);
|
|
|
+ document.getElementById('saveResume').addEventListener('click', saveResume);
|
|
|
+ document.getElementById('cancelResume').addEventListener('click', cancelResume);
|
|
|
+ document.getElementById('analyzeResume').addEventListener('click', analyzeResume);
|
|
|
+
|
|
|
+ // 绑定职位管理事件
|
|
|
+ document.getElementById('addJobBtn').addEventListener('click', showJobModal);
|
|
|
+ document.getElementById('cancelJob').addEventListener('click', hideJobModal);
|
|
|
+ document.getElementById('confirmJob').addEventListener('click', addNewJob);
|
|
|
+
|
|
|
+ // 绑定退出登录事件
|
|
|
+ document.querySelectorAll('.dropdown-item').forEach(item => {
|
|
|
+ if (item.textContent.includes('退出登录')) {
|
|
|
+ item.addEventListener('click', logout);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 更新职位管理网格
|
|
|
+ const updateJobManageGrid = () => {
|
|
|
+ document.getElementById('jobManageGrid').innerHTML = managedJobs.map(job => `
|
|
|
+ <div class="card" data-id="${job.id}">
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="card-avatar">${job.title.charAt(0)}</div>
|
|
|
+ <div>
|
|
|
+ <div class="card-title">${job.title}</div>
|
|
|
+ <div class="card-subtitle">${job.department} · ${job.location}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-tags">
|
|
|
+ <span class="card-tag">${job.type}</span>
|
|
|
+ <span class="card-tag">${job.salary}</span>
|
|
|
+ <span class="card-tag">${job.status}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <span>${job.applicants}位申请人</span>
|
|
|
+ <span>发布于 ${job.posted}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `).join('');
|
|
|
+ };
|
|
|
+
|
|
|
+ // 显示工作详情
|
|
|
+ const showJobDetail = (jobId) => {
|
|
|
+ const job = jobs.find(j => j.id === jobId);
|
|
|
+ if (!job) return;
|
|
|
+
|
|
|
+ alert(`职位详情: ${job.title}\n公司: ${job.company}\n地点: ${job.location}\n薪资: ${job.salary}\n描述: ${job.description}`);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 显示候选人详情
|
|
|
+ const showCandidateDetail = (candidateId) => {
|
|
|
+ const candidate = candidates.find(c => c.id === candidateId);
|
|
|
+ if (!candidate) return;
|
|
|
+
|
|
|
+ alert(`候选人详情: ${candidate.name}\n职位: ${candidate.position}\n经验: ${candidate.experience}\n技能: ${candidate.skills.join(', ')}\n简历: ${candidate.resume}`);
|
|
|
+
|
|
|
+ // 如果是招聘者界面，显示发起面试按钮
|
|
|
+ if (userType === 'recruiter') {
|
|
|
+ document.getElementById('startInterviewBtn').style.display = 'inline-block';
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 显示职位管理详情
|
|
|
+ const showJobManageDetail = (jobId) => {
|
|
|
+ const job = managedJobs.find(j => j.id === jobId);
|
|
|
+ if (!job) return;
|
|
|
+
|
|
|
+ alert(`职位管理: ${job.title}\n部门: ${job.department}\n地点: ${job.location}\n薪资: ${job.salary}\n状态: ${job.status}\n申请人: ${job.applicants}`);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 切换应聘者页面
|
|
|
+ const switchCandidatePage = (page) => {
|
|
|
+ // 隐藏所有页面
|
|
|
+ document.getElementById('candidateJobsPage').style.display = 'none';
|
|
|
+ document.getElementById('candidateResumePage').style.display = 'none';
|
|
|
+ document.getElementById('candidateInterviewPage').style.display = 'none';
|
|
|
+ document.getElementById('candidateRecordsPage').style.display = 'none';
|
|
|
+
|
|
|
+ // 显示选中的页面
|
|
|
+ document.getElementById(`candidate${page.charAt(0).toUpperCase() + page.slice(1)}Page`).style.display = 'block';
|
|
|
+
|
|
|
+ // 更新导航激活状态
|
|
|
+ document.querySelectorAll('#candidateContainer .nav-item').forEach(item => {
|
|
|
+ item.classList.remove('active');
|
|
|
+ });
|
|
|
+ document.getElementById(`navCandidate${page.charAt(0).toUpperCase() + page.slice(1)}`).classList.add('active');
|
|
|
+ };
|
|
|
+
|
|
|
+ // 切换招聘者页面
|
|
|
+ const switchRecruiterPage = (page) => {
|
|
|
+ // 隐藏所有页面
|
|
|
+ document.getElementById('recruiterCandidatesPage').style.display = 'none';
|
|
|
+ document.getElementById('recruiterJobsPage').style.display = 'none';
|
|
|
+ document.getElementById('recruiterResumePage').style.display = 'none';
|
|
|
+ document.getElementById('recruiterInterviewPage').style.display = 'none';
|
|
|
+ document.getElementById('recruiterRecordsPage').style.display = 'none';
|
|
|
+ document.getElementById('recruiterAnalysisPage').style.display = 'none';
|
|
|
+
|
|
|
+ // 显示选中的页面
|
|
|
+ document.getElementById(`recruiter${page.charAt(0).toUpperCase() + page.slice(1)}Page`).style.display = 'block';
|
|
|
+
|
|
|
+ // 更新导航激活状态
|
|
|
+ document.querySelectorAll('#recruiterContainer .nav-item').forEach(item => {
|
|
|
+ item.classList.remove('active');
|
|
|
+ });
|
|
|
+ document.getElementById(`navRecruiter${page.charAt(0).toUpperCase() + page.slice(1)}`).classList.add('active');
|
|
|
+ };
|
|
|
+
|
|
|
+ // 显示登录页面
|
|
|
+ const showLoginPage = () => {
|
|
|
+ document.getElementById('loginPage').style.display = 'flex';
|
|
|
+ document.getElementById('registerPage').style.display = 'none';
|
|
|
+ document.getElementById('forgotPage').style.display = 'none';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 显示注册页面
|
|
|
+ const showRegisterPage = () => {
|
|
|
+ document.getElementById('loginPage').style.display = 'none';
|
|
|
+ document.getElementById('registerPage').style.display = 'flex';
|
|
|
+ document.getElementById('forgotPage').style.display = 'none';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 显示忘记密码页面
|
|
|
+ const showForgotPage = () => {
|
|
|
+ document.getElementById('loginPage').style.display = 'none';
|
|
|
+ document.getElementById('registerPage').style.display = 'none';
|
|
|
+ document.getElementById('forgotPage').style.display = 'flex';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 切换用户下拉菜单
|
|
|
+ const toggleUserDropdown = () => {
|
|
|
+ const dropdown = document.getElementById('userDropdown');
|
|
|
+ dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
|
|
|
+ };
|
|
|
+
|
|
|
+ const toggleRecruiterDropdown = () => {
|
|
|
+ const dropdown = document.getElementById('recruiterDropdown');
|
|
|
+ dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加工作经历字段
|
|
|
+ const addWorkExperienceField = () => {
|
|
|
+ const container = document.getElementById('workExperienceContainer');
|
|
|
+ const id = Date.now();
|
|
|
+
|
|
|
+ const html = `
|
|
|
+ <div class="form-section" id="work-${id}">
|
|
|
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
|
|
+ <div class="form-section-title">
|
|
|
+ <i class="fas fa-briefcase"></i>
|
|
|
+ <span>工作经历</span>
|
|
|
+ </div>
|
|
|
+ <button class="btn" onclick="removeField('work-${id}')">
|
|
|
+ <i class="fas fa-trash"></i> 删除
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="workCompany-${id}">公司名称</label>
|
|
|
+ <input type="text" id="workCompany-${id}" class="form-control" placeholder="请输入公司名称">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="workPosition-${id}">职位</label>
|
|
|
+ <input type="text" id="workPosition-${id}" class="form-control" placeholder="请输入职位">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="workStart-${id}">开始时间</label>
|
|
|
+ <input type="date" id="workStart-${id}" class="form-control">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="workEnd-${id}">结束时间</label>
|
|
|
+ <input type="date" id="workEnd-${id}" class="form-control">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="workDescription-${id}">工作内容</label>
|
|
|
+ <textarea id="workDescription-${id}" class="form-control" rows="3" placeholder="请输入工作内容和职责"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ container.insertAdjacentHTML('beforeend', html);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加项目经验字段
|
|
|
+ const addProjectExperienceField = () => {
|
|
|
+ const container = document.getElementById('projectExperienceContainer');
|
|
|
+ const id = Date.now();
|
|
|
+
|
|
|
+ const html = `
|
|
|
+ <div class="form-section" id="project-${id}">
|
|
|
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
|
|
+ <div class="form-section-title">
|
|
|
+ <i class="fas fa-project-diagram"></i>
|
|
|
+ <span>项目经验</span>
|
|
|
+ </div>
|
|
|
+ <button class="btn" onclick="removeField('project-${id}')">
|
|
|
+ <i class="fas fa-trash"></i> 删除
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="projectName-${id}">项目名称</label>
|
|
|
+ <input type="text" id="projectName-${id}" class="form-control" placeholder="请输入项目名称">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="projectRole-${id}">担任角色</label>
|
|
|
+ <input type="text" id="projectRole-${id}" class="form-control" placeholder="请输入您在项目中的角色">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-row">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="projectStart-${id}">开始时间</label>
|
|
|
+ <input type="date" id="projectStart-${id}" class="form-control">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="projectEnd-${id}">结束时间</label>
|
|
|
+ <input type="date" id="projectEnd-${id}" class="form-control">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="projectDescription-${id}">项目描述</label>
|
|
|
+ <textarea id="projectDescription-${id}" class="form-control" rows="3" placeholder="请输入项目描述"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="projectAchievement-${id}">项目成果</label>
|
|
|
+ <textarea id="projectAchievement-${id}" class="form-control" rows="3" placeholder="请输入项目成果和收获"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ container.insertAdjacentHTML('beforeend', html);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加证书字段
|
|
|
+ const addCertificateField = () => {
|
|
|
+ const container = document.getElementById('certificateContainer');
|
|
|
+ const id = Date.now();
|
|
|
+
|
|
|
+ const html = `
|
|
|
+ <div class="form-row" id="certificate-${id}" style="margin-bottom: 16px;">
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="certificateName-${id}">证书名称</label>
|
|
|
+ <input type="text" id="certificateName-${id}" class="form-control" placeholder="请输入证书名称">
|
|
|
+ </div>
|
|
|
+ <div class="form-col">
|
|
|
+ <label for="certificateTime-${id}">获得时间</label>
|
|
|
+ <input type="date" id="certificateTime-${id}" class="form-control">
|
|
|
+ </div>
|
|
|
+ <div class="form-col" style="display: flex; align-items: flex-end;">
|
|
|
+ <button class="btn" onclick="removeField('certificate-${id}')" style="height: 42px;">
|
|
|
+ <i class="fas fa-trash"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ container.insertAdjacentHTML('beforeend', html);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 删除字段
|
|
|
+ const removeField = (id) => {
|
|
|
+ document.getElementById(id).remove();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 保存简历
|
|
|
+ const saveResume = () => {
|
|
|
+ alert('简历已保存');
|
|
|
+ // 这里可以添加保存简历到服务器的代码
|
|
|
+ };
|
|
|
+
|
|
|
+ // 取消编辑简历
|
|
|
+ const cancelResume = () => {
|
|
|
+ if (confirm('确定要取消编辑吗？所有未保存的更改将丢失。')) {
|
|
|
+ // 重置表单
|
|
|
+ document.getElementById('resumeForm').reset();
|
|
|
+ // 清空动态添加的字段
|
|
|
+ document.getElementById('workExperienceContainer').innerHTML = '';
|
|
|
+ document.getElementById('projectExperienceContainer').innerHTML = '';
|
|
|
+ document.getElementById('certificateContainer').innerHTML = '';
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 分析简历匹配度
|
|
|
+ const analyzeResume = () => {
|
|
|
+ // 模拟分析过程
|
|
|
+ document.getElementById('matchResult').style.display = 'block';
|
|
|
+
|
|
|
+ // 模拟匹配结果
|
|
|
+ const matches = [
|
|
|
+ { job: "高级产品经理", score: 85 },
|
|
|
+ { job: "产品经理", score: 78 },
|
|
|
+ { job: "产品助理", score: 65 },
|
|
|
+ { job: "项目经理", score: 72 },
|
|
|
+ { job: "用户研究员", score: 60 }
|
|
|
+ ];
|
|
|
+
|
|
|
+ document.getElementById('matchList').innerHTML = matches.map(match => `
|
|
|
+ <div class="match-item">
|
|
|
+ <div class="match-job">${match.job}</div>
|
|
|
+ <div class="match-score">${match.score}%</div>
|
|
|
+ </div>
|
|
|
+ `).join('');
|
|
|
+
|
|
|
+ // 滚动到结果区域
|
|
|
+ document.getElementById('matchResult').scrollIntoView({ behavior: 'smooth' });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 显示职位发布模态框
|
|
|
+ const showJobModal = () => {
|
|
|
+ document.getElementById('jobModal').style.display = 'flex';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 隐藏职位发布模态框
|
|
|
+ const hideJobModal = () => {
|
|
|
+ document.getElementById('jobModal').style.display = 'none';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加新职位
|
|
|
+ const addNewJob = () => {
|
|
|
+ const title = document.getElementById('jobTitle').value;
|
|
|
+ const type = document.getElementById('jobType').value;
|
|
|
+ const department = document.getElementById('jobDepartment').value;
|
|
|
+ const location = document.getElementById('jobLocation').value;
|
|
|
+ const salary = document.getElementById('jobSalary').value;
|
|
|
+ const description = document.getElementById('jobDescription').value;
|
|
|
+ const requirements = document.getElementById('jobRequirements').value;
|
|
|
+
|
|
|
+ if (!title || !department || !location || !salary) {
|
|
|
+ alert('请填写所有必填字段');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const now = new Date();
|
|
|
+ const newJob = {
|
|
|
+ id: managedJobs.length + 1,
|
|
|
+ title: title,
|
|
|
+ department: department,
|
|
|
+ type: type === 'fulltime' ? '全职' : type === 'parttime' ? '兼职' : '实习',
|
|
|
+ location: location,
|
|
|
+ salary: salary,
|
|
|
+ posted: `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`,
|
|
|
+ applicants: 0,
|
|
|
+ status: "招聘中"
|
|
|
+ };
|
|
|
+
|
|
|
+ managedJobs.push(newJob);
|
|
|
+ updateJobManageGrid();
|
|
|
+ hideJobModal();
|
|
|
+
|
|
|
+ // 重置表单
|
|
|
+ document.getElementById('jobTitle').value = '';
|
|
|
+ document.getElementById('jobDepartment').value = '';
|
|
|
+ document.getElementById('jobLocation').value = '';
|
|
|
+ document.getElementById('jobSalary').value = '';
|
|
|
+ document.getElementById('jobDescription').value = '';
|
|
|
+ document.getElementById('jobRequirements').value = '';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 登录功能
|
|
|
+ const login = (type) => {
|
|
|
+ const usernameField = type === 'candidate' ? 'candidateUsername' : 'recruiterUsername';
|
|
|
+ const passwordField = type === 'candidate' ? 'candidatePassword' : 'recruiterPassword';
|
|
|
+
|
|
|
+ const username = document.getElementById(usernameField).value;
|
|
|
+ const password = document.getElementById(passwordField).value;
|
|
|
+
|
|
|
+ if (!username || !password) {
|
|
|
+ alert('请输入用户名和密码');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 模拟登录成功
|
|
|
+ userType = type;
|
|
|
+ currentUser = {
|
|
|
+ username: username,
|
|
|
+ type: type,
|
|
|
+ name: type === 'candidate' ? '张伟' : '李明',
|
|
|
+ company: type === 'recruiter' ? 'XX科技公司' : null
|
|
|
+ };
|
|
|
+
|
|
|
+ // 显示主界面
|
|
|
+ document.getElementById('loginPage').style.display = 'none';
|
|
|
+
|
|
|
+ if (type === 'candidate') {
|
|
|
+ document.getElementById('candidateContainer').style.display = 'flex';
|
|
|
+ switchCandidatePage('jobs');
|
|
|
+ } else {
|
|
|
+ document.getElementById('recruiterContainer').style.display = 'flex';
|
|
|
+ switchRecruiterPage('candidates');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 注册功能
|
|
|
+ const register = (type) => {
|
|
|
+ const usernameField = type === 'candidate' ? 'regCandidateUsername' : 'regRecruiterUsername';
|
|
|
+ const passwordField = type === 'candidate' ? 'regCandidatePassword' : 'regRecruiterPassword';
|
|
|
+ const confirmField = type === 'candidate' ? 'regCandidateConfirm' : 'regRecruiterConfirm';
|
|
|
+ const emailField = type === 'candidate' ? 'regCandidateEmail' : 'regRecruiterEmail';
|
|
|
+
|
|
|
+ const username = document.getElementById(usernameField).value;
|
|
|
+ const password = document.getElementById(passwordField).value;
|
|
|
+ const confirm = document.getElementById(confirmField).value;
|
|
|
+ const email = document.getElementById(emailField).value;
|
|
|
+ const company = type === 'recruiter' ? document.getElementById('regCompany').value : null;
|
|
|
+
|
|
|
+ if (!username || !password || !confirm || !email) {
|
|
|
+ alert('请填写所有必填字段');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (password !== confirm) {
|
|
|
+ alert('两次输入的密码不一致');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === 'recruiter' && !company) {
|
|
|
+ alert('请填写公司名称');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 模拟注册成功
|
|
|
+ alert('注册成功！请登录');
|
|
|
+ showLoginPage();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 忘记密码功能
|
|
|
+ const forgotPassword = () => {
|
|
|
+ const email = document.getElementById('forgotEmail').value;
|
|
|
+
|
|
|
+ if (!email) {
|
|
|
+ alert('请输入电子邮箱');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 模拟发送重置链接
|
|
|
+ alert(`重置链接已发送至 ${email}，请查收邮件并按照指示操作`);
|
|
|
+ showLoginPage();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 退出登录
|
|
|
+ const logout = () => {
|
|
|
+ userType = '';
|
|
|
+ currentUser = null;
|
|
|
+
|
|
|
+ // 隐藏所有主界面
|
|
|
+ document.getElementById('candidateContainer').style.display = 'none';
|
|
|
+ document.getElementById('recruiterContainer').style.display = 'none';
|
|
|
+
|
|
|
+ // 显示登录页面
|
|
|
+ showLoginPage();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 初始化页面
|
|
|
+ initPages();
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
