all-project/docs/原型文件/人事管理/recruitment-mobile-prototype.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>招聘模块移动端原型</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f5f5f5;
    }
    
    .container {
      padding: 15px;
    }
    
    header {
      background-color: #1e62d0;
      color: white;
      padding: 12px 15px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: bold;
    }
    
    .menu-button {
      background: none;
      border: none;
      color: white;
      font-size: 24px;
    }
    
    .back-button {
      background: none;
      border: none;
      color: white;
      font-size: 18px;
      display: flex;
      align-items: center;
    }
    
    .main-content {
      margin-top: 60px;
      padding-bottom: 70px;
    }
    
    h1 {
      margin-bottom: 20px;
      font-size: 22px;
    }
    
    h2 {
      margin-top: 20px;
      margin-bottom: 10px;
      font-size: 18px;
    }
    
    .search-bar {
      display: flex;
      margin-bottom: 15px;
    }
    
    .search-bar input {
      flex-grow: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px 0 0 4px;
      font-size: 14px;
    }
    
    .search-bar button {
      padding: 0 15px;
      background-color: #1e62d0;
      color: white;
      border: none;
      border-radius: 0 4px 4px 0;
      font-size: 14px;
    }
    
    .filter-bar {
      display: flex;
      overflow-x: auto;
      padding-bottom: 10px;
      margin-bottom: 15px;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
    }
    
    .filter-chip {
      padding: 6px 12px;
      background-color: white;
      border: 1px solid #ddd;
      border-radius: 20px;
      margin-right: 10px;
      font-size: 14px;
      flex-shrink: 0;
    }
    
    .filter-chip.active {
      background-color: #1e62d0;
      color: white;
      border-color: #1e62d0;
    }
    
    .job-card {
      background-color: white;
      border-radius: 4px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .job-title {
      font-size: 16px;
      font-weight: bold;
      color: #1e62d0;
      margin-bottom: 8px;
    }
    
    .job-info {
      margin-bottom: 10px;
      color: #666;
    }
    
    .job-info span {
      margin-right: 10px;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
    }
    
    .job-desc {
      margin-bottom: 15px;
      font-size: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .btn {
      display: inline-block;
      padding: 8px 16px;
      background-color: #1e62d0;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;
      border: none;
      font-size: 14px;
    }
    
    .btn-outline {
      background-color: transparent;
      color: #1e62d0;
      border: 1px solid #1e62d0;
    }
    
    .btn-block {
      display: block;
      width: 100%;
    }
    
    .job-detail {
      background-color: white;
      border-radius: 4px;
      padding: 15px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .job-actions {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
    
    .form-container {
      background-color: white;
      border-radius: 4px;
      padding: 15px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .step-indicator {
      display: flex;
      margin-bottom: 20px;
      overflow-x: auto;
      padding-bottom: 10px;
    }
    
    .step {
      flex: 0 0 auto;
      width: 80px;
      text-align: center;
      padding-bottom: 10px;
      position: relative;
      font-size: 12px;
    }
    
    .step-number {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #eee;
      color: #999;
      line-height: 24px;
      margin-bottom: 5px;
    }
    
    .step.active .step-number {
      background-color: #1e62d0;
      color: white;
    }
    
    .form-group {
      margin-bottom: 15px;
    }
    
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 14px;
    }
    
    input, select, textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }
    
    textarea {
      height: 100px;
    }
    
    .form-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    
    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: white;
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      border-top: 1px solid #eee;
      z-index: 100;
    }
    
    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 12px;
      color: #666;
      text-decoration: none;
    }
    
    .tab-item.active {
      color: #1e62d0;
    }
    
    .tab-icon {
      display: block;
      font-size: 20px;
      margin-bottom: 2px;
    }
    
    .hr-list {
      list-style-type: none;
    }
    
    .hr-list-item {
      background-color: white;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .hr-list-title {
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .hr-list-info {
      color: #666;
      font-size: 12px;
      margin-bottom: 10px;
    }
    
    .hr-list-actions {
      display: flex;
      gap: 10px;
    }
    
    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
    }
    
    .badge-active {
      background-color: #e7f7ee;
      color: #28a745;
    }
    
    .badge-inactive {
      background-color: #f8f9fa;
      color: #6c757d;
    }
  </style>
</head>
<body>
  <!-- 招聘公告列表页 -->
  <div id="jobs-list-page" style="display: block;">
    <header>
      <div class="header-content">
        <div class="header-title">招聘公告</div>
        <button class="menu-button">☰</button>
      </div>
    </header>
    
    <div class="main-content">
      <div class="container">
        <div class="search-bar">
          <input type="text" placeholder="搜索职位名称、部门...">
          <button>搜索</button>
        </div>
        
        <div class="filter-bar">
          <div class="filter-chip active">全部</div>
          <div class="filter-chip">教学</div>
          <div class="filter-chip">行政</div>
          <div class="filter-chip">科研</div>
          <div class="filter-chip">5k-10k</div>
          <div class="filter-chip">10k-15k</div>
          <div class="filter-chip">15k+</div>
        </div>
        
        <div class="job-list">
          <div class="job-card" onclick="showPage('job-detail-page')">
            <div class="job-title">高级Java开发工程师</div>
            <div class="job-info">
              <span>教学部门</span>
              <span>15k-25k</span>
              <span>杭州</span>
            </div>
            <div class="job-desc">
              负责校园教学管理系统的开发和维护，参与核心模块设计与实现，优化系统性能...
            </div>
            <button class="btn btn-block">查看详情</button>
          </div>
          
          <div class="job-card" onclick="showPage('job-detail-page')">
            <div class="job-title">前端工程师</div>
            <div class="job-info">
              <span>教学部门</span>
              <span>12k-18k</span>
              <span>杭州</span>
            </div>
            <div class="job-desc">
              负责校园教学管理系统前端开发，使用Vue3+TypeScript技术栈，参与UI设计与实现...
            </div>
            <button class="btn btn-block">查看详情</button>
          </div>
          
          <div class="job-card" onclick="showPage('job-detail-page')">
            <div class="job-title">行政助理</div>
            <div class="job-info">
              <span>行政部门</span>
              <span>5k-8k</span>
              <span>杭州</span>
            </div>
            <div class="job-desc">
              协助部门主管处理日常行政事务，包括文件整理、会议安排、接待来访等工作...
            </div>
            <button class="btn btn-block">查看详情</button>
          </div>
          
          <div class="job-card" onclick="showPage('job-detail-page')">
            <div class="job-title">科研助理</div>
            <div class="job-info">
              <span>科研部门</span>
              <span>8k-12k</span>
              <span>杭州</span>
            </div>
            <div class="job-desc">
              协助教授进行科研项目的资料收集、数据整理与分析，参与学术论文撰写...
            </div>
            <button class="btn btn-block">查看详情</button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="tab-bar">
      <a href="#" class="tab-item active">
        <span class="tab-icon">🏠</span>
        <span>首页</span>
      </a>
      <a href="#" class="tab-item">
        <span class="tab-icon">🔍</span>
        <span>搜索</span>
      </a>
      <a href="#" class="tab-item">
        <span class="tab-icon">📋</span>
        <span>申请</span>
      </a>
      <a href="#" class="tab-item">
        <span class="tab-icon">👤</span>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <!-- 职位详情页 -->
  <div id="job-detail-page" style="display: none;">
    <header>
      <div class="header-content">
        <button class="back-button" onclick="showPage('jobs-list-page')">← 返回</button>
        <div class="header-title">职位详情</div>
        <div style="width: 24px;"></div> <!-- 占位元素，保持flex布局平衡 -->
      </div>
    </header>
    
    <div class="main-content">
      <div class="container">
        <div class="job-detail">
          <h1>高级Java开发工程师</h1>
          <div class="job-info">
            <span>教学部门</span>
            <span>15k-25k</span>
            <span>杭州</span>
            <div>发布日期：2025-07-01</div>
          </div>
          
          <h2>职位描述</h2>
          <p>负责校园教学管理系统的开发和维护，参与核心模块设计与实现，优化系统性能，解决技术难题。</p>
          <p>作为团队核心成员，参与技术方案评审，指导初级开发人员，确保项目按时高质量交付。</p>
          
          <h2>岗位要求</h2>
          <ul>
            <li>计算机相关专业本科及以上学历，3年以上Java开发经验</li>
            <li>精通Java核心技术，熟悉Spring Boot、MyBatis等主流框架</li>
            <li>熟练掌握MySQL数据库设计与优化</li>
            <li>有教育行业相关系统开发经验者优先</li>
            <li>良好的沟通能力和团队协作精神</li>
          </ul>
          
          <div class="job-actions">
            <button class="btn" onclick="showPage('application-form-page')">立即申请</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 简历填写表单 -->
  <div id="application-form-page" style="display: none;">
    <header>
      <div class="header-content">
        <button class="back-button" onclick="showPage('job-detail-page')">← 返回</button>
        <div class="header-title">申请职位</div>
        <div style="width: 24px;"></div>
      </div>
    </header>
    
    <div class="main-content">
      <div class="container">
        <h1>申请：高级Java开发工程师</h1>
        
        <div class="form-container">
          <div class="step-indicator">
            <div class="step active">
              <div class="step-number">1</div>
              <div>个人信息</div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div>教育经历</div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div>工作经历</div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div>提交</div>
            </div>
          </div>
          
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" placeholder="请输入姓名">
          </div>
          
          <div class="form-group">
            <label for="phone">手机号码</label>
            <input type="tel" id="phone" placeholder="请输入手机号码">
          </div>
          
          <div class="form-group">
            <label for="email">电子邮箱</label>
            <input type="email" id="email" placeholder="请输入电子邮箱">
          </div>
          
          <div class="form-group">
            <label for="resume">个人简历</label>
            <input type="file" id="resume">
            <small>支持PDF、Word格式，大小不超过5MB</small>
          </div>
          
          <div class="form-group">
            <label for="self-intro">自我介绍</label>
            <textarea id="self-intro" placeholder="请简要介绍自己的情况和求职意向"></textarea>
          </div>
          
          <div class="form-actions">
            <button class="btn btn-outline" onclick="showPage('job-detail-page')">取消</button>
            <button class="btn">下一步</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- HR管理后台 -->
  <div id="hr-admin-page" style="display: none;">
    <header>
      <div class="header-content">
        <div class="header-title">HR管理</div>
        <button class="menu-button">+</button>
      </div>
    </header>
    
    <div class="main-content">
      <div class="container">
        <div class="search-bar">
          <input type="text" placeholder="搜索职位名称...">
          <button>搜索</button>
        </div>
        
        <div class="filter-bar">
          <div class="filter-chip active">全部</div>
          <div class="filter-chip">招聘中</div>
          <div class="filter-chip">已结束</div>
        </div>
        
        <ul class="hr-list">
          <li class="hr-list-item">
            <div class="hr-list-title">高级Java开发工程师</div>
            <div class="hr-list-info">
              教学部门 · 15k-25k · 杭州<br>
              发布于2025-07-01 · <span class="badge badge-active">招聘中</span> · 申请人数：8
            </div>
            <div class="hr-list-actions">
              <button class="btn btn-outline">编辑</button>
              <button class="btn btn-outline">下线</button>
              <button class="btn">查看申请</button>
            </div>
          </li>
          
          <li class="hr-list-item">
            <div class="hr-list-title">前端工程师</div>
            <div class="hr-list-info">
              教学部门 · 12k-18k · 杭州<br>
              发布于2025-07-01 · <span class="badge badge-active">招聘中</span> · 申请人数：5
            </div>
            <div class="hr-list-actions">
              <button class="btn btn-outline">编辑</button>
              <button class="btn btn-outline">下线</button>
              <button class="btn">查看申请</button>
            </div>
          </li>
          
          <li class="hr-list-item">
            <div class="hr-list-title">行政助理</div>
            <div class="hr-list-info">
              行政部门 · 5k-8k · 杭州<br>
              发布于2025-06-25 · <span class="badge badge-active">招聘中</span> · 申请人数：12
            </div>
            <div class="hr-list-actions">
              <button class="btn btn-outline">编辑</button>
              <button class="btn btn-outline">下线</button>
              <button class="btn">查看申请</button>
            </div>
          </li>
          
          <li class="hr-list-item">
            <div class="hr-list-title">UI设计师</div>
            <div class="hr-list-info">
              教学部门 · 10k-15k · 杭州<br>
              发布于2025-06-20 · <span class="badge badge-inactive">已结束</span> · 申请人数：7
            </div>
            <div class="hr-list-actions">
              <button class="btn">查看详情</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
    
    <div class="tab-bar">
      <a href="#" class="tab-item active">
        <span class="tab-icon">📋</span>
        <span>职位</span>
      </a>
      <a href="#" class="tab-item">
        <span class="tab-icon">📝</span>
        <span>申请</span>
      </a>
      <a href="#" class="tab-item">
        <span class="tab-icon">📊</span>
        <span>统计</span>
      </a>
      <a href="#" class="tab-item">
        <span class="tab-icon">⚙️</span>
        <span>设置</span>
      </a>
    </div>
  </div>
  
  <script>
    function showPage(pageId) {
      // 隐藏所有页面
      document.getElementById('jobs-list-page').style.display = 'none';
      document.getElementById('job-detail-page').style.display = 'none';
      document.getElementById('application-form-page').style.display = 'none';
      document.getElementById('hr-admin-page').style.display = 'none';
      
      // 显示选中的页面
      document.getElementById(pageId).style.display = 'block';
    }
    
    // 添加测试链接
    document.addEventListener('DOMContentLoaded', function() {
      document.querySelectorAll('.tab-item')[3].addEventListener('click', function(e) {
        e.preventDefault();
        showPage('hr-admin-page');
      });
    });
  </script>
</body>
</html>