编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>职为你来 - 招聘小程序</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
        
        .phone-frame { width: 375px; height: 812px; margin: 20px auto; background: #fff; border-radius: 40px; overflow: hidden; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
        .status-bar { height: 44px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; justify-content: space-between; align-items: center; padding: 0 24px; color: #fff; font-size: 12px; font-weight: 500; }
        .page { display: none; height: calc(100% - 44px - 60px); overflow-y: auto; }
        .page.active { display: block; }
        .tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: #fff; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #eee; padding-bottom: env(safe-area-inset-bottom); z-index: 50; }
        .tab-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #999; font-size: 10px; cursor: pointer; }
        .tab-item.active { color: #667eea; }
        .tab-item svg { width: 24px; height: 24px; }
        .tab-item span { font-weight: 500; }
        
        .home-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 16px; color: #fff; }
        .home-header h1 { font-size: 20px; margin-bottom: 12px; }
        .search-box { background: rgba(255,255,255,0.2); border-radius: 20px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
        .search-box input { background: transparent; border: none; color: #fff; flex: 1; font-size: 14px; outline: none; }
        .search-box input::placeholder { color: rgba(255,255,255,0.7); }
        .banner { margin: 12px 16px; height: 120px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; display: flex; align-items: center; padding: 20px; color: #fff; }
        .banner-content { flex: 1; }
        .banner h2 { font-size: 18px; margin-bottom: 6px; }
        .banner p { font-size: 12px; opacity: 0.9; }
        .banner-btn { background: #fff; color: #f5576c; padding: 8px 16px; border-radius: 16px; font-size: 12px; font-weight: 600; }
        .section { padding: 16px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .section-header h3 { font-size: 16px; color: #333; }
        .section-header a { color: #999; font-size: 12px; text-decoration: none; }
        .job-list { display: flex; flex-direction: column; gap: 12px; }
        .job-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; }
        .job-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
        .job-title { font-size: 15px; font-weight: 600; color: #333; }
        .job-salary { color: #f5576c; font-size: 16px; font-weight: 700; }
        .job-tags { display: flex; gap: 6px; margin-bottom: 10px; }
        .tag { background: #f0f0ff; color: #667eea; padding: 4px 10px; border-radius: 10px; font-size: 11px; }
        .job-footer { display: flex; justify-content: space-between; align-items: center; }
        .company-info { display: flex; align-items: center; gap: 8px; }
        .company-logo { width: 32px; height: 32px; background: linear-gradient(135deg, #667eea,#764ba2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: bold; }
        .company-name { font-size: 12px; color: #666; }
        .job-location { font-size: 11px; color: #999; }
        .company-list { display: flex; flex-direction: column; gap: 12px; }
        .company-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; }
        .company-card-top { display: flex; gap: 12px; margin-bottom: 12px; }
        .company-logo-lg { width: 56px; height: 56px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: bold; }
        .company-detail h4 { font-size: 15px; color: #333; margin-bottom: 4px; }
        .company-detail p { font-size: 12px; color: #999; }
        .company-tags { display: flex; gap: 6px; flex-wrap: wrap; }
        .page-header { background: #fff; padding: 12px 16px; display: flex; gap: 10px; }
        .page-header input { flex: 1; background: #f5f5f5; border: none; border-radius: 20px; padding: 10px 16px; font-size: 14px; outline: none; }
        .filter-btn { background: #f5f5f5; border: none; border-radius: 20px; padding: 10px 16px; font-size: 13px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
        .chat-list { padding: 0 16px; }
        .chat-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .chat-avatar { width: 48px; height: 48px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: bold; }
        .chat-content { flex: 1; }
        .chat-name { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 4px; }
        .chat-msg { font-size: 13px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .chat-meta { text-align: right; }
        .chat-time { font-size: 11px; color: #ccc; }
        .chat-badge { background: #f5576c; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; margin-top: 4px; display: inline-block; }
        .profile-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 24px 16px; color: #fff; }
        .profile-info { display: flex; align-items: center; gap: 16px; }
        .avatar { width: 64px; height: 64px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .profile-text h3 { font-size: 18px; margin-bottom: 4px; }
        .profile-text p { font-size: 12px; opacity: 0.8; }
        .menu-section { background: #fff; margin: 12px 16px; border-radius: 12px; overflow: hidden; }
        .menu-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .menu-item:last-child { border-bottom: none; }
        .menu-icon { width: 32px; height: 32px; background: #f0f0ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
        .menu-icon svg { width: 18px; height: 18px; color: #667eea; }
        .menu-text { flex: 1; font-size: 14px; color: #333; }
        .menu-arrow { color: #ccc; }
        
        /* 二级页面通用样式 */
        .sub-page { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f5; z-index: 100; overflow-y: auto; }
        .sub-page.active { display: block; }
        .sub-header { position: sticky; top: 0; background: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #f0f0f0; z-index: 10; }
        .back-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .sub-title { font-size: 16px; font-weight: 600; flex: 1; text-align: center; padding-right: 32px; }
        .sub-content { padding: 16px; }
        
        /* 详情页 */
        .detail-page { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 100; overflow-y: auto; }
        .detail-page.active { display: block; }
        .detail-header { position: sticky; top: 0; background: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #f0f0f0; z-index: 10; }
        .detail-title { font-size: 16px; font-weight: 600; flex: 1; text-align: center; padding-right: 32px; }
        .detail-content { padding: 16px; }
        .detail-salary { font-size: 28px; color: #f5576c; font-weight: 700; margin-bottom: 12px; }
        .detail-job-name { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 12px; }
        .detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
        .detail-tag { background: #f0f0ff; color: #667eea; padding: 6px 12px; border-radius: 14px; font-size: 12px; }
        .detail-section { margin-bottom: 20px; }
        .detail-section h4 { font-size: 15px; color: #333; margin-bottom: 10px; }
        .detail-section p { font-size: 14px; color: #666; line-height: 1.6; }
        .detail-company { background: #f9f9f9; padding: 16px; border-radius: 12px; display: flex; gap: 12px; align-items: center; cursor: pointer; }
        .apply-btn { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 343px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; padding: 14px; border-radius: 24px; font-size: 16px; font-weight: 600; cursor: pointer; z-index: 10; }
        .apply-btn-green { background: linear-gradient(135deg, #52c41a, #389e0d) !important; }
        
        /* 聊天详情页 */
        .chat-detail { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f5; z-index: 100; }
        .chat-detail.active { display: flex; flex-direction: column; }
        .chat-header { background: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #f0f0f0; }
        .chat-messages { flex: 1; padding: 16px; overflow-y: auto; }
        .msg { max-width: 70%; margin-bottom: 12px; }
        .msg-left { align-self: flex-start; }
        .msg-right { align-self: flex-end; }
        .msg-bubble { padding: 12px 16px; border-radius: 16px; font-size: 14px; }
        .msg-left .msg-bubble { background: #fff; border-bottom-left-radius: 4px; }
        .msg-right .msg-bubble { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-bottom-right-radius: 4px; }
        .chat-input-area { background: #fff; padding: 12px 16px; display: flex; gap: 12px; align-items: center; border-top: 1px solid #f0f0f0; }
        .chat-input-area input { flex: 1; background: #f5f5f5; border: none; padding: 12px 16px; border-radius: 24px; font-size: 14px; outline: none; }
        .send-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; padding: 10px 20px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        
        /* 筛选弹窗 */
        .filter-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; }
        .filter-modal.active { display: block; }
        .filter-content { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 20px 20px 0 0; padding: 20px; max-height: 70%; overflow-y: auto; }
        .filter-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; text-align: center; }
        .filter-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
        .filter-option { background: #f5f5f5; padding: 10px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; border: 2px solid transparent; }
        .filter-option.active { background: #f0f0ff; border-color: #667eea; color: #667eea; }
        .filter-actions { display: flex; gap: 12px; }
        .filter-actions button { flex: 1; padding: 14px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
        .filter-reset { background: #f5f5f5; color: #666; }
        .filter-confirm { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
        
        /* 简历样式 */
        .resume-card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 12px; }
        .resume-avatar { width: 80px; height: 80px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; margin: 0 auto 16px; }
        .resume-name { text-align: center; font-size: 18px; font-weight: 600; color: #333; margin-bottom: 4px; }
        .resume-title { text-align: center; font-size: 14px; color: #667eea; margin-bottom: 16px; }
        .resume-info { display: flex; justify-content: center; gap: 20px; font-size: 12px; color: #666; margin-bottom: 16px; }
        .resume-section { margin-top: 16px; }
        .resume-section-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; padding-left: 10px; border-left: 3px solid #667eea; }
        .resume-item { font-size: 13px; color: #666; line-height: 1.8; }
        .resume-skill-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .resume-skill-tag { background: #f0f0ff; color: #667eea; padding: 6px 12px; border-radius: 16px; font-size: 12px; }
        
        /* 投递记录样式 */
        .delivery-item { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; display: flex; gap: 12px; align-items: center; }
        .delivery-logo { width: 48px; height: 48px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: bold; }
        .delivery-info { flex: 1; }
        .delivery-job { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 4px; }
        .delivery-company { font-size: 12px; color: #999; margin-bottom: 4px; }
        .delivery-time { font-size: 11px; color: #ccc; }
        .delivery-status { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
        .status-pending { background: #fff7e6; color: #fa8c16; }
        .status-viewed { background: #e6f7ff; color: #1890ff; }
        .status-interview { background: #e6fffb; color: #52c41a; }
        .status-rejected { background: #fff1f0; color: #ff4d4f; }
        
        /* 动态样式 */
        .timeline { padding-left: 20px; border-left: 2px solid #e8e8e8; margin-left: 10px; }
        .timeline-item { position: relative; padding-left: 24px; margin-bottom: 20px; }
        .timeline-item::before { content: ''; position: absolute; left: -25px; top: 4px; width: 10px; height: 10px; background: #667eea; border-radius: 50%; }
        .timeline-date { font-size: 11px; color: #999; margin-bottom: 4px; }
        .timeline-content { background: #fff; padding: 12px; border-radius: 8px; font-size: 13px; color: #666; }
        
        /* 设置样式 */
        .setting-group { background: #fff; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
        .setting-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .setting-item:last-child { border-bottom: none; }
        .setting-icon { width: 24px; height: 24px; margin-right: 12px; display: flex; align-items: center; justify-content: center; }
        .setting-text { flex: 1; font-size: 14px; color: #333; }
        .setting-arrow { color: #ccc; }
        .switch { width: 44px; height: 24px; background: #ccc; border-radius: 12px; position: relative; cursor: pointer; }
        .switch.active { background: #667eea; }
        .switch::after { content: ''; position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: 0.3s; }
        .switch.active::after { left: 22px; }
        
        /* 帮助样式 */
        .help-item { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; cursor: pointer; display: flex; align-items: center; gap: 12px; }
        .help-icon { width: 40px; height: 40px; background: #f0f0ff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .help-text { flex: 1; }
        .help-title { font-size: 14px; color: #333; margin-bottom: 2px; }
        .help-desc { font-size: 12px; color: #999; }
        .help-arrow { color: #ccc; }
        
        /* 企业详情样式 */
        .company-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px 16px; color: #fff; text-align: center; }
        .company-logo-xl { width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 12px; }
        .company-name-xl { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
        .company-desc { font-size: 12px; opacity: 0.8; }
        .company-stats { display: flex; justify-content: space-around; margin-top: 20px; }
        .stat-item { text-align: center; }
        .stat-num { font-size: 18px; font-weight: 700; }
        .stat-label { font-size: 11px; opacity: 0.8; }
        .company-jobs-section { background: #fff; padding: 16px; margin-top: 12px; }
        .company-job-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .company-job-item:last-child { border-bottom: none; }
        .company-job-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
        
        /* 企业认证样式 */
        .cert-header { background: linear-gradient(135deg, #1890ff, #096dd9); padding: 40px 20px; text-align: center; color: #fff; }
        .cert-icon { font-size: 60px; margin-bottom: 16px; }
        .cert-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
        .cert-desc { font-size: 13px; opacity: 0.9; }
        .cert-form { background: #fff; }
        .form-item { padding: 16px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; }
        .form-label { width: 80px; font-size: 14px; color: #333; }
        .form-input { flex: 1; border: none; font-size: 14px; outline: none; }
        .form-select { flex: 1; border: none; font-size: 14px; outline: none; background: transparent; }
        .cert-upload { padding: 30px 16px; text-align: center; }
        .upload-area { border: 2px dashed #d9d9d9; border-radius: 12px; padding: 30px; cursor: pointer; }
        .upload-icon { font-size: 40px; color: #999; margin-bottom: 8px; }
        .upload-text { font-size: 14px; color: #999; }
        .upload-hint { font-size: 12px; color: #ccc; margin-top: 8px; }
        .cert-steps { background: #fff; padding: 20px 16px; }
        .step-item { display: flex; align-items: flex-start; margin-bottom: 16px; }
        .step-num { width: 24px; height: 24px; background: #667eea; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; margin-right: 12px; flex-shrink: 0; }
        .step-content h5 { font-size: 14px; color: #333; margin-bottom: 4px; }
        .step-content p { font-size: 12px; color: #999; }
        
        /* 发布岗位样式 */
        .publish-header { background: linear-gradient(135deg, #52c41a, #389e0d); padding: 40px 20px; text-align: center; color: #fff; }
        .publish-icon { font-size: 60px; margin-bottom: 16px; }
        .publish-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
        .publish-desc { font-size: 13px; opacity: 0.9; }
        .publish-form { background: #fff; padding: 16px; }
        .publish-item { padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
        .publish-item-header { display: flex; align-items: center; margin-bottom: 8px; }
        .publish-label { font-size: 14px; color: #333; font-weight: 500; }
        .publish-label .required { color: #f5576c; }
        .publish-input { width: 100%; border: none; font-size: 14px; outline: none; padding: 8px 0; }
        .publish-textarea { width: 100%; border: none; font-size: 14px; outline: none; resize: none; min-height: 80px; }
        .publish-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .publish-tag { padding: 6px 12px; background: #f5f5f5; border-radius: 16px; font-size: 12px; cursor: pointer; border: 1px solid transparent; }
        .publish-tag.active { background: #e6f7ff; border-color: #1890ff; color: #1890ff; }
        .salary-range { display: flex; align-items: center; gap: 8px; }
        .salary-input { flex: 1; border: 1px solid #d9d9d9; border-radius: 8px; padding: 8px 12px; font-size: 14px; outline: none; text-align: center; }
        .salary-input:focus { border-color: #667eea; }
    </style>
</head>
<body>
    <div class="phone-frame">
        <div class="status-bar">
            <span>9:41</span>
            <span>职为你来</span>
            <span>●●●●● Wi-Fi</span>
        </div>

        <!-- 首页 -->
        <div class="page active" id="page-home">
            <div class="home-header">
                <h1>👋 您好，找工作来这里</h1>
                <div class="search-box">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                    <input type="text" placeholder="搜索职位、公司">
                </div>
            </div>
            <div class="banner">
                <div class="banner-content">
                    <h2>春季招聘季</h2>
                    <p>海量岗位，等你来挑</p>
                </div>
                <div class="banner-btn">立即查看</div>
            </div>
            <div class="section">
                <div class="section-header">
                    <h3>推荐企业</h3>
                    <a href="#" onclick="switchTab('company'); return false;">查看更多 ›</a>
                </div>
                <div class="company-list">
                    <div class="company-card" onclick="showCompanyDetail('字节跳动', '互联网', '10000人以上', '北京')">
                        <div class="company-card-top">
                            <div class="company-logo-lg">字</div>
                            <div class="company-detail">
                                <h4>字节跳动</h4>
                                <p>互联网 · 已上市 · 10000人以上</p>
                            </div>
                        </div>
                        <div class="company-tags"><span class="tag">五险一金</span><span class="tag">弹性工作</span><span class="tag">免费三餐</span></div>
                    </div>
                    <div class="company-card" onclick="showCompanyDetail('阿里巴巴', '电子商务', '10000人以上', '杭州')">
                        <div class="company-card-top">
                            <div class="company-logo-lg" style="background: linear-gradient(135deg, #ff6b6b, #ffa500);">阿</div>
                            <div class="company-detail">
                                <h4>阿里巴巴</h4>
                                <p>电子商务 · 已上市 · 10000人以上</p>
                            </div>
                        </div>
                        <div class="company-tags"><span class="tag">六险一金</span><span class="tag">股票期权</span><span class="tag">带薪年假</span></div>
                    </div>
                </div>
            </div>
            <div class="section">
                <div class="section-header">
                    <h3>热门岗位</h3>
                    <a href="#" onclick="switchTab('job'); return false;">查看更多 ›</a>
                </div>
                <div class="job-list">
                    <div class="job-card" onclick="showJobDetail('前端开发工程师', '18-30K·14薪', '字节跳动', '北京·朝阳区')">
                        <div class="job-card-header"><span class="job-title">前端开发工程师</span><span class="job-salary">18-30K</span></div>
                        <div class="job-tags"><span class="tag">Vue</span><span class="tag">React</span><span class="tag">本科</span></div>
                        <div class="job-footer">
                            <div class="company-info"><div class="company-logo">字</div><span class="company-name">字节跳动</span></div>
                            <span class="job-location">📍 北京·朝阳区</span>
                        </div>
                    </div>
                    <div class="job-card" onclick="showJobDetail('Java开发工程师', '20-40K', '阿里巴巴', '杭州·西湖区')">
                        <div class="job-card-header"><span class="job-title">Java开发工程师</span><span class="job-salary">20-40K</span></div>
                        <div class="job-tags"><span class="tag">Java</span><span class="tag">Spring</span><span class="tag">本科</span></div>
                        <div class="job-footer">
                            <div class="company-info"><div class="company-logo" style="background: linear-gradient(135deg, #ff6b6b, #ffa500);">阿</div><span class="company-name">阿里巴巴</span></div>
                            <span class="job-location">📍 杭州·西湖区</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 职位页 -->
        <div class="page" id="page-job">
            <div class="page-header">
                <input type="text" placeholder="搜索职位" onclick="showFilter()">
                <button class="filter-btn" onclick="showFilter()">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
                    筛选
                </button>
            </div>
            <div class="section">
                <div class="job-list">
                    <div class="job-card" onclick="showJobDetail('Python开发工程师', '22-35K', '美团', '北京·朝阳区')">
                        <div class="job-card-header"><span class="job-title">Python开发工程师</span><span class="job-salary">22-35K</span></div>
                        <div class="job-tags"><span class="tag">Django</span><span class="tag">Flask</span><span class="tag">本科</span></div>
                        <div class="job-footer"><div class="company-info"><div class="company-logo" style="background: linear-gradient(135deg, #ffd700, #ff8c00);">美</div><span class="company-name">美团</span></div><span class="job-location">📍 北京·朝阳区</span></div>
                    </div>
                    <div class="job-card" onclick="showJobDetail('产品经理', '25-45K', '京东', '北京·亦庄')">
                        <div class="job-card-header"><span class="job-title">产品经理</span><span class="job-salary">25-45K</span></div>
                        <div class="job-tags"><span class="tag">B端</span><span class="tag">C端</span><span class="tag">硕士</span></div>
                        <div class="job-footer"><div class="company-info"><div class="company-logo" style="background: linear-gradient(135deg, #e1251b, #bf0000);">京</div><span class="company-name">京东</span></div><span class="job-location">📍 北京·亦庄</span></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 企业页 -->
        <div class="page" id="page-company">
            <div class="page-header">
                <input type="text" placeholder="搜索企业">
                <button class="filter-btn" onclick="showCompanyFilter()">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
                    筛选
                </button>
            </div>
            <div class="section">
                <div class="company-list">
                    <div class="company-card" onclick="showCompanyDetail('字节跳动', '互联网', '10000人以上', '北京')">
                        <div class="company-card-top"><div class="company-logo-lg">字</div><div class="company-detail"><h4>字节跳动</h4><p>互联网 · 已上市 · 10000人以上</p></div></div>
                        <div class="company-tags"><span class="tag">五险一金</span><span class="tag">弹性工作</span><span class="tag">免费三餐</span><span class="tag">租房补贴</span></div>
                    </div>
                    <div class="company-card" onclick="showCompanyDetail('阿里巴巴', '电子商务', '10000人以上', '杭州')">
                        <div class="company-card-top"><div class="company-logo-lg" style="background: linear-gradient(135deg, #ff6b6b, #ffa500);">阿</div><div class="company-detail"><h4>阿里巴巴</h4><p>电子商务 · 已上市 · 10000人以上</p></div></div>
                        <div class="company-tags"><span class="tag">六险一金</span><span class="tag">股票期权</span><span class="tag">带薪年假</span></div>
                    </div>
                    <div class="company-card" onclick="showCompanyDetail('腾讯', '互联网', '10000人以上', '深圳')">
                        <div class="company-card-top"><div class="company-logo-lg" style="background: linear-gradient(135deg, #07c160, #04be02);">腾</div><div class="company-detail"><h4>腾讯</h4><p>互联网 · 已上市 · 10000人以上</p></div></div>
                        <div class="company-tags"><span class="tag">年终奖</span><span class="tag">免费班车</span><span class="tag">节日福利</span></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 消息页 -->
        <div class="page" id="page-message">
            <div style="padding: 16px; font-size: 18px; font-weight: 600; color: #333;">消息</div>
            <div class="chat-list">
                <div class="chat-item" onclick="showChatDetail('字节跳动HR', '您好，简历已收到')">
                    <div class="chat-avatar">字</div>
                    <div class="chat-content"><div class="chat-name">字节跳动HR</div><div class="chat-msg">您好，简历已收到，约个面试时间吧</div></div>
                    <div class="chat-meta"><div class="chat-time">今天 10:30</div><div class="chat-badge">2</div></div>
                </div>
                <div class="chat-item" onclick="showChatDetail('阿里巴巴HR', '面试结果已出')">
                    <div class="chat-avatar" style="background: linear-gradient(135deg, #ff6b6b, #ffa500);">阿</div>
                    <div class="chat-content"><div class="chat-name">阿里巴巴HR</div><div class="chat-msg">同学你好，面试结果已出</div></div>
                    <div class="chat-meta"><div class="chat-time">昨天 15:20</div></div>
                </div>
                <div class="chat-item" onclick="showChatDetail('系统通知', '简历被查看')">
                    <div class="chat-avatar" style="background: linear-gradient(135deg, #667eea, #764ba2);">系</div>
                    <div class="chat-content"><div class="chat-name">系统通知</div><div class="chat-msg">您的简历已被3家企业查看</div></div>
                    <div class="chat-meta"><div class="chat-time">4月19日</div></div>
                </div>
            </div>
        </div>

        <!-- 我的页 -->
        <div class="page" id="page-mine">
            <div class="profile-header">
                <div class="profile-info">
                    <div class="avatar">👤</div>
                    <div class="profile-text">
                        <h3>张三</h3>
                        <p>前端开发工程师 · 3年经验</p>
                    </div>
                </div>
            </div>
            
            <!-- 新增：发布岗位入口 -->
            <div class="menu-section" style="background: linear-gradient(135deg, #52c41a, #389e0d); margin: 12px 16px; border-radius: 12px;">
                <div class="menu-item" onclick="showSubPage('certification')" style="border-bottom: none;">
                    <div class="menu-icon" style="background: rgba(255,255,255,0.3);">
                        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                    </div>
                    <span class="menu-text" style="color: #fff; font-weight: 600;">发布岗位</span>
                    <span class="menu-arrow" style="color: rgba(255,255,255,0.7);">›</span>
                </div>
            </div>
            
            <div class="menu-section">
                <div class="menu-item" onclick="showSubPage('resume')">
                    <div class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
                    <span class="menu-text">我的简历</span>
                    <span class="menu-arrow">›</span>
                </div>
                <div class="menu-item" onclick="showSubPage('collected-jobs')">
                    <div class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg></div>
                    <span class="menu-text">我收藏的岗位</span>
                    <span class="menu-arrow">›</span>
                </div>
                <div class="menu-item" onclick="showSubPage('collected-companies')">
                    <div class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
                    <span class="menu-text">我收藏的企业</span>
                    <span class="menu-arrow">›</span>
                </div>
            </div>
            
            <div class="menu-section">
                <div class="menu-item" onclick="showSubPage('delivery')">
                    <div class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
                    <span class="menu-text">投递记录</span>
                    <span class="menu-arrow">›</span>
                </div>
                <div class="menu-item" onclick="showSubPage('activity')">
                    <div class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div>
                    <span class="menu-text">求职动态</span>
                    <span class="menu-arrow">›</span>
                </div>
            </div>
            
            <div class="menu-section">
                <div class="menu-item" onclick="showSubPage('settings')">
                    <div class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></div>
                    <span class="menu-text">设置</span>
                    <span class="menu-arrow">›</span>
                </div>
                <div class="menu-item" onclick="showSubPage('help')">
                    <div class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
                    <span class="menu-text">帮助与反馈</span>
                    <span class="menu-arrow">›</span>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="tab-bar">
            <div class="tab-item active" onclick="switchTab('home')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span>首页</span></div>
            <div class="tab-item" onclick="switchTab('job')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg><span>职位</span></div>
            <div class="tab-item" onclick="switchTab('company')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span>企业</span></div>
            <div class="tab-item" onclick="switchTab('message')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><span>消息</span></div>
            <div class="tab-item" onclick="switchTab('mine')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
        </div>

        <!-- ========== 二级页面 ========== -->

        <!-- 企业认证页 -->
        <div class="sub-page" id="page-certification">
            <div class="sub-header">
                <div class="back-btn" onclick="closeSubPage('certification')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
                </div>
                <div class="sub-title">企业认证</div>
            </div>
            
            <div class="cert-header">
                <div class="cert-icon">🏢</div>
                <div class="cert-title">入驻平台 发布岗位</div>
                <div class="cert-desc">完成企业认证后即可发布招聘信息</div>
            </div>
            
            <div class="cert-form">
                <div class="form-item">
                    <span class="form-label">公司名称</span>
                    <input type="text" class="form-input" placeholder="请输入公司全称">
                </div>
                <div class="form-item">
                    <span class="form-label">所属行业</span>
                    <select class="form-select">
                        <option>请选择行业</option>
                        <option>互联网/IT</option>
                        <option>电子商务</option>
                        <option>金融</option>
                        <option>教育</option>
                        <option>医疗健康</option>
                        <option>制造业</option>
                    </select>
                </div>
                <div class="form-item">
                    <span class="form-label">公司规模</span>
                    <select class="form-select">
                        <option>请选择规模</option>
                        <option>20人以下</option>
                        <option>20-99人</option>
                        <option>100-499人</option>
                        <option>500-999人</option>
                        <option>1000人以上</option>
                    </select>
                </div>
                <div class="form-item">
                    <span class="form-label">联系人</span>
                    <input type="text" class="form-input" placeholder="请输入联系人姓名">
                </div>
                <div class="form-item">
                    <span class="form-label">手机号</span>
                    <input type="tel" class="form-input" placeholder="请输入手机号码">
                </div>
            </div>
            
            <div class="cert-upload">
                <div class="upload-area">
                    <div class="upload-icon">📄</div>
                    <div class="upload-text">上传营业执照</div>
                    <div class="upload-hint">支持JPG、PNG格式，大小不超过5MB</div>
                </div>
            </div>
            
            <div class="cert-steps" style="background: #fafafa;">
                <div class="step-item">
                    <div class="step-num">1</div>
                    <div class="step-content">
                        <h5>提交认证资料</h5>
                        <p>填写公司基本信息并上传营业执照</p>
                    </div>
                </div>
                <div class="step-item">
                    <div class="step-num">2</div>
                    <div class="step-content">
                        <h5>平台审核</h5>
                        <p>预计1-3个工作日内完成审核</p>
                    </div>
                </div>
                <div class="step-item" style="margin-bottom: 0;">
                    <div class="step-num">3</div>
                    <div class="step-content">
                        <h5>认证成功</h5>
                        <p>开始发布岗位，招聘人才</p>
                    </div>
                </div>
            </div>
            
            <div style="padding: 16px;">
                <button class="apply-btn apply-btn-green" onclick="showSubPage('publish-job')">提交认证</button>
            </div>
        </div>

        <!-- 发布岗位页 -->
        <div class="sub-page" id="page-publish-job">
            <div class="sub-header">
                <div class="back-btn" onclick="closeSubPage('publish-job')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
                </div>
                <div class="sub-title">发布岗位</div>
            </div>
            
            <div class="publish-header">
                <div class="publish-icon">📋</div>
                <div class="publish-title">完善岗位信息</div>
                <div class="publish-desc">精准的岗位描述能吸引更多优质候选人</div>
            </div>
            
            <div class="publish-form">
                <div class="publish-item">
                    <div class="publish-item-header">
                        <span class="publish-label"><span class="required">*</span> 职位名称</span>
                    </div>
                    <input type="text" class="publish-input" placeholder="例如：前端开发工程师">
                </div>
                
                <div class="publish-item">
                    <div class="publish-item-header">
                        <span class="publish-label"><span class="required">*</span> 薪资范围</span>
                    </div>
                    <div class="salary-range">
                        <input type="number" class="salary-input" placeholder="最低">
                        <span>-</span>
                        <input type="number" class="salary-input" placeholder="最高">
                        <span>K/月</span>
                    </div>
                </div>
                
                <div class="publish-item">
                    <div class="publish-item-header">
                        <span class="publish-label"><span class="required">*</span> 工作地点</span>
                    </div>
                    <input type="text" class="publish-input" placeholder="例如：北京·朝阳区">
                </div>
                
                <div class="publish-item">
                    <div class="publish-item-header">
                        <span class="publish-label"><span class="required">*</span> 学历要求</span>
                    </div>
                    <div class="publish-tags">
                        <span class="publish-tag active">不限</span>
                        <span class="publish-tag">大专</span>
                        <span class="publish-tag">本科</span>
                        <span class="publish-tag">硕士</span>
                        <span class="publish-tag">博士</span>
                    </div>
                </div>
                
                <div class="publish-item">
                    <div class="publish-item-header">
                        <span class="publish-label"><span class="required">*</span> 经验要求</span>
                    </div>
                    <div class="publish-tags">
                        <span class="publish-tag active">不限</span>
                        <span class="publish-tag">应届生</span>
                        <span class="publish-tag">1-3年</span>
                        <span class="publish-tag">3-5年</span>
                        <span class="publish-tag">5年以上</span>
                    </div>
                </div>
                
                <div class="publish-item">
                    <div class="publish-item-header">
                        <span class="publish-label"><span class="required">*</span> 岗位类型</span>
                    </div>
                    <div class="publish-tags">
                        <span class="publish-tag active">全职</span>
                        <span class="publish-tag">兼职</span>
                        <span class="publish-tag">实习</span>
                        <span class="publish-tag">外包</span>
                    </div>
                </div>
                
                <div class="publish-item">
                    <div class="publish-item-header">
                        <span class="publish-label">技能要求</span>
                    </div>
                    <div class="publish-tags">
                        <span class="publish-tag">Vue</span>
                        <span class="publish-tag active">React</span>
                        <span class="publish-tag">Angular</span>
                        <span class="publish-tag">Node.js</span>
                        <span class="publish-tag">JavaScript</span>
                        <span class="publish-tag">TypeScript</span>
                    </div>
                </div>
                
                <div class="publish-item">
                    <div class="publish-item-header">
                        <span class="publish-label">职位描述</span>
                    </div>
                    <textarea class="publish-textarea" placeholder="请详细描述岗位职责和要求...">
15-25K
前端开发工程师
VueReact本科3-5年
职位描述

1. 负责公司产品的前端开发工作
2. 参与前端架构设计与优化
3. 提升产品性能与用户体验
任职要求

1. 本科及以上学历，计算机相关专业
2. 3年以上前端开发经验
3. 熟悉Vue/React等主流框架
公司信息

字
字节跳动

📍 北京·朝阳区
编辑页面

字节跳动

职位描述

任职要求

公司信息

字节跳动

公司简介

在招职位

编辑页面

字节跳动

职位描述

任职要求

公司信息

字节跳动

公司简介

在招职位

薪资范围

工作地点

行业领域
