Home Explore Help
Register Sign In
0235713
/
intelligent-interview
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: new h2

0235712 13 hours ago
parent
0d100b67d3
commit
3ad78135b0
2 changed files with 2943 additions and 1 deletions
Unified View Show Diff Stats
  1. 2942 0
      demo/h2.html
  2. 1 1
      interview-web/package-lock.json

+ 2942 - 0
demo/h2.html
View File 

@@ -0,0 +1,2942 @@
 
+<!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 {
 
+            padding: 12px;
 
+            border: none;
 
+            border-radius: 8px;
 
+            font-size: 16px;
 
+            font-weight: 500;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .btn-block {
 
+            width: 100%;
 
+        }
 
+        
+        .btn-primary {
 
+            background: var(--primary);
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background: #1d4ed8;
 
+        }
 
+        
+        .btn-secondary {
 
+            background: var(--secondary);
 
+            color: white;
 
+        }
 
+        
+        .btn-secondary:hover {
 
+            background: #d97706;
 
+        }
 
+        
+        .btn-success {
 
+            background: var(--success);
 
+            color: white;
 
+        }
 
+        
+        .btn-success:hover {
 
+            background: #059669;
 
+        }
 
+        
+        .btn-danger {
 
+            background: var(--danger);
 
+            color: white;
 
+        }
 
+        
+        .btn-danger:hover {
 
+            background: #dc2626;
 
+        }
 
+        
+        .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;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+        }
 
+        
+        .dropdown-item:hover {
 
+            background: #f1f5f9;
 
+        }
 
+        
+        .dropdown-divider {
 
+            height: 1px;
 
+            background: #e2e8f0;
 
+            margin: 5px 0;
 
+        }
 
+        
+        /* 搜索栏 */
 
+        .search-bar {
 
+            display: flex;
 
+            gap: 10px;
 
+            align-items: center;
 
+            flex: 1;
 
+            max-width: 500px;
 
+        }
 
+        
+        .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;
 
+        }
 
+        
+        .search-advanced {
 
+            color: var(--primary);
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            white-space: nowrap;
 
+        }
 
+        
+        .search-filters {
 
+            display: none;
 
+            background: white;
 
+            border-radius: 8px;
 
+            padding: 16px;
 
+            margin-top: 10px;
 
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .search-filters.active {
 
+            display: block;
 
+        }
 
+        
+        .filter-row {
 
+            display: flex;
 
+            gap: 16px;
 
+            margin-bottom: 16px;
 
+        }
 
+        
+        .filter-group {
 
+            flex: 1;
 
+        }
 
+        
+        .filter-group label {
 
+            display: block;
 
+            margin-bottom: 8px;
 
+            font-size: 14px;
 
+            color: #64748b;
 
+        }
 
+        
+        .filter-select {
 
+            width: 100%;
 
+            padding: 8px 12px;
 
+            border: 1px solid #e2e8f0;
 
+            border-radius: 6px;
 
+            font-size: 14px;
 
+        }
 
+        
+        .filter-actions {
 
+            display: flex;
 
+            justify-content: flex-end;
 
+            gap: 10px;
 
+        }
 
+        
+        /* 内容区域样式 */
 
+        .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);
 
+        }
 
+        
+        /* 个人中心样式 */
 
+        .profile-container {
 
+            display: flex;
 
+            gap: 24px;
 
+        }
 
+        
+        .profile-sidebar {
 
+            width: 240px;
 
+            background: #f8fafc;
 
+            border-radius: 8px;
 
+            padding: 16px;
 
+        }
 
+        
+        .profile-menu {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 8px;
 
+        }
 
+        
+        .profile-menu-item {
 
+            padding: 12px 16px;
 
+            border-radius: 6px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .profile-menu-item:hover {
 
+            background: #e2e8f0;
 
+        }
 
+        
+        .profile-menu-item.active {
 
+            background: #e0f2fe;
 
+            color: var(--primary);
 
+            font-weight: 500;
 
+        }
 
+        
+        .profile-content {
 
+            flex: 1;
 
+            background: #f8fafc;
 
+            border-radius: 8px;
 
+            padding: 24px;
 
+        }
 
+        
+        .profile-section {
 
+            display: none;
 
+        }
 
+        
+        .profile-section.active {
 
+            display: block;
 
+        }
 
+        
+        .profile-header {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 20px;
 
+            margin-bottom: 24px;
 
+        }
 
+        
+        .profile-avatar {
 
+            width: 80px;
 
+            height: 80px;
 
+            border-radius: 50%;
 
+            background-color: #e0f2fe;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: var(--primary);
 
+            font-size: 32px;
 
+            font-weight: bold;
 
+        }
 
+        
+        .profile-info h2 {
 
+            margin-bottom: 8px;
 
+        }
 
+        
+        .profile-info p {
 
+            color: #64748b;
 
+        }
 
+        
+        .profile-form {
 
+            max-width: 600px;
 
+        }
 
+        
+        /* 设置页面样式 */
 
+        .settings-container {
 
+            display: flex;
 
+            gap: 24px;
 
+        }
 
+        
+        .settings-sidebar {
 
+            width: 240px;
 
+            background: #f8fafc;
 
+            border-radius: 8px;
 
+            padding: 16px;
 
+        }
 
+        
+        .settings-menu {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 8px;
 
+        }
 
+        
+        .settings-menu-item {
 
+            padding: 12px 16px;
 
+            border-radius: 6px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .settings-menu-item:hover {
 
+            background: #e2e8f0;
 
+        }
 
+        
+        .settings-menu-item.active {
 
+            background: #e0f2fe;
 
+            color: var(--primary);
 
+            font-weight: 500;
 
+        }
 
+        
+        .settings-content {
 
+            flex: 1;
 
+            background: #f8fafc;
 
+            border-radius: 8px;
 
+            padding: 24px;
 
+        }
 
+        
+        .settings-section {
 
+            display: none;
 
+        }
 
+        
+        .settings-section.active {
 
+            display: block;
 
+        }
 
+        
+        .settings-item {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            padding: 16px 0;
 
+            border-bottom: 1px solid #e2e8f0;
 
+        }
 
+        
+        .settings-item:last-child {
 
+            border-bottom: none;
 
+        }
 
+        
+        .settings-item-info h3 {
 
+            margin-bottom: 4px;
 
+        }
 
+        
+        .settings-item-info p {
 
+            color: #64748b;
 
+            font-size: 14px;
 
+        }
 
+        
+        .settings-item-action .switch {
 
+            position: relative;
 
+            display: inline-block;
 
+            width: 50px;
 
+            height: 24px;
 
+        }
 
+        
+        .settings-item-action .switch input {
 
+            opacity: 0;
 
+            width: 0;
 
+            height: 0;
 
+        }
 
+        
+        .settings-item-action .slider {
 
+            position: absolute;
 
+            cursor: pointer;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: #ccc;
 
+            transition: .4s;
 
+            border-radius: 24px;
 
+        }
 
+        
+        .settings-item-action .slider:before {
 
+            position: absolute;
 
+            content: "";
 
+            height: 16px;
 
+            width: 16px;
 
+            left: 4px;
 
+            bottom: 4px;
 
+            background-color: white;
 
+            transition: .4s;
 
+            border-radius: 50%;
 
+        }
 
+        
+        .settings-item-action input:checked + .slider {
 
+            background-color: var(--primary);
 
+        }
 
+        
+        .settings-item-action input:checked + .slider:before {
 
+            transform: translateX(26px);
 
+        }
 
+        
+        /* 图表容器 */
 
+        .chart-container {
 
+            width: 100%;
 
+            height: 400px;
 
+            margin-top: 24px;
 
+        }
 
+        
+        /* 模态框样式 */
 
+        .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;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+        }
 
+
 
+        .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);
 
+        }
 
+        
+        /* 日历样式 */
 
+        .calendar {
 
+            width: 100%;
 
+            border-collapse: collapse;
 
+            margin-top: 20px;
 
+        }
 
+        
+        .calendar th {
 
+            padding: 12px;
 
+            text-align: center;
 
+            background: #f1f5f9;
 
+            font-weight: 500;
 
+        }
 
+        
+        .calendar td {
 
+            padding: 12px;
 
+            height: 100px;
 
+            vertical-align: top;
 
+            border: 1px solid #e2e8f0;
 
+        }
 
+        
+        .calendar-day {
 
+            font-weight: 500;
 
+            margin-bottom: 6px;
 
+        }
 
+        
+        .calendar-event {
 
+            background: #e0f2fe;
 
+            color: var(--primary);
 
+            padding: 4px 8px;
 
+            border-radius: 4px;
 
+            font-size: 12px;
 
+            margin-bottom: 4px;
 
+            cursor: pointer;
 
+        }
 
+        
+        /* 搜索历史 */
 
+        .search-history {
 
+            margin-top: 20px;
 
+        }
 
+        
+        .history-title {
 
+            font-size: 16px;
 
+            font-weight: 500;
 
+            margin-bottom: 12px;
 
+            color: var(--dark);
 
+        }
 
+        
+        .history-tags {
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            gap: 8px;
 
+        }
 
+        
+        .history-tag {
 
+            background: #f1f5f9;
 
+            padding: 6px 12px;
 
+            border-radius: 16px;
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .history-tag:hover {
 
+            background: #e2e8f0;
 
+        }
 
+        
+        /* 热门搜索 */
 
+        .hot-search {
 
+            margin-top: 24px;
 
+        }
 
+        
+        .hot-item {
 
+            display: flex;
 
+            align-items: center;
 
+            padding: 10px 0;
 
+            border-bottom: 1px solid #e2e8f0;
 
+        }
 
+        
+        .hot-rank {
 
+            width: 24px;
 
+            height: 24px;
 
+            background: #f1f5f9;
 
+            border-radius: 4px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-right: 12px;
 
+            font-size: 14px;
 
+        }
 
+        
+        .hot-item:nth-child(1) .hot-rank {
 
+            background: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        .hot-item:nth-child(2) .hot-rank {
 
+            background: #ffedd5;
 
+            color: #c2410c;
 
+        }
 
+        
+        .hot-item:nth-child(3) .hot-rank {
 
+            background: #fef3c7;
 
+            color: #b45309;
 
+        }
 
+        
+        .hot-content {
 
+            flex: 1;
 
+        }
 
+        
+        .hot-count {
 
+            color: #64748b;
 
+            font-size: 14px;
 
+        }
 
+        
+        /* 响应式设计 */
 
+        @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;
 
+            }
 
+            
+            .profile-container, .settings-container {
 
+                flex-direction: column;
 
+            }
 
+            
+            .profile-sidebar, .settings-sidebar {
 
+                width: 100%;
 
+            }
 
+            
+            .profile-header {
 
+                flex-direction: column;
 
+                text-align: center;
 
+            }
 
+            
+            .filter-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 btn-block" 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 btn-block" 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 btn-block" 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 btn-block" 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 btn-block" 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 class="nav-item" id="navCandidateProfile">
 
+                    <i class="fas fa-user"></i>
 
+                    <span>个人中心</span>
 
+                </div>
 
+                <div class="nav-item" id="navCandidateSettings">
 
+                    <i class="fas fa-cog"></i>
 
+                    <span>系统设置</span>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 主内容区 -->
 
+        <div class="main-content">
 
+            <!-- 顶部信息栏 -->
 
+            <div class="header">
 
+                <div class="search-bar">
 
+                    <input type="text" class="search-input" placeholder="搜索工作职位、公司..." id="candidateSearchInput">
 
+                    <button class="search-btn" id="candidateSearchBtn">
 
+                        <i class="fas fa-search"></i>
 
+                    </button>
 
+                    <span class="search-advanced" id="candidateAdvancedSearch">高级筛选</span>
 
+                </div>
 
+                <div class="search-filters" id="candidateSearchFilters">
 
+                    <div class="filter-row">
 
+                        <div class="filter-group">
 
+                            <label for="jobTypeFilter">职位类型</label>
 
+                            <select id="jobTypeFilter" class="filter-select">
 
+                                <option value="">全部</option>
 
+                                <option value="fulltime">全职</option>
 
+                                <option value="parttime">兼职</option>
 
+                                <option value="intern">实习</option>
 
+                            </select>
 
+                        </div>
 
+                        <div class="filter-group">
 
+                            <label for="jobLocationFilter">工作地点</label>
 
+                            <select id="jobLocationFilter" class="filter-select">
 
+                                <option value="">全部</option>
 
+                                <option value="beijing">北京</option>
 
+                                <option value="shanghai">上海</option>
 
+                                <option value="guangzhou">广州</option>
 
+                                <option value="shenzhen">深圳</option>
 
+                            </select>
 
+                        </div>
 
+                    </div>
 
+                    <div class="filter-row">
 
+                        <div class="filter-group">
 
+                            <label for="jobSalaryFilter">薪资范围</label>
 
+                            <select id="jobSalaryFilter" class="filter-select">
 
+                                <option value="">全部</option>
 
+                                <option value="10k">10k以下</option>
 
+                                <option value="10-20k">10-20k</option>
 
+                                <option value="20-30k">20-30k</option>
 
+                                <option value="30k+">30k以上</option>
 
+                            </select>
 
+                        </div>
 
+                        <div class="filter-group">
 
+                            <label for="jobExperienceFilter">经验要求</label>
 
+                            <select id="jobExperienceFilter" class="filter-select">
 
+                                <option value="">全部</option>
 
+                                <option value="1">1年以下</option>
 
+                                <option value="1-3">1-3年</option>
 
+                                <option value="3-5">3-5年</option>
 
+                                <option value="5+">5年以上</option>
 
+                            </select>
 
+                        </div>
 
+                    </div>
 
+                    <div class="filter-actions">
 
+                        <button class="btn" id="resetFilters">重置</button>
 
+                        <button class="btn btn-primary" id="applyFilters">应用筛选</button>
 
+                    </div>
 
+                </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" id="dropdownProfile">
 
+                                <i class="fas fa-user"></i> 个人中心
 
+                            </div>
 
+                            <div class="dropdown-item" id="dropdownSettings">
 
+                                <i class="fas fa-cog"></i> 系统设置
 
+                            </div>
 
+                            <div class="dropdown-divider"></div>
 
+                            <div class="dropdown-item" id="dropdownLogout">
 
+                                <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="search-history">
 
+                    <div class="history-title">搜索历史</div>
 
+                    <div class="history-tags" id="searchHistoryTags">
 
+                        <span class="history-tag">前端开发</span>
 
+                        <span class="history-tag">北京</span>
 
+                        <span class="history-tag">20k以上</span>
 
+                        <span class="history-tag">互联网</span>
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 热门搜索 -->
 
+                <div class="hot-search">
 
+                    <div class="history-title">热门搜索</div>
 
+                    <div id="hotSearchList">
 
+                        <div class="hot-item">
 
+                            <div class="hot-rank">1</div>
 
+                            <div class="hot-content">Java开发工程师</div>
 
+                            <div class="hot-count">1.2万次</div>
 
+                        </div>
 
+                        <div class="hot-item">
 
+                            <div class="hot-rank">2</div>
 
+                            <div class="hot-content">产品经理</div>
 
+                            <div class="hot-count">9800次</div>
 
+                        </div>
 
+                        <div class="hot-item">
 
+                            <div class="hot-rank">3</div>
 
+                            <div class="hot-content">UI设计师</div>
 
+                            <div class="hot-count">8500次</div>
 
+                        </div>
 
+                        <div class="hot-item">
 
+                            <div class="hot-rank">4</div>
 
+                            <div class="hot-content">数据分析师</div>
 
+                            <div class="hot-count">7200次</div>
 
+                        </div>
 
+                    </div>
 
+                </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="请输入您的姓名" value="张伟">
 
+                            </div>
 
+                            <div class="form-col">
 
+                                <label for="resumeGender">性别</label>
 
+                                <select id="resumeGender" class="form-control">
 
+                                    <option value="male" selected>男</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" value="1990-05-15">
 
+                            </div>
 
+                            <div class="form-col">
 
+                                <label for="resumePhone">联系电话</label>
 
+                                <input type="tel" id="resumePhone" class="form-control" placeholder="请输入联系电话" value="13800138000">
 
+                            </div>
 
+                        </div>
 
+                        <div class="form-row">
 
+                            <div class="form-col">
 
+                                <label for="resumeEmail">电子邮箱</label>
 
+                                <input type="email" id="resumeEmail" class="form-control" placeholder="请输入电子邮箱" value="zhangwei@example.com">
 
+                            </div>
 
+                            <div class="form-col">
 
+                                <label for="resumeLocation">居住地</label>
 
+                                <input type="text" id="resumeLocation" class="form-control" placeholder="请输入居住城市" value="北京">
 
+                            </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="请输入学校名称" value="北京大学">
 
+                            </div>
 
+                            <div class="form-col">
 
+                                <label for="resumeDegree">学历</label>
 
+                                <select id="resumeDegree" class="form-control">
 
+                                    <option value="bachelor" selected>本科</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="请输入所学专业" value="计算机科学与技术">
 
+                            </div>
 
+                            <div class="form-col">
 
+                                <label for="resumeGraduation">毕业时间</label>
 
+                                <input type="date" id="resumeGraduation" class="form-control" value="2012-06-30">
 
+                            </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, 项目管理" value="JavaScript, HTML5, CSS3, Vue.js, React, Node.js, 项目管理">
 
+                        </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 class="chart-container" id="matchChart"></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 class="calendar-container">
 
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
 
+                        <h3>2023年11月</h3>
 
+                        <div>
 
+                            <button class="btn" id="prevMonth">
 
+                                <i class="fas fa-chevron-left"></i>
 
+                            </button>
 
+                            <button class="btn" id="nextMonth">
 
+                                <i class="fas fa-chevron-right"></i>
 
+                            </button>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <table class="calendar">
 
+                        <thead>
 
+                            <tr>
 
+                                <th>日</th>
 
+                                <th>一</th>
 
+                                <th>二</th>
 
+                                <th>三</th>
 
+                                <th>四</th>
 
+                                <th>五</th>
 
+                                <th>六</th>
 
+                            </tr>
 
+                        </thead>
 
+                        <tbody id="calendarBody">
 
+                            <!-- 日历内容将通过JS动态生成 -->
 
+                        </tbody>
 
+                    </table>
 
+                </div>
 
+                
+                <div style="margin-top: 30px;">
 
+                    <h3 style="margin-bottom: 16px;">面试安排</h3>
 
+                    <div class="card">
 
+                        <div class="card-header">
 
+                            <div class="card-avatar">X</div>
 
+                            <div>
 
+                                <div class="card-title">前端开发工程师面试</div>
 
+                                <div class="card-subtitle">XX科技公司 · 2023-11-15 14:00</div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="card-tags">
 
+                            <span class="card-tag">视频面试</span>
 
+                            <span class="card-tag">技术面试</span>
 
+                        </div>
 
+                        <div class="card-footer">
 
+                            <span>面试官: 李经理</span>
 
+                            <button class="card-btn">进入面试</button>
 
+                        </div>
 
+                    </div>
 
+                </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 class="card-grid">
 
+                    <div class="card">
 
+                        <div class="card-header">
 
+                            <div class="card-avatar">X</div>
 
+                            <div>
 
+                                <div class="card-title">前端开发工程师</div>
 
+                                <div class="card-subtitle">XX科技公司 · 2023-10-20</div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="card-tags">
 
+                            <span class="card-tag">技术面试</span>
 
+                            <span class="card-tag">通过</span>
 
+                        </div>
 
+                        <div class="card-footer">
 
+                            <span>面试官: 王总监</span>
 
+                            <button class="card-btn">查看反馈</button>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="card">
 
+                        <div class="card-header">
 
+                            <div class="card-avatar">Y</div>
 
+                            <div>
 
+                                <div class="card-title">高级前端开发</div>
 
+                                <div class="card-subtitle">YY互联网公司 · 2023-09-15</div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="card-tags">
 
+                            <span class="card-tag">技术面试</span>
 
+                            <span class="card-tag">未通过</span>
 
+                        </div>
 
+                        <div class="card-footer">
 
+                            <span>评分: 4.5/5</span>
 
+                            <button class="card-btn">查看反馈</button>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 个人中心页面 -->
 
+            <div class="content-area" id="candidateProfilePage" style="display: none;">
 
+                <div class="content-title">
 
+                    <i class="fas fa-user"></i>
 
+                    <span>个人中心</span>
 
+                </div>
 
+                
+                <div class="profile-container">
 
+                    <div class="profile-sidebar">
 
+                        <div class="profile-menu">
 
+                            <div class="profile-menu-item active" data-section="basicInfo">基本信息</div>
 
+                            <div class="profile-menu-item" data-section="education">教育背景</div>
 
+                            <div class="profile-menu-item" data-section="experience">工作经历</div>
 
+                            <div class="profile-menu-item" data-section="security">账户安全</div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="profile-content">
 
+                        <!-- 基本信息 -->
 
+                        <div class="profile-section active" id="basicInfoSection">
 
+                            <div class="profile-header">
 
+                                <div class="profile-avatar">张</div>
 
+                                <div class="profile-info">
 
+                                    <h2>张伟</h2>
 
+                                    <p>前端开发工程师 | 5年经验</p>
 
+                                    <button class="btn" style="margin-top: 10px;">
 
+                                        <i class="fas fa-camera"></i> 更换头像
 
+                                    </button>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="profile-form">
 
+                                <div class="form-group">
 
+                                    <label for="profileName">姓名</label>
 
+                                    <input type="text" id="profileName" class="form-control" value="张伟">
 
+                                </div>
 
+                                
+                                <div class="form-row">
 
+                                    <div class="form-col">
 
+                                        <label for="profileGender">性别</label>
 
+                                        <select id="profileGender" class="form-control">
 
+                                            <option value="male" selected>男</option>
 
+                                            <option value="female">女</option>
 
+                                            <option value="other">其他</option>
 
+                                        </select>
 
+                                    </div>
 
+                                    <div class="form-col">
 
+                                        <label for="profileBirth">出生日期</label>
 
+                                        <input type="date" id="profileBirth" class="form-control" value="1990-05-15">
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="profilePhone">联系电话</label>
 
+                                    <input type="tel" id="profilePhone" class="form-control" value="13800138000">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="profileEmail">电子邮箱</label>
 
+                                    <input type="email" id="profileEmail" class="form-control" value="zhangwei@example.com">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="profileLocation">居住地</label>
 
+                                    <input type="text" id="profileLocation" class="form-control" value="北京市朝阳区">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="profileBio">个人简介</label>
 
+                                    <textarea id="profileBio" class="form-control" rows="4">5年前端开发经验，精通Vue.js和React框架，有丰富的项目管理和团队协作经验。</textarea>
 
+                                </div>
 
+                                
+                                <div class="form-actions">
 
+                                    <button class="btn">取消</button>
 
+                                    <button class="btn btn-primary">保存更改</button>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 教育背景 -->
 
+                        <div class="profile-section" id="educationSection">
 
+                            <h2 style="margin-bottom: 20px;">教育背景</h2>
 
+                            
+                            <div class="form-section">
 
+                                <div class="form-row">
 
+                                    <div class="form-col">
 
+                                        <label for="eduSchool">学校名称</label>
 
+                                        <input type="text" id="eduSchool" class="form-control" value="北京大学">
 
+                                    </div>
 
+                                    <div class="form-col">
 
+                                        <label for="eduDegree">学历</label>
 
+                                        <select id="eduDegree" class="form-control">
 
+                                            <option value="bachelor" selected>本科</option>
 
+                                            <option value="master">硕士</option>
 
+                                            <option value="phd">博士</option>
 
+                                        </select>
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <div class="form-row">
 
+                                    <div class="form-col">
 
+                                        <label for="eduMajor">专业</label>
 
+                                        <input type="text" id="eduMajor" class="form-control" value="计算机科学与技术">
 
+                                    </div>
 
+                                    <div class="form-col">
 
+                                        <label for="eduGraduation">毕业时间</label>
 
+                                        <input type="date" id="eduGraduation" class="form-control" value="2012-06-30">
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <div class="form-actions">
 
+                                    <button class="btn">取消</button>
 
+                                    <button class="btn btn-primary">保存更改</button>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 工作经历 -->
 
+                        <div class="profile-section" id="experienceSection">
 
+                            <h2 style="margin-bottom: 20px;">工作经历</h2>
 
+                            
+                            <div class="form-section">
 
+                                <div class="form-row">
 
+                                    <div class="form-col">
 
+                                        <label for="expCompany">公司名称</label>
 
+                                        <input type="text" id="expCompany" class="form-control" value="AA科技有限公司">
 
+                                    </div>
 
+                                    <div class="form-col">
 
+                                        <label for="expPosition">职位</label>
 
+                                        <input type="text" id="expPosition" class="form-control" value="高级前端开发工程师">
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <div class="form-row">
 
+                                    <div class="form-col">
 
+                                        <label for="expStart">开始时间</label>
 
+                                        <input type="date" id="expStart" class="form-control" value="2018-03-01">
 
+                                    </div>
 
+                                    <div class="form-col">
 
+                                        <label for="expEnd">结束时间</label>
 
+                                        <input type="date" id="expEnd" class="form-control" value="2023-05-31">
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="expDescription">工作描述</label>
 
+                                    <textarea id="expDescription" class="form-control" rows="4">负责公司核心产品的前端架构设计和开发，带领3人前端团队，使用Vue.js和React技术栈。</textarea>
 
+                                </div>
 
+                                
+                                <button class="btn" style="margin-top: 10px;">
 
+                                    <i class="fas fa-plus"></i> 添加工作经历
 
+                                </button>
 
+                                
+                                <div class="form-actions">
 
+                                    <button class="btn">取消</button>
 
+                                    <button class="btn btn-primary">保存更改</button>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 账户安全 -->
 
+                        <div class="profile-section" id="securitySection">
 
+                            <h2 style="margin-bottom: 20px;">账户安全</h2>
 
+                            
+                            <div class="form-section">
 
+                                <div class="form-group">
 
+                                    <label for="currentPassword">当前密码</label>
 
+                                    <input type="password" id="currentPassword" class="form-control" placeholder="请输入当前密码">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="newPassword">新密码</label>
 
+                                    <input type="password" id="newPassword" class="form-control" placeholder="请输入新密码">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="confirmPassword">确认新密码</label>
 
+                                    <input type="password" id="confirmPassword" class="form-control" placeholder="请再次输入新密码">
 
+                                </div>
 
+                                
+                                <div class="form-actions">
 
+                                    <button class="btn">取消</button>
 
+                                    <button class="btn btn-primary">更改密码</button>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="form-section" style="margin-top: 30px;">
 
+                                <div class="form-section-title">
 
+                                    <i class="fas fa-shield-alt"></i>
 
+                                    <span>安全设置</span>
 
+                                </div>
 
+                                
+                                <div class="settings-item">
 
+                                    <div class="settings-item-info">
 
+                                        <h3>双重验证</h3>
 
+                                        <p>为您的账户增加额外的安全层</p>
 
+                                    </div>
 
+                                    <div class="settings-item-action">
 
+                                        <label class="switch">
 
+                                            <input type="checkbox">
 
+                                            <span class="slider"></span>
 
+                                        </label>
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <div class="settings-item">
 
+                                    <div class="settings-item-info">
 
+                                        <h3>登录提醒</h3>
 
+                                        <p>当账户在新设备登录时发送通知</p>
 
+                                    </div>
 
+                                    <div class="settings-item-action">
 
+                                        <label class="switch">
 
+                                            <input type="checkbox" checked>
 
+                                            <span class="slider"></span>
 
+                                        </label>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 系统设置页面 -->
 
+            <div class="content-area" id="candidateSettingsPage" style="display: none;">
 
+                <div class="content-title">
 
+                    <i class="fas fa-cog"></i>
 
+                    <span>系统设置</span>
 
+                </div>
 
+                
+                <div class="settings-container">
 
+                    <div class="settings-sidebar">
 
+                        <div class="settings-menu">
 
+                            <div class="settings-menu-item active" data-section="notificationSettings">通知设置</div>
 
+                            <div class="settings-menu-item" data-section="privacySettings">隐私设置</div>
 
+                            <div class="settings-menu-item" data-section="appearanceSettings">外观设置</div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="settings-content">
 
+                        <!-- 通知设置 -->
 
+                        <div class="settings-section active" id="notificationSettings">
 
+                            <h2 style="margin-bottom: 20px;">通知设置</h2>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>职位推荐</h3>
 
+                                    <p>接收系统推荐的匹配职位通知</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>面试邀请</h3>
 
+                                    <p>接收企业发送的面试邀请通知</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>系统消息</h3>
 
+                                    <p>接收系统更新和维护通知</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>营销信息</h3>
 
+                                    <p>接收合作伙伴的优惠和活动信息</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox">
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="form-group" style="margin-top: 30px;">
 
+                                <label for="notificationEmail">通知邮箱</label>
 
+                                <input type="email" id="notificationEmail" class="form-control" value="zhangwei@example.com">
 
+                            </div>
 
+                            
+                            <div class="form-actions">
 
+                                <button class="btn">取消</button>
 
+                                <button class="btn btn-primary">保存设置</button>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 隐私设置 -->
 
+                        <div class="settings-section" id="privacySettings">
 
+                            <h2 style="margin-bottom: 20px;">隐私设置</h2>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>公开简历</h3>
 
+                                    <p>允许企业搜索和查看您的简历</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>联系方式可见</h3>
 
+                                    <p>允许企业查看您的联系方式</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox">
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>个性化推荐</h3>
 
+                                    <p>根据您的浏览记录推荐职位</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="form-group" style="margin-top: 30px;">
 
+                                <label for="privacyLevel">隐私级别</label>
 
+                                <select id="privacyLevel" class="form-control">
 
+                                    <option value="high">高 - 仅对申请的企业可见</option>
 
+                                    <option value="medium" selected>中 - 对所有认证企业可见</option>
 
+                                    <option value="low">低 - 对所有用户可见</option>
 
+                                </select>
 
+                            </div>
 
+                            
+                            <div class="form-actions">
 
+                                <button class="btn">取消</button>
 
+                                <button class="btn btn-primary">保存设置</button>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 外观设置 -->
 
+                        <div class="settings-section" id="appearanceSettings">
 
+                            <h2 style="margin-bottom: 20px;">外观设置</h2>
 
+                            
+                            <div class="form-group">
 
+                                <label for="themeSelect">主题颜色</label>
 
+                                <select id="themeSelect" class="form-control">
 
+                                    <option value="light" selected>浅色主题</option>
 
+                                    <option value="dark">深色主题</option>
 
+                                    <option value="system">跟随系统</option>
 
+                                </select>
 
+                            </div>
 
+                            
+                            <div class="form-group">
 
+                                <label for="fontSize">字体大小</label>
 
+                                <select id="fontSize" class="form-control">
 
+                                    <option value="small">小</option>
 
+                                    <option value="medium" selected>中</option>
 
+                                    <option value="large">大</option>
 
+                                </select>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>动画效果</h3>
 
+                                    <p>启用界面过渡动画</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="form-actions">
 
+                                <button class="btn">取消</button>
 
+                                <button class="btn btn-primary">保存设置</button>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </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 class="nav-item" id="navRecruiterProfile">
 
+                    <i class="fas fa-user"></i>
 
+                    <span>个人中心</span>
 
+                </div>
 
+                <div class="nav-item" id="navRecruiterSettings">
 
+                    <i class="fas fa-cog"></i>
 
+                    <span>系统设置</span>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 主内容区 -->
 
+        <div class="main-content">
 
+            <!-- 顶部信息栏 -->
 
+            <div class="header">
 
+                <div class="search-bar">
 
+                    <input type="text" class="search-input" placeholder="搜索候选人姓名、技能..." id="recruiterSearchInput">
 
+                    <button class="search-btn" id="recruiterSearchBtn">
 
+                        <i class="fas fa-search"></i>
 
+                    </button>
 
+                    <span class="search-advanced" id="recruiterAdvancedSearch">高级筛选</span>
 
+                </div>
 
+                <div class="search-filters" id="recruiterSearchFilters">
 
+                    <div class="filter-row">
 
+                        <div class="filter-group">
 
+                            <label for="candidateLocationFilter">期望地点</label>
 
+                            <select id="candidateLocationFilter" class="filter-select">
 
+                                <option value="">全部</option>
 
+                                <option value="beijing">北京</option>
 
+                                <option value="shanghai">上海</option>
 
+                                <option value="guangzhou">广州</option>
 
+                                <option value="shenzhen">深圳</option>
 
+                                <option value="remote">远程</option>
 
+                            </select>
 
+                        </div>
 
+                        <div class="filter-group">
 
+                            <label for="candidateExperienceFilter">工作经验</label>
 
+                            <select id="candidateExperienceFilter" class="filter-select">
 
+                                <option value="">全部</option>
 
+                                <option value="1">1年以下</option>
 
+                                <option value="1-3">1-3年</option>
 
+                                <option value="3-5">3-5年</option>
 
+                                <option value="5+">5年以上</option>
 
+                            </select>
 
+                        </div>
 
+                    </div>
 
+                    <div class="filter-row">
 
+                        <div class="filter-group">
 
+                            <label for="candidateEducationFilter">学历要求</label>
 
+                            <select id="candidateEducationFilter" class="filter-select">
 
+                                <option value="">全部</option>
 
+                                <option value="college">大专</option>
 
+                                <option value="bachelor">本科</option>
 
+                                <option value="master">硕士</option>
 
+                                <option value="phd">博士</option>
 
+                            </select>
 
+                        </div>
 
+                        <div class="filter-group">
 
+                            <label for="candidateSalaryFilter">期望薪资</label>
 
+                            <select id="candidateSalaryFilter" class="filter-select">
 
+                                <option value="">全部</option>
 
+                                <option value="10k">10k以下</option>
 
+                                <option value="10-20k">10-20k</option>
 
+                                <option value="20-30k">20-30k</option>
 
+                                <option value="30k+">30k以上</option>
 
+                            </select>
 
+                        </div>
 
+                    </div>
 
+                    <div class="filter-actions">
 
+                        <button class="btn" id="resetRecruiterFilters">重置</button>
 
+                        <button class="btn btn-primary" id="applyRecruiterFilters">应用筛选</button>
 
+                    </div>
 
+                </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" id="dropdownRecruiterProfile">
 
+                                <i class="fas fa-user"></i> 个人中心
 
+                            </div>
 
+                            <div class="dropdown-item" id="dropdownRecruiterSettings">
 
+                                <i class="fas fa-cog"></i> 系统设置
 
+                            </div>
 
+                            <div class="dropdown-divider"></div>
 
+                            <div class="dropdown-item" id="dropdownRecruiterLogout">
 
+                                <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="search-history">
 
+                    <div class="history-title">搜索历史</div>
 
+                    <div class="history-tags" id="recruiterSearchHistoryTags">
 
+                        <span class="history-tag">前端开发</span>
 
+                        <span class="history-tag">3-5年经验</span>
 
+                        <span class="history-tag">本科</span>
 
+                        <span class="history-tag">北京</span>
 
+                    </div>
 
+                </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="display: flex; gap: 20px;">
 
+                    <div style="flex: 1;">
 
+                        <div class="card">
 
+                            <div class="card-header">
 
+                                <div class="card-avatar">张</div>
 
+                                <div>
 
+                                    <div class="card-title">张伟</div>
 
+                                    <div class="card-subtitle">前端开发工程师 · 5年经验</div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="card-tags">
 
+                                <span class="card-tag">JavaScript</span>
 
+                                <span class="card-tag">Vue.js</span>
 
+                                <span class="card-tag">React</span>
 
+                                <span class="card-tag">+5</span>
 
+                            </div>
 
+                            <div class="card-footer">
 
+                                <span class="card-match">匹配度: 88%</span>
 
+                                <button class="card-btn">邀请面试</button>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <div class="form-section" style="margin-top: 20px;">
 
+                            <div class="form-section-title">
 
+                                <i class="fas fa-star"></i>
 
+                                <span>AI分析评价</span>
 
+                            </div>
 
+                            <div style="padding: 12px; background: #f8fafc; border-radius: 8px;">
 
+                                <p>候选人技术栈与职位要求高度匹配，尤其在Vue.js和React方面有丰富经验。具备5年开发经验，主导过多个大型项目，团队协作能力强。教育背景优秀，毕业于北京大学计算机专业。建议重点关注。</p>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div style="flex: 2;">
 
+                        <div class="form-section">
 
+                            <div class="form-section-title">
 
+                                <i class="fas fa-user"></i>
 
+                                <span>基本信息</span>
 
+                            </div>
 
+                            <div style="display: flex; gap: 20px; margin-bottom: 16px;">
 
+                                <div>
 
+                                    <div style="font-size: 14px; color: #64748b;">姓名</div>
 
+                                    <div style="font-weight: 500;">张伟</div>
 
+                                </div>
 
+                                <div>
 
+                                    <div style="font-size: 14px; color: #64748b;">性别</div>
 
+                                    <div style="font-weight: 500;">男</div>
 
+                                </div>
 
+                                <div>
 
+                                    <div style="font-size: 14px; color: #64748b;">年龄</div>
 
+                                    <div style="font-weight: 500;">33</div>
 
+                                </div>
 
+                                <div>
 
+                                    <div style="font-size: 14px; color: #64748b;">电话</div>
 
+                                    <div style="font-weight: 500;">138****8000</div>
 
+                                </div>
 
+                                <div>
 
+                                    <div style="font-size: 14px; color: #64748b;">邮箱</div>
 
+                                    <div style="font-weight: 500;">zhangwei@example.com</div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <div class="form-section">
 
+                            <div class="form-section-title">
 
+                                <i class="fas fa-graduation-cap"></i>
 
+                                <span>教育背景</span>
 
+                            </div>
 
+                            <div style="margin-bottom: 16px;">
 
+                                <div style="font-weight: 500; margin-bottom: 4px;">北京大学</div>
 
+                                <div style="color: #64748b; margin-bottom: 4px;">计算机科学与技术 · 本科 · 2008-2012</div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <div class="form-section">
 
+                            <div class="form-section-title">
 
+                                <i class="fas fa-briefcase"></i>
 
+                                <span>工作经历</span>
 
+                            </div>
 
+                            <div style="margin-bottom: 16px;">
 
+                                <div style="font-weight: 500; margin-bottom: 4px;">AA科技有限公司 · 高级前端开发工程师</div>
 
+                                <div style="color: #64748b; margin-bottom: 4px;">2018-2023 · 5年</div>
 
+                                <div style="margin-top: 8px;">
 
+                                    <p>负责公司核心产品的规划与设计，主导产品从0到1的开发...</p>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <div class="form-section">
 
+                            <div class="form-section-title">
 
+                                <i class="fas fa-project-diagram"></i>
 
+                                <span>项目经验</span>
 
+                            </div>
 
+                            <div style="margin-bottom: 16px;">
 
+                                <div style="font-weight: 500; margin-bottom: 4px;">XX电商平台重构</div>
 
+                                <div style="color: #64748b; margin-bottom: 4px;">2021-2022 · 项目负责人</div>
 
+                                <div style="margin-top: 8px;">
 
+                                    <p>主导公司电商平台前端重构，采用Vue3 + TypeScript技术栈，实现组件化开发，页面加载速度提升35%。</p>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <div class="form-section">
 
+                            <div class="form-section-title">
 
+                                <i class="fas fa-star"></i>
 
+                                <span>技能专长</span>
 
+                            </div>
 
+                            <div class="card-tags" style="margin-top: 12px;">
 
+                                <span class="card-tag">JavaScript</span>
 
+                                <span class="card-tag">HTML5</span>
 
+                                <span class="card-tag">CSS3</span>
 
+                                <span class="card-tag">Vue.js</span>
 
+                                <span class="card-tag">React</span>
 
+                                <span class="card-tag">Node.js</span>
 
+                                <span class="card-tag">Webpack</span>
 
+                                <span class="card-tag">Git</span>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </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="display: flex; gap: 20px;">
 
+                    <div style="flex: 1;">
 
+                        <div class="card">
 
+                            <div class="card-header">
 
+                                <div class="card-avatar">张</div>
 
+                                <div>
 
+                                    <div class="card-title">张伟</div>
 
+                                    <div class="card-subtitle">前端开发工程师 · 5年经验</div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="card-tags">
 
+                                <span class="card-tag">JavaScript</span>
 
+                                <span class="card-tag">Vue.js</span>
 
+                                <span class="card-tag">React</span>
 
+                            </div>
 
+                            <div class="card-footer">
 
+                                <span>匹配度: 88%</span>
 
+                                <button class="card-btn">查看简历</button>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <div style="margin-top: 20px;">
 
+                            <h3 style="margin-bottom: 16px;">面试信息</h3>
 
+                            <div class="form-group">
 
+                                <label for="interviewDate">面试日期</label>
 
+                                <input type="date" id="interviewDate" class="form-control" value="2023-11-15">
 
+                            </div>
 
+                            <div class="form-group">
 
+                                <label for="interviewTime">面试时间</label>
 
+                                <input type="time" id="interviewTime" class="form-control" value="14:00">
 
+                            </div>
 
+                            <div class="form-group">
 
+                                <label for="interviewDuration">持续时间</label>
 
+                                <select id="interviewDuration" class="form-control">
 
+                                    <option value="30">30分钟</option>
 
+                                    <option value="60" selected>60分钟</option>
 
+                                    <option value="90">90分钟</option>
 
+                                </select>
 
+                            </div>
 
+                            <div class="form-group">
 
+                                <label for="interviewType">面试类型</label>
 
+                                <select id="interviewType" class="form-control">
 
+                                    <option value="technical" selected>技术面试</option>
 
+                                    <option value="hr">HR面试</option>
 
+                                    <option value="manager">经理面试</option>
 
+                                </select>
 
+                            </div>
 
+                            <div class="form-group">
 
+                                <label for="interviewer">面试官</label>
 
+                                <input type="text" id="interviewer" class="form-control" value="李明">
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div style="flex: 2;">
 
+                        <div style="background: #f8fafc; border-radius: 8px; padding: 20px; height: 100%;">
 
+                            <div style="text-align: center; margin-bottom: 20px;">
 
+                                <h3>视频面试预览</h3>
 
+                                <p style="color: #64748b;">面试开始后将显示视频画面</p>
 
+                            </div>
 
+                            
+                            <div style="background: #e2e8f0; height: 300px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
 
+                                <i class="fas fa-video" style="font-size: 60px; color: #94a3b8;"></i>
 
+                            </div>
 
+                            
+                            <div style="display: flex; justify-content: center; gap: 20px;">
 
+                                <button class="btn btn-primary" id="startInterviewBtn">
 
+                                    <i class="fas fa-video"></i> 开始面试
 
+                                </button>
 
+                                <button class="btn">
 
+                                    <i class="fas fa-comment"></i> 发送消息
 
+                                </button>
 
+                                <button class="btn btn-danger">
 
+                                    <i class="fas fa-phone-slash"></i> 结束面试
 
+                                </button>
 
+                            </div>
 
+                            
+                            <div style="margin-top: 30px;">
 
+                                <h3 style="margin-bottom: 16px;">面试评价</h3>
 
+                                <div class="form-group">
 
+                                    <label for="interviewScore">综合评分</label>
 
+                                    <select id="interviewScore" class="form-control">
 
+                                        <option value="">请选择评分</option>
 
+                                        <option value="5">5分 - 非常优秀</option>
 
+                                        <option value="4">4分 - 良好</option>
 
+                                        <option value="3">3分 - 一般</option>
 
+                                        <option value="2">2分 - 较差</option>
 
+                                        <option value="1">1分 - 不符合</option>
 
+                                    </select>
 
+                                </div>
 
+                                <div class="form-group">
 
+                                    <label for="interviewNotes">面试记录</label>
 
+                                    <textarea id="interviewNotes" class="form-control" rows="5" placeholder="记录面试过程中的关键点和评价"></textarea>
 
+                                </div>
 
+                                <div class="form-actions">
 
+                                    <button class="btn">取消</button>
 
+                                    <button class="btn btn-primary">保存评价</button>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </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="display: flex; gap: 20px; margin-bottom: 20px;">
 
+                    <div style="flex: 1;">
 
+                        <div class="form-group">
 
+                            <label for="recordCandidate">候选人</label>
 
+                            <select id="recordCandidate" class="form-control">
 
+                                <option value="">全部候选人</option>
 
+                                <option value="1">张伟</option>
 
+                                <option value="2">李娜</option>
 
+                                <option value="3">王强</option>
 
+                            </select>
 
+                        </div>
 
+                    </div>
 
+                    <div style="flex: 1;">
 
+                        <div class="form-group">
 
+                            <label for="recordJob">职位</label>
 
+                            <select id="recordJob" class="form-control">
 
+                                <option value="">全部职位</option>
 
+                                <option value="1">前端开发工程师</option>
 
+                                <option value="2">UI设计师</option>
 
+                                <option value="3">产品经理</option>
 
+                            </select>
 
+                        </div>
 
+                    </div>
 
+                    <div style="flex: 1;">
 
+                        <div class="form-group">
 
+                            <label for="recordStatus">状态</label>
 
+                            <select id="recordStatus" class="form-control">
 
+                                <option value="">全部状态</option>
 
+                                <option value="passed">通过</option>
 
+                                <option value="failed">未通过</option>
 
+                                <option value="pending">待定</option>
 
+                            </select>
 
+                        </div>
 
+                    </div>
 
+                    <div style="flex: 1; display: flex; align-items: flex-end;">
 
+                        <button class="btn btn-primary" style="width: 100%;">
 
+                            <i class="fas fa-filter"></i> 筛选
 
+                        </button>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="card-grid">
 
+                    <div class="card">
 
+                        <div class="card-header">
 
+                            <div class="card-avatar">张</div>
 
+                            <div>
 
+                                <div class="card-title">张伟</div>
 
+                                <div class="card-subtitle">前端开发工程师 · 技术面试</div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="card-tags">
 
+                            <span class="card-tag">2023-10-20</span>
 
+                            <span class="card-tag">通过</span>
 
+                        </div>
 
+                        <div class="card-footer">
 
+                            <span>评分: 4.5/5</span>
 
+                            <button class="card-btn">查看详情</button>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="card">
 
+                        <div class="card-header">
 
+                            <div class="card-avatar">李</div>
 
+                            <div>
 
+                                <div class="card-title">李娜</div>
 
+                                <div class="card-subtitle">UI设计师 · 技术面试</div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="card-tags">
 
+                            <span class="card-tag">2023-10-18</span>
 
+                            <span class="card-tag">待定</span>
 
+                        </div>
 
+                        <div class="card-footer">
 
+                            <span>评分: 3.8/5</span>
 
+                            <button class="card-btn">查看详情</button>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="card">
 
+                        <div class="card-header">
 
+                            <div class="card-avatar">王</div>
 
+                            <div>
 
+                                <div class="card-title">王强</div>
 
+                                <div class="card-subtitle">前端开发工程师 · 技术面试</div>
 
+                            </div>
 
+                        </div>
 
+                        <div class="card-tags">
 
+                            <span class="card-tag">2023-10-15</span>
 
+                            <span class="card-tag">未通过</span>
 
+                        </div>
 
+                        <div class="card-footer">
 
+                            <span>评分: 2.5/5</span>
 
+                            <button class="card-btn">查看详情</button>
 
+                        </div>
 
+                    </div>
 
+                </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="display: flex; gap: 20px; margin-bottom: 20px;">
 
+                    <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
 
+                        <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">候选人总数</div>
 
+                        <div style="font-size: 24px; font-weight: 600;">128</div>
 
+                        <div style="font-size: 14px; color: #10b981; margin-top: 4px;">
 
+                            <i class="fas fa-arrow-up"></i> 12% 月增长
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
 
+                        <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">面试通过率</div>
 
+                        <div style="font-size: 24px; font-weight: 600;">38%</div>
 
+                        <div style="font-size: 14px; color: #10b981; margin-top: 4px;">
 
+                            <i class="fas fa-arrow-up"></i> 5% 月增长
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
 
+                        <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">平均招聘周期</div>
 
+                        <div style="font-size: 24px; font-weight: 600;">23天</div>
 
+                        <div style="font-size: 14px; color: #ef4444; margin-top: 4px;">
 
+                            <i class="fas fa-arrow-down"></i> 2天 月减少
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
 
+                        <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">职位空缺</div>
 
+                        <div style="font-size: 24px; font-weight: 600;">15</div>
 
+                        <div style="font-size: 14px; color: #ef4444; margin-top: 4px;">
 
+                            <i class="fas fa-arrow-up"></i> 3个 月增长
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                
+                <div style="display: flex; gap: 20px; margin-bottom: 20px;">
 
+                    <div style="flex: 1; background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
 
+                        <div style="font-weight: 500; margin-bottom: 16px;">候选人来源</div>
 
+                        <div class="chart-container" id="candidateSourceChart"></div>
 
+                    </div>
 
+                    
+                    <div style="flex: 1; background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
 
+                        <div style="font-weight: 500; margin-bottom: 16px;">职位申请趋势</div>
 
+                        <div class="chart-container" id="applicationTrendChart"></div>
 
+                    </div>
 
+                </div>
 
+                
+                <div style="background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
 
+                    <div style="font-weight: 500; margin-bottom: 16px;">技能分布</div>
 
+                    <div class="chart-container" id="skillDistributionChart"></div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 个人中心页面 -->
 
+            <div class="content-area" id="recruiterProfilePage" style="display: none;">
 
+                <div class="content-title">
 
+                    <i class="fas fa-user"></i>
 
+                    <span>个人中心</span>
 
+                </div>
 
+                
+                <div class="profile-container">
 
+                    <div class="profile-sidebar">
 
+                        <div class="profile-menu">
 
+                            <div class="profile-menu-item active" data-section="recruiterBasicInfo">基本信息</div>
 
+                            <div class="profile-menu-item" data-section="recruiterCompany">公司信息</div>
 
+                            <div class="profile-menu-item" data-section="recruiterSecurity">账户安全</div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="profile-content">
 
+                        <!-- 基本信息 -->
 
+                        <div class="profile-section active" id="recruiterBasicInfoSection">
 
+                            <div class="profile-header">
 
+                                <div class="profile-avatar">李</div>
 
+                                <div class="profile-info">
 
+                                    <h2>李明</h2>
 
+                                    <p>招聘经理 | XX科技公司</p>
 
+                                    <button class="btn" style="margin-top: 10px;">
 
+                                        <i class="fas fa-camera"></i> 更换头像
 
+                                    </button>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="profile-form">
 
+                                <div class="form-group">
 
+                                    <label for="recruiterName">姓名</label>
 
+                                    <input type="text" id="recruiterName" class="form-control" value="李明">
 
+                                </div>
 
+                                
+                                <div class="form-row">
 
+                                    <div class="form-col">
 
+                                        <label for="recruiterGender">性别</label>
 
+                                        <select id="recruiterGender" class="form-control">
 
+                                            <option value="male" selected>男</option>
 
+                                            <option value="female">女</option>
 
+                                            <option value="other">其他</option>
 
+                                        </select>
 
+                                    </div>
 
+                                    <div class="form-col">
 
+                                        <label for="recruiterBirth">出生日期</label>
 
+                                        <input type="date" id="recruiterBirth" class="form-control" value="1985-08-20">
 
+                                    </div>
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="recruiterPhone">联系电话</label>
 
+                                    <input type="tel" id="recruiterPhone" class="form-control" value="13900139000">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="recruiterEmail">电子邮箱</label>
 
+                                    <input type="email" id="recruiterEmail" class="form-control" value="liming@xxtech.com">
 
+                                </div>
 
+                                
+                                <div class="form-actions">
 
+                                    <button class="btn">取消</button>
 
+                                    <button class="btn btn-primary">保存更改</button>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 公司信息 -->
 
+                        <div class="profile-section" id="recruiterCompanySection">
 
+                            <h2 style="margin-bottom: 20px;">公司信息</h2>
 
+                            
+                            <div class="form-section">
 
+                                <div class="form-group">
 
+                                    <label for="companyName">公司名称</label>
 
+                                    <input type="text" id="companyName" class="form-control" value="XX科技有限公司">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="companyIndustry">所属行业</label>
 
+                                    <select id="companyIndustry" class="form-control">
 
+                                        <option value="internet" selected>互联网</option>
 
+                                        <option value="finance">金融</option>
 
+                                        <option value="education">教育</option>
 
+                                        <option value="manufacturing">制造业</option>
 
+                                    </select>
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="companySize">公司规模</label>
 
+                                    <select id="companySize" class="form-control">
 
+                                        <option value="1-50">1-50人</option>
 
+                                        <option value="50-200">50-200人</option>
 
+                                        <option value="200-500" selected>200-500人</option>
 
+                                        <option value="500+">500人以上</option>
 
+                                    </select>
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="companyLocation">公司地址</label>
 
+                                    <input type="text" id="companyLocation" class="form-control" value="北京市海淀区中关村软件园">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="companyWebsite">公司官网</label>
 
+                                    <input type="url" id="companyWebsite" class="form-control" value="https://www.xxtech.com">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="companyDescription">公司简介</label>
 
+                                    <textarea id="companyDescription" class="form-control" rows="4">XX科技有限公司成立于2010年，是一家专注于企业级软件开发的互联网公司，拥有多项自主知识产权和专利技术。</textarea>
 
+                                </div>
 
+                                
+                                <div class="form-actions">
 
+                                    <button class="btn">取消</button>
 
+                                    <button class="btn btn-primary">保存更改</button>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 账户安全 -->
 
+                        <div class="profile-section" id="recruiterSecuritySection">
 
+                            <h2 style="margin-bottom: 20px;">账户安全</h2>
 
+                            
+                            <div class="form-section">
 
+                                <div class="form-group">
 
+                                    <label for="recruiterCurrentPassword">当前密码</label>
 
+                                    <input type="password" id="recruiterCurrentPassword" class="form-control" placeholder="请输入当前密码">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="recruiterNewPassword">新密码</label>
 
+                                    <input type="password" id="recruiterNewPassword" class="form-control" placeholder="请输入新密码">
 
+                                </div>
 
+                                
+                                <div class="form-group">
 
+                                    <label for="recruiterConfirmPassword">确认新密码</label>
 
+                                    <input type="password" id="recruiterConfirmPassword" class="form-control" placeholder="请再次输入新密码">
 
+                                </div>
 
+                                
+                                <div class="form-actions">
 
+                                    <button class="btn">取消</button>
 
+                                    <button class="btn btn-primary">更改密码</button>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 系统设置页面 -->
 
+            <div class="content-area" id="recruiterSettingsPage" style="display: none;">
 
+                <div class="content-title">
 
+                    <i class="fas fa-cog"></i>
 
+                    <span>系统设置</span>
 
+                </div>
 
+                
+                <div class="settings-container">
 
+                    <div class="settings-sidebar">
 
+                        <div class="settings-menu">
 
+                            <div class="settings-menu-item active" data-section="recruiterNotificationSettings">通知设置</div>
 
+                            <div class="settings-menu-item" data-section="recruiterPrivacySettings">隐私设置</div>
 
+                            <div class="settings-menu-item" data-section="recruiterAppearanceSettings">外观设置</div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="settings-content">
 
+                        <!-- 通知设置 -->
 
+                        <div class="settings-section active" id="recruiterNotificationSettings">
 
+                            <h2 style="margin-bottom: 20px;">通知设置</h2>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>新候选人</h3>
 
+                                    <p>当有新的候选人申请职位时通知</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>面试提醒</h3>
 
+                                    <p>在面试开始前提醒</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>系统消息</h3>
 
+                                    <p>接收系统更新和维护通知</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="form-group" style="margin-top: 30px;">
 
+                                <label for="recruiterNotificationEmail">通知邮箱</label>
 
+                                <input type="email" id="recruiterNotificationEmail" class="form-control" value="liming@xxtech.com">
 
+                            </div>
 
+                            
+                            <div class="form-actions">
 
+                                <button class="btn">取消</button>
 
+                                <button class="btn btn-primary">保存设置</button>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 隐私设置 -->
 
+                        <div class="settings-section" id="recruiterPrivacySettings">
 
+                            <h2 style="margin-bottom: 20px;">隐私设置</h2>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>公开联系方式</h3>
 
+                                    <p>允许候选人查看您的联系方式</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox">
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>数据分析共享</h3>
 
+                                    <p>允许系统使用您的招聘数据进行分析</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="form-group" style="margin-top: 30px;">
 
+                                <label for="recruiterPrivacyLevel">隐私级别</label>
 
+                                <select id="recruiterPrivacyLevel" class="form-control">
 
+                                    <option value="high">高 - 仅对候选人可见</option>
 
+                                    <option value="medium" selected>中 - 对所有认证用户可见</option>
 
+                                    <option value="low">低 - 公开可见</option>
 
+                                </select>
 
+                            </div>
 
+                            
+                            <div class="form-actions">
 
+                                <button class="btn">取消</button>
 
+                                <button class="btn btn-primary">保存设置</button>
 
+                            </div>
 
+                        </div>
 
+                        
+                        <!-- 外观设置 -->
 
+                        <div class="settings-section" id="recruiterAppearanceSettings">
 
+                            <h2 style="margin-bottom: 20px;">外观设置</h2>
 
+                            
+                            <div class="form-group">
 
+                                <label for="recruiterThemeSelect">主题颜色</label>
 
+                                <select id="recruiterThemeSelect" class="form-control">
 
+                                    <option value="light" selected>浅色主题</option>
 
+                                    <option value="dark">深色主题</option>
 
+                                    <option value="system">跟随系统</option>
 
+                                </select>
 
+                            </div>
 
+                            
+                            <div class="form-group">
 
+                                <label for="recruiterFontSize">字体大小</label>
 
+                                <select id="recruiterFontSize" class="form-control">
 
+                                    <option value="small">小</option>
 
+                                    <option value="medium" selected>中</option>
 
+                                    <option value="large">大</option>
 
+                                </select>
 
+                            </div>
 
+                            
+                            <div class="settings-item">
 
+                                <div class="settings-item-info">
 
+                                    <h3>动画效果</h3>
 
+                                    <p>启用界面过渡动画</p>
 
+                                </div>
 
+                                <div class="settings-item-action">
 
+                                    <label class="switch">
 
+                                        <input type="checkbox" checked>
 
+                                        <span class="slider"></span>
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                            
+                            <div class="form-actions">
 
+                                <button class="btn">取消</button>
 
+                                <button class="btn btn-primary">保存设置</button>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </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

+ 1 - 1
interview-web/package-lock.json
View File 

@@ -4397,7 +4397,7 @@
 
     },
 
     },
 
     "node_modules/echarts": {
 
     "node_modules/echarts": {
 
       "version": "5.6.0",
 
       "version": "5.6.0",
 
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
 
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
 
       "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
 
       "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
 
       "license": "Apache-2.0",
 
       "license": "Apache-2.0",
 
       "dependencies": {
 
       "dependencies": {