*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-family);background:var(--bg);color:var(--text);padding-bottom:72px}
/* ===== Header ===== */
.header{background:var(--primary);color:#fff;padding:44px 14px 14px;position:sticky;top:0;z-index:20}
.header .top{display:flex;align-items:center;gap:10px}
.header .back{font-size:20px;cursor:pointer;padding:4px;opacity:.9}
.header .back:hover{opacity:1}
.search-box{flex:1;display:flex;align-items:center;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--radius-lg);padding:0 12px;transition:background .2s}
.search-box:focus-within{background:rgba(255,255,255,.3)}
.search-box input{flex:1;border:none;outline:none;padding:10px 0;font-size:14px;background:transparent;color:#fff}
.search-box input::placeholder{color:rgba(255,255,255,.65)}
.search-box .search-btn{background:rgba(255,255,255,.3);border:none;color:#fff;padding:6px 16px;border-radius:var(--radius);font-size:12px;cursor:pointer;margin-left:4px;transition:background .15s}
.search-box .search-btn:active{background:rgba(255,255,255,.5)}

/* ===== Filter Bar ===== */
.filter-bar{display:flex;gap:6px;padding:10px 14px;overflow-x:auto;white-space:nowrap;background:var(--bg-card);border-bottom:1px solid var(--border-light);scrollbar-width:none;-ms-overflow-style:none}
.filter-bar::-webkit-scrollbar{display:none}
.filter-group{display:flex;gap:6px;flex-shrink:0}
.filter-tag{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:var(--radius-pill);font-size:12px;border:1.5px solid var(--border);cursor:pointer;color:var(--text-secondary);background:var(--bg-card);transition:all .15s;user-select:none}
.filter-tag:active{transform:scale(.95)}
.filter-tag.active{border-color:var(--primary);color:var(--primary);background:var(--primary-pale)}
.filter-tag .arrow{font-size:8px;margin-left:2px}

/* ===== AI推荐区 ===== */
.ai-section{margin:10px 14px 0;background:var(--primary);border-radius:var(--radius-lg);padding:14px;color:#fff;position:relative;overflow:hidden}
.ai-section::before{content:'🤖';position:absolute;right:-8px;top:-8px;font-size:48px;opacity:.15}
.ai-section .ai-title{font-size:13px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.ai-section .ai-title .badge{background:rgba(255,255,255,.25);font-size:10px;padding:1px 8px;border-radius:var(--radius-pill)}
.ai-cards{display:flex;flex-direction:column;gap:8px}
.ai-card{background:rgba(255,255,255,.15);backdrop-filter:blur(4px);border-radius:var(--radius);padding:10px 12px;cursor:pointer;transition:all .15s;border:1px solid rgba(255,255,255,.1)}
.ai-card:active{transform:scale(.98);background:rgba(255,255,255,.25)}
.ai-card .ai-j-title{font-size:14px;font-weight:600;margin-bottom:2px}
.ai-card .ai-j-company{font-size:12px;opacity:.85;margin-bottom:2px}
.ai-card .ai-j-meta{display:flex;justify-content:space-between;font-size:11px;opacity:.75}
.ai-loading{text-align:center;padding:14px;font-size:12px;opacity:.7}

/* ===== Results ===== */
.container{max-width:600px;margin:0 auto;padding:0 14px}
.result-header{display:flex;justify-content:space-between;align-items:center;padding:12px 0 6px}
.result-count{font-size:12px;color:var(--text-muted)}

/* ===== Job Card (enhanced) ===== */
.job-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-sm);margin-bottom:8px;cursor:pointer;transition:all .15s;border:1px solid transparent}
.job-card:active{transform:scale(.98);border-color:var(--primary-pale)}
.job-card .jc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.job-card .jc-top h3{font-size:15px;font-weight:600;line-height:1.4;flex:1;display:flex;align-items:center;gap:6px}
.job-card .jc-top .salary{color:var(--primary);font-weight:700;font-size:14px;white-space:nowrap;margin-left:8px}
.job-card .company{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.job-card .company .verify{color:var(--success);font-size:11px}
.job-card .tags-row{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.job-card .tags-row .t{background:var(--bg);color:var(--text-muted);font-size:10px;padding:2px 8px;border-radius:var(--radius-pill)}
.job-card .meta-line{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-muted);margin-bottom:8px;flex-wrap:wrap}
.job-card .meta-line .dot{color:var(--border);font-size:8px}
.job-card .jc-bottom{display:flex;justify-content:space-between;align-items:center}
.job-card .apply-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 16px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;border:none;cursor:pointer;transition:all .15s;background:var(--primary);color:#fff}
.job-card .apply-btn:active{transform:scale(.95);opacity:.85}
.job-card .apply-btn.applied{background:var(--success);color:#fff}

/* ===== Load More ===== */
.load-more-wrap{text-align:center;padding:16px 0 24px}
.load-more-btn{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:10px 32px;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all .15s}
.load-more-btn:active{background:var(--primary-pale);border-color:var(--primary);color:var(--primary)}
.load-more-btn:disabled{opacity:.5;cursor:not-allowed}
.loading{text-align:center;padding:30px;color:var(--text-muted);font-size:13px}

/* ===== Empty State ===== */
.empty-state{text-align:center;padding:60px 20px 80px}
.empty-state .icon{font-size:48px;margin-bottom:12px}
.empty-state p{color:var(--text-muted);font-size:14px;margin-bottom:6px}
.empty-state .sub{color:var(--text-muted);font-size:12px;opacity:.7}
.empty-state .retry-btn{display:inline-block;margin-top:14px;padding:10px 28px;border-radius:var(--radius-pill);background:var(--primary);color:#fff;font-size:13px;border:none;cursor:pointer}

/* ===== Skeleton Loading ===== */
.skeleton-wrap{padding:4px 0}
.skeleton-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:14px;margin-bottom:8px}
.skeleton-card .sk-row{display:flex;gap:10px;margin-bottom:10px}
.skeleton-card .sk-row:last-child{margin-bottom:0}
.sk-block{background:linear-gradient(90deg,var(--border-light) 25%,var(--bg) 50%,var(--border-light) 75%);background-size:200% 100%;animation:skShimmer 1.5s infinite;border-radius:var(--radius)}
.sk-title{height:18px;width:60%}
.sk-salary{height:16px;width:25%}
.sk-company{height:14px;width:40%;margin-bottom:8px}
.sk-tags{height:12px;width:70%;margin-bottom:8px}
.sk-meta{height:12px;width:50%}
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== Toast ===== */
.toast{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);background:rgba(51,51,51,.92);color:#fff;padding:10px 22px;border-radius:var(--radius-lg);font-size:13px;z-index:999;animation:toastIn .2s;pointer-events:none}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ===== Tabbar ===== */
.tabbar div .badge-dot{position:absolute;top:2px;right:calc(50% - 18px);width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid var(--bg-card)}


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SearchResultsPage",
  "url": "https://tuixinke.cn/h5-v3/pages/search.html",
  "isPartOf": { "@type": "WebSite", "name": "推薪客", "url": "https://tuixinke.cn" }
}
</script>


<script src="/shared/js/error-boundary.js"></script>

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"首页","item":"https://tuixinke.cn/h5-v3/"},{"@type":"ListItem","position":2,"name":"职位搜索","item":"https://tuixinke.cn/h5-v3/pages/search.html"}]}
</script>


<script>
(function roleGuard(){
  var role = (function(){try{return localStorage.getItem('tkx_role')||'worker';}catch(e){return 'worker';}})();
  var allowedRoles = ['worker','employer'];
  if (allowedRoles.indexOf(role) === -1) {
    var targets = {worker:'/h5-v3/', broker:'/h5-v3/', employer:'/h5-v3/'};
    location.href = targets[role] || '/h5-v3/';
  }
})();
</script>

    <meta property="og:title" content="搜职位 - 推薪客" />
</head>
<body>



<div class="header">
  <div class="top">
    <span class="back" onclick="nav('/h5-v3/')">‹</span>
    <div class="search-box">
      <input type="text" id="searchInput" placeholder="搜索职位、公司、关键词..." aria-label="搜索职位" role="searchbox" oninput="debounce(doSearch,300)()" onkeydown="if(event.key==='Enter') doSearch()">
      <button class="search-btn" onclick="doSearch()">搜索</button>
    </div>
  </div>
</div>

<!-- ===== Filter Bar (Salary / Experience / Sort) ===== -->
<div class="filter-bar" id="filterBar">
  <!-- 薪资 -->
  <span class="filter-tag active" data-filter="salary" data-val="" onclick="quickFilter('salary','')">全部薪资</span>
  <span class="filter-tag" data-filter="salary" data-val="below5k" onclick="quickFilter('salary','below5k')">5k以下</span>
  <span class="filter-tag" data-filter="salary" data-val="5-10" onclick="quickFilter('salary','5-10')">5-10k</span>
  <span class="filter-tag" data-filter="salary" data-val="10-20" onclick="quickFilter('salary','10-20')">10-20k</span>
  <span class="filter-tag" data-filter="salary" data-val="20k+" onclick="quickFilter('salary','20k+')">20k+</span>
  <!-- 分隔 -->
  <span class="filter-group">
    <!-- 经验 -->
    <span class="filter-tag active" data-filter="experience" data-val="" onclick="quickFilter('experience','')">经验不限</span>
    <span class="filter-tag" data-filter="experience" data-val="any" onclick="quickFilter('experience','any')">不限</span>
    <span class="filter-tag" data-filter="experience" data-val="1" onclick="quickFilter('experience','1')">1年</span>
    <span class="filter-tag" data-filter="experience" data-val="3" onclick="quickFilter('experience','3')">3年</span>
    <span class="filter-tag" data-filter="experience" data-val="5" onclick="quickFilter('experience','5')">5年</span>
  </span>
  <!-- 排序 -->
  <span class="filter-group">
    <span class="filter-tag active" data-filter="sort" data-val="newest" onclick="quickFilter('sort','newest')">最新</span>
    <span class="filter-tag" data-filter="sort" data-val="relevant" onclick="quickFilter('sort','relevant')">相关</span>
    <span class="filter-tag" data-filter="sort" data-val="salary" onclick="quickFilter('sort','salary')">薪资最高</span>
  </span>
</div>

<div class="container">
  <!-- ===== 角色感知的热门/历史搜索 ===== -->
  <div class="hot-searches-section" id="hotSearchesSection" style="display:none">
    <div style="padding:8px 14px 4px;font-size:12px;color:var(--text-muted,#9CA3AF)" id="hotSearchTitle">🔥 热门搜索</div>
    <div class="hot-searches" id="hotSearches" style="display:flex;gap:6px;padding:4px 14px 8px;flex-wrap:wrap"></div>
    <div id="historySearches" style="display:none;padding:0 14px 8px">
      <div style="font-size:12px;color:var(--text-muted,#9CA3AF);margin-bottom:4px">📋 搜索历史</div>
      <div id="historyTags" style="display:flex;gap:6px;flex-wrap:wrap"></div>
    </div>
  </div>

  <!-- ===== AI推荐区 ===== -->
  <div class="ai-section" id="aiRecommendSection">
    <div class="ai-title">✨ AI智能推荐 <span class="badge">基于大数据匹配</span></div>
    <div class="ai-cards" id="aiCards"><div class="ai-loading">🏃 正在为你精选职位...</div></div>
  </div>

  <!-- ===== 结果列表 ===== -->
  <div class="result-header">
    <span class="result-count" id="resultCount" aria-live="polite"></span>
  </div>
  <div <div id="sortBar" style="display:flex;gap:6px;padding:8px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none">
<button class="sort-btn active" data-sort="relevance" style="padding:5px 14px;border-radius:16px;border:1px solid var(--border,#ddd);background:var(--primary,#FF6600);color:#fff;font-size:12px;cursor:pointer;white-space:nowrap;font-weight:600">综合排序</button>
<button class="sort-btn" data-sort="newest" style="padding:5px 14px;border-radius:16px;border:1px solid var(--border,#ddd);background:transparent;color:var(--text,#333);font-size:12px;cursor:pointer;white-space:nowrap">最新发布</button>
<button class="sort-btn" data-sort="salary" style="padding:5px 14px;border-radius:16px;border:1px solid var(--border,#ddd);background:transparent;color:var(--text,#333);font-size:12px;cursor:pointer;white-space:nowrap">薪资最高</button>
</div>
<script>
(function(){
  var bar = document.getElementById('sortBar');
  if(!bar) return;
  bar.addEventListener('click', function(e){
    var btn = e.target.closest('.sort-btn');
    if(!btn) return;
    // Update active state
    bar.querySelectorAll('.sort-btn').forEach(function(b){
      b.style.background='transparent';b.style.color='var(--text,#333)';b.classList.remove('active');
    });
    btn.style.background='var(--primary,#FF6600)';btn.style.color='#fff';btn.classList.add('active');
    // Trigger re-sort (delegated to existing search logic)
    window._activeSort = btn.dataset.sort;
    var ev = new CustomEvent('sortChange', {detail:{sort:btn.dataset.sort}});
    window.dispatchEvent(ev);
  });
})();
</script>

<div class="job-list" id="jobList">
    <div class="loading">🔍 搜索中...</div>
  </div>

  <!-- ===== 加载更多 ===== -->
  <div class="load-more-wrap" id="loadMoreWrap" style="display:none">
    <button class="load-more-btn" id="loadMoreBtn" onclick="loadMore()">加载更多</button>
  </div>
</div>

<!-- ===== 底部Tab导航 ===== -->

<!-- ===== 筛选面板 (保留城市/类型/学历等高级筛选) ===== -->
<div class="filter-overlay" id="filterOverlay" onclick="if(event.target===this)closeFilterSheet()">
  <div class="filter-sheet">
    <h3>🔍 高级筛选</h3>

    <div class="filter-group-title">📍 城市</div>
    <div class="filter-options" id="filterCityOptions">
      <span class="opt active" data-val="">不限</span>
      <span class="opt" data-val="广州">广州</span>
      <span class="opt" data-val="深圳">深圳</span>
      <span class="opt" data-val="上海">上海</span>
      <span class="opt" data-val="北京">北京</span>
      <span class="opt" data-val="杭州">杭州</span>
      <span class="opt" data-val="成都">成都</span>
      <span class="opt" data-val="武汉">武汉</span>
      <span class="opt" data-val="南京">南京</span>
      <span class="opt" data-val="其他">其他</span>
    </div>

    <div class="filter-group-title">💰 薪资范围</div>
    <div class="filter-options" id="filterSalaryOptions">
      <span class="opt active" data-min="" data-max="">不限</span>
      <span class="opt" data-min="3000" data-max="">3K以上</span>
      <span class="opt" data-min="5000" data-max="">5K以上</span>
      <span class="opt" data-min="8000" data-max="">8K以上</span>
      <span class="opt" data-min="10000" data-max="">10K以上</span>
      <span class="opt" data-min="15000" data-max="">15K以上</span>
      <span class="opt" data-min="20000" data-max="">20K以上</span>
      <span class="opt" data-min="" data-max="5000">5K以内</span>
    </div>

    <div class="filter-group-title">💼 工作类型</div>
    <div class="filter-options" id="filterTypeOptions">
      <span class="opt active" data-val="">不限</span>
      <span class="opt" data-val="full-time">全职</span>
      <span class="opt" data-val="part-time">兼职</span>
      <span class="opt" data-val="internship">实习</span>
      <span class="opt" data-val="contract">合同制</span>
    </div>

    <div class="filter-group-title">🎓 学历要求</div>
    <div class="filter-options" id="filterEduOptions">
      <span class="opt active" data-val="">不限</span>
      <span class="opt" data-val="初中及以下">初中</span>
      <span class="opt" data-val="高中">高中</span>
      <span class="opt" data-val="中专/中技">中专/中技</span>
      <span class="opt" data-val="大专">大专</span>
      <span class="opt" data-val="本科">本科</span>
      <span class="opt" data-val="硕士及以上">硕士及以上</span>
    </div>

    <div class="filter-actions">
      <button class="btn-reset" onclick="resetFilters()">重置</button>
      <button class="btn-confirm" onclick="applyFilters()">确认筛选</button>
    </div>
  </div>
</div>


/* ===== Filter Panel (Sheet) ===== */
.filter-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:flex-end;justify-content:center;animation:fadeIn .2s}
.filter-overlay.show{display:flex}
.filter-sheet{background:var(--bg-card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:500px;max-height:75vh;overflow-y:auto;padding:20px 20px 30px;animation:slideUp .25s}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.filter-sheet h3{font-size:16px;font-weight:600;margin-bottom:16px;text-align:center}
.filter-group-title{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;margin-top:14px}
.filter-group-title:first-child{margin-top:0}
.filter-options{display:flex;flex-wrap:wrap;gap:8px}
.filter-options .opt{display:inline-flex;padding:6px 14px;border-radius:var(--radius-pill);font-size:12px;border:1.5px solid var(--border);cursor:pointer;color:var(--text-secondary);background:var(--bg);transition:all .12s}
.filter-options .opt.active{border-color:var(--primary);color:var(--primary);background:var(--primary-pale)}
.filter-actions{display:flex;gap:10px;margin-top:20px;padding-top:14px;border-top:1px solid var(--border-light)}
.filter-actions button{flex:1;padding:12px;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.filter-actions .btn-reset{background:var(--bg);border:1.5px solid var(--border);color:var(--text-secondary)}
.filter-actions .btn-reset:active{background:var(--border-light)}
.filter-actions .btn-confirm{background:var(--primary);border:none;color:#fff}
.filter-actions .btn-confirm:active{opacity:.85}
.dark-toggle{position:fixed;bottom:74px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;z-index:99;box-shadow:var(--shadow)}
.dark-toggle:active{transform:scale(.9)}

/* ===== 加载态遮罩 ===== */
.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s}
.loading-overlay.hide{opacity:0;pointer-events:none}
[data-theme="dark"] .loading-overlay{background:rgba(26,26,26,.9)}
.loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top:3px solid var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Page transition: subtle fade-in */
@keyframes tkx-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.tkx-page-enter {
  animation: tkx-fadeIn .25s ease-out;
}
.tkx-scroll-top{position:fixed;bottom:100px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--primary,#FF6600);color:#fff;border:none;font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:999;box-shadow:0 2px 8px rgba(255,102,0,.35);transition:opacity .2s,transform .2s;opacity:.9}
.tkx-scroll-top.show{display:flex}
.tkx-scroll-top:active{transform:scale(.92)}