|
|
@@ -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
|
