编辑页面

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>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:#eef0f3;color:#1f2937;line-height:1.5;-webkit-font-smoothing:antialiased}
.phone-frame{max-width:450px;margin:0 auto;background:#eef0f3;min-height:100vh;position:relative;overflow-x:hidden;box-shadow:0 0 40px rgba(15,23,42,0.12)}
.top-nav{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;background:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid #e5e7eb}
.nav-left{width:60px;font-size:14px;color:#1f2937;cursor:pointer;display:flex;align-items:center;gap:4px;font-weight:500}
.nav-center{flex:1;text-align:center;font-size:16px;font-weight:600;color:#0f172a;letter-spacing:0.5px}
.nav-right{width:60px;text-align:right;color:#475569;cursor:pointer;display:flex;justify-content:flex-end;align-items:center}
.brand-mark{display:inline-flex;align-items:center;gap:8px}
.brand-mark svg{flex-shrink:0}
.page{display:none}
.page.active{display:block;animation:fadeIn 0.25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.section-title{font-size:13px;font-weight:700;color:#0f172a;padding:14px 16px 8px;background:transparent;display:flex;align-items:center;gap:8px;letter-spacing:0.3px;text-transform:uppercase}
.section-title::before{content:'';width:3px;height:14px;background:linear-gradient(180deg,#1e3a5f,#0f172a);border-radius:2px}
.section-title .more{margin-left:auto;font-size:11px;color:#64748b;font-weight:500;text-transform:none;cursor:pointer;letter-spacing:0}

/* ======== 通用 Banner 轮播 ======== */
.banner-section{overflow:hidden;position:relative;height:180px;background:#0f172a}
.banner-track{display:flex;height:100%;transition:transform 0.6s ease}
.banner-slide{min-width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;position:relative;padding:20px;text-align:center}
.banner-slide svg.decor{position:absolute;inset:0;width:100%;height:100%;opacity:0.18}
.banner-slide .bs-content{position:relative;z-index:2}
.bs-title{font-size:18px;font-weight:700;letter-spacing:2px;margin-bottom:6px}
.bs-sub{font-size:12px;opacity:0.75;letter-spacing:1px;font-weight:300}
.banner-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.banner-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.3s}
.banner-dot.active{width:18px;border-radius:3px;background:#fff}

/* ======== 统计 ======== */
.stats-bar{display:flex;background:#fff;padding:14px 0;margin-bottom:6px}
.stat-item{flex:1;text-align:center;border-right:1px solid #f1f5f9}
.stat-item:last-child{border-right:none}
.stat-num{font-size:18px;font-weight:700;color:#0f172a;line-height:1}
.stat-label{font-size:11px;color:#64748b;margin-top:4px}

/* ======== 功能入口（用 SVG 图标）======== */
.feature-grid{background:#fff;padding:16px 8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:6px}
.feature-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px;cursor:pointer;border-radius:8px;transition:background 0.15s}
.feature-item:active{background:#f1f5f9}
.feature-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.feature-icon svg{width:22px;height:22px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feature-label{font-size:11px;color:#334155;text-align:center;line-height:1.2}

/* ======== 搜索 ======== */
.search-section{padding:10px 14px;background:#fff}
.search-row{display:flex;gap:8px;align-items:center}
.search-input-wrap{flex:1;display:flex;align-items:center;background:#f1f5f9;border-radius:6px;padding:0 14px;height:38px}
.search-input-wrap svg{flex-shrink:0;stroke:#94a3b8;width:16px;height:16px;stroke-width:2;fill:none}
.search-input-wrap input{flex:1;border:none;background:transparent;font-size:13px;color:#1f2937;outline:none;margin-left:8px}
.search-input-wrap input::placeholder{color:#94a3b8}
.search-btn{background:#0f172a;color:#fff;border:none;border-radius:6px;padding:0 18px;height:38px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;letter-spacing:0.5px}

/* ======== 筛选 ======== */
.filter-bar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px;background:#fff;overflow-x:auto;border-bottom:1px solid #f1f5f9}
.chip{padding:5px 12px;border-radius:4px;font-size:12px;border:1px solid #e2e8f0;background:#fff;color:#475569;cursor:pointer;white-space:nowrap;transition:all 0.15s;letter-spacing:0.3px}
.chip.active{background:#0f172a;color:#fff;border-color:#0f172a}

/* ======== 卡片列表 ======== */
.list-section{padding:8px 12px 80px}
.list-card{background:#fff;border-radius:8px;padding:14px;margin-bottom:8px;display:flex;gap:12px;cursor:pointer;transition:box-shadow 0.15s;border:1px solid #eef0f3}
.list-card:active{box-shadow:0 2px 12px rgba(15,23,42,0.08);border-color:#cbd5e1}
.list-avatar{width:46px;height:46px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;overflow:hidden}
.list-avatar svg{width:24px;height:24px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.list-info{flex:1;min-width:0}
.list-name{font-size:14px;font-weight:600;color:#0f172a;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tag{display:inline-block;font-size:10px;background:#1e3a5f;color:#fff;padding:1px 6px;border-radius:2px;font-weight:500;line-height:1.5;letter-spacing:0.3px}
.tag.green{background:#16a34a}
.tag.gray{background:#64748b}
.list-meta{font-size:12px;color:#64748b;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.list-tag{font-size:10px;color:#1e3a5f;background:#f1f5f9;padding:2px 7px;border-radius:2px;letter-spacing:0.3px}
.list-tag.gray{color:#64748b;background:#f8fafc}
.list-meta.star{color:#d97706;margin-top:5px}

/* ======== 底部 TabBar ======== */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:450px;background:#fff;display:flex;align-items:center;justify-content:space-around;height:56px;border-top:1px solid #e5e7eb;z-index:99;box-shadow:0 -2px 12px rgba(15,23,42,0.06)}
.tab-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;flex:1;padding:6px 0;color:#94a3b8}
.tab-item svg{width:22px;height:22px;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:currentColor}
.tab-label{font-size:10px;letter-spacing:0.3px}
.tab-item.active{color:#0f172a;font-weight:600}

/* ======== 悬浮按钮 ======== */
.fab{position:fixed;bottom:74px;right:calc(50% - 210px);width:52px;height:52px;border-radius:14px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(15,23,42,0.3);cursor:pointer;z-index:200;transition:transform 0.15s}
.fab:active{transform:scale(0.96)}
.fab svg{width:24px;height:24px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}
@media(max-width:480px){.fab{right:16px}}

/* ======== 弹层 ======== */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,0.5);z-index:800;opacity:0;visibility:hidden;transition:opacity 0.25s}
.overlay.show{opacity:1;visibility:visible}
.bottom-sheet{position:fixed;left:50%;transform:translateX(-50%) translateY(100%);bottom:0;width:100%;max-width:450px;max-height:88vh;background:#fff;border-radius:16px 16px 0 0;z-index:810;transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);display:flex;flex-direction:column;overflow:hidden}
.bottom-sheet.show{transform:translateX(-50%) translateY(0)}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:#cbd5e1;margin:10px auto 0;flex-shrink:0}
.sheet-header{padding:14px 16px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sheet-title{font-size:16px;font-weight:700;color:#0f172a;letter-spacing:0.3px}
.sheet-close{font-size:20px;color:#64748b;cursor:pointer;background:none;border:none;line-height:1;padding:6px}
.sheet-body{flex:1;overflow-y:auto;padding:0 0 16px;-webkit-overflow-scrolling:touch}

/* ======== 操作按钮 ======== */
.action-btn{display:block;width:calc(100% - 32px);margin:14px 16px;padding:13px;background:#0f172a;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:1px}
.action-btn:active{background:#1e293b}
.action-btn.outline{background:#fff;color:#0f172a;border:1px solid #cbd5e1}
.action-btn.danger{background:#b91c1c}

/* ======== 表单 ======== */
.form-section{background:#fff;padding:0 16px 12px}
.form-item{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid #f1f5f9}
.form-label{width:80px;font-size:13px;color:#475569;flex-shrink:0}
.form-input{flex:1;border:none;outline:none;font-size:13px;color:#0f172a;background:transparent}
.form-textarea{width:100%;border:1px solid #e2e8f0;border-radius:6px;padding:10px;font-size:13px;color:#0f172a;outline:none;resize:none;height:90px;margin-top:10px;line-height:1.6}
.form-textarea:focus{border-color:#1e3a5f}

/* ======== 详情卡片 ======== */
.detail-card{background:#fff;padding:16px;margin-bottom:6px}
.detail-title{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:8px;line-height:1.4}
.detail-meta{font-size:11px;color:#64748b;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.detail-row{display:flex;padding:6px 0;font-size:13px}
.detail-row .k{width:80px;color:#94a3b8;flex-shrink:0}
.detail-row .v{flex:1;color:#0f172a}
.detail-desc{font-size:13px;color:#334155;line-height:1.7;margin-top:10px}

.tag-pill{display:inline-block;font-size:10px;padding:2px 8px;border-radius:2px;background:#f1f5f9;color:#1e3a5f;margin-right:4px;margin-top:2px;letter-spacing:0.3px}
.tag-pill.danger{background:#fee2e2;color:#b91c1c}
.tag-pill.success{background:#dcfce7;color:#16a34a}
.tag-pill.warn{background:#fef3c7;color:#b45309}

/* ======== 个人中心 ======== */
.profile-header{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);padding:28px 18px 18px;color:#fff;position:relative;overflow:hidden}
.profile-header::after{content:'';position:absolute;top:-50%;right:-20%;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,0.06)}
.profile-top{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.profile-avatar{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.profile-avatar svg{width:32px;height:32px;stroke:#fff;stroke-width:1.8;fill:none}
.profile-info{flex:1}
.profile-name{font-size:17px;font-weight:600;margin-bottom:2px;letter-spacing:0.3px}
.profile-id{font-size:12px;opacity:0.75}
.profile-stats{display:flex;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.12);position:relative;z-index:2}
.profile-stat{flex:1;text-align:center}
.profile-stat-num{font-size:17px;font-weight:700;line-height:1}
.profile-stat-label{font-size:11px;opacity:0.7;margin-top:4px}

.menu-list{background:#fff;margin-top:6px}
.menu-item{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background 0.15s}
.menu-item:active{background:#f8fafc}
.menu-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;margin-right:12px;flex-shrink:0}
.menu-icon svg{width:18px;height:18px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.menu-label{flex:1;font-size:14px;color:#1f2937}
.menu-meta{font-size:12px;color:#94a3b8;margin-right:8px}
.menu-arrow{color:#cbd5e1;font-size:16px}

/* ======== Tab Bar 切换 ======== */
.tab-bar2{display:flex;background:#fff;padding:0 16px;gap:4px;border-bottom:1px solid #e5e7eb}
.tab-bar2 .tab-item2{flex:1;padding:12px 0;text-align:center;font-size:13px;color:#64748b;cursor:pointer;position:relative;font-weight:500}
.tab-bar2 .tab-item2.active{color:#0f172a;font-weight:700}
.tab-bar2 .tab-item2.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:24px;height:2px;background:#0f172a;border-radius:1px}

/* ======== 提示弹窗 ======== */
.tip-modal{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:20px}
.tip-modal.show{display:flex}
.tip-modal-overlay{position:absolute;inset:0;background:rgba(15,23,42,0.5)}
.tip-modal-content{position:relative;background:#fff;border-radius:12px;width:100%;max-width:380px;overflow:hidden;animation:zoomIn 0.25s ease}
@keyframes zoomIn{from{transform:scale(0.92);opacity:0}to{transform:scale(1);opacity:1}}
.tip-modal-header{padding:22px 20px 0;text-align:center}
.tip-modal-icon{width:56px;height:56px;border-radius:14px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.tip-modal-icon svg{width:28px;height:28px;stroke:#1e3a5f;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tip-modal-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:6px}
.tip-modal-desc{font-size:13px;color:#64748b;line-height:1.6;padding:0 20px;text-align:center}
.tip-modal-body{padding:14px 20px 18px}
.tip-modal-warn{background:#fef9e7;border:1px solid #fcd34d;border-left:3px solid #d97706;border-radius:6px;padding:12px;font-size:12px;color:#78350f;line-height:1.7;margin-bottom:12px}
.tip-modal-warn b{color:#0f172a}
.tip-modal-btn{display:block;width:100%;padding:12px;background:#0f172a;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:1px}
.tip-modal-btn:active{background:#1e293b}
.tip-modal-btn.outline{background:#fff;color:#475569;border:1px solid #e2e8f0;margin-top:8px}

/* ======== 交易大厅分类 ======== */
.deal-tabs{display:flex;gap:6px;padding:10px 14px;background:#fff;overflow-x:auto;border-bottom:1px solid #f1f5f9}
.deal-tab{flex-shrink:0;padding:7px 14px;border-radius:6px;font-size:12px;background:#f1f5f9;color:#475569;cursor:pointer;display:flex;align-items:center;gap:5px;font-weight:500;letter-spacing:0.3px}
.deal-tab.active{background:#0f172a;color:#fff}
.deal-tab-count{font-size:10px;opacity:0.7;background:rgba(255,255,255,0.15);padding:1px 5px;border-radius:8px}
.deal-tab.active .deal-tab-count{background:rgba(255,255,255,0.2)}
.deal-tab:not(.active) .deal-tab-count{background:#e2e8f0;color:#64748b}

/* ======== 项目卡片 ======== */
.project-card{background:#fff;padding:14px;margin-bottom:6px;display:flex;gap:12px;cursor:pointer;border:1px solid #eef0f3;border-radius:8px;transition:border-color 0.15s}
.project-card:active{border-color:#cbd5e1}
.project-type{width:46px;height:46px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.project-type svg{width:24px;height:24px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.project-info{flex:1;min-width:0}
.project-name{font-size:14px;font-weight:600;color:#0f172a;margin-bottom:5px;line-height:1.4}
.project-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.project-meta{font-size:11px;color:#64748b;display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.project-meta span{display:flex;align-items:center;gap:3px}
.project-meta svg{width:11px;height:11px;stroke:#94a3b8;stroke-width:2;fill:none}
.project-amount{font-size:14px;color:#b91c1c;font-weight:700;margin-top:6px;letter-spacing:0.5px}

/* ======== 评价 ======== */
.review-item{padding:12px 16px;border-bottom:1px solid #f1f5f9;background:#fff}
.review-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.review-avatar{width:32px;height:32px;border-radius:6px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;font-weight:600}
.review-name{font-size:13px;font-weight:600;color:#0f172a;flex:1}
.review-time{font-size:11px;color:#94a3b8}
.review-content{font-size:13px;color:#334155;line-height:1.6}

/* ======== 圈子 ======== */
.circle-tabs{display:flex;background:#fff;padding:0 12px;border-bottom:1px solid #e5e7eb;position:sticky;top:48px;z-index:90}
.circle-tab{flex:1;padding:12px 0;text-align:center;font-size:13px;color:#64748b;cursor:pointer;position:relative;font-weight:500}
.circle-tab.active{color:#0f172a;font-weight:700}
.circle-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:24px;height:2px;background:#0f172a;border-radius:1px}

.topic-card{background:#fff;padding:14px;margin-bottom:6px;border:1px solid #eef0f3;border-radius:8px}
.topic-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.topic-avatar{width:38px;height:38px;border-radius:8px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;font-weight:600}
.topic-user{font-size:13px;font-weight:600;color:#0f172a}
.topic-time{font-size:11px;color:#94a3b8;margin-top:2px}
.topic-content{font-size:13px;color:#1f2937;line-height:1.65;margin-bottom:8px}

.cons-btn{background:#0f172a;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;letter-spacing:0.5px;transition:background 0.15s}
.cons-btn:active{background:#1e293b}
.card{background:#fff;border-radius:8px;padding:14px;margin-bottom:8px;border:1px solid #eef0f3}

.role-switch{display:flex;background:#fff;margin:8px 12px;border-radius:8px;padding:4px;box-shadow:0 1px 3px rgba(15,23,42,0.04)}
.role-item{flex:1;text-align:center;padding:10px;border-radius:6px;cursor:pointer;font-size:13px;color:#64748b;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:500}
.role-item svg{width:16px;height:16px;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.role-item.active{background:#0f172a;color:#fff}

.section-divider{height:6px;background:#eef0f3}
</style>
</head>
<body>
<div class="phone-frame" id="app">

<!-- ============== 首页 ============== -->
<div class="page active" id="page-home">
  <div class="top-nav">
    <div class="nav-left"><svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg> 新疆</div>
    <div class="nav-center"><span class="brand-mark"><svg viewBox="0 0 32 32" style="width:22px;height:22px"><path d="M4 28L16 4l12 24H4z" fill="#0f172a"/><path d="M16 12l6 12H10z" fill="#1e3a5f"/></svg> 疆工智联</span></div>
    <div class="nav-right" onclick="goPage('msg')"><svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>
  </div>

  <div class="banner-section">
    <div class="banner-track" id="homeBanner">
      <div class="banner-slide" style="background:linear-gradient(135deg,#0f172a,#1e3a5f)">
        <svg class="decor" viewBox="0 0 450 180" preserveAspectRatio="none"><path d="M0 120 L60 100 L120 130 L180 90 L240 120 L300 80 L360 110 L450 70" stroke="#fff" stroke-width="1" fill="none"/><path d="M0 150 L100 130 L200 160 L300 130 L450 140" stroke="#fff" stroke-width="1" fill="none"/></svg>
        <div class="bs-content">
          <div style="font-size:22px;font-weight:700;letter-spacing:3px;margin-bottom:8px">疆 工 智 联</div>
          <div class="bs-title">工程行业一站式服务平台</div>
          <div class="bs-sub" style="margin-top:8px">PUBLISH · MATCH · TRANSACT</div>
        </div>
      </div>
      <div class="banner-slide" style="background:linear-gradient(135deg,#1e3a5f,#0f172a)">
        <svg class="decor" viewBox="0 0 450 180" preserveAspectRatio="none"><circle cx="80" cy="40" r="40" stroke="#fff" stroke-width="1" fill="none"/><circle cx="370" cy="140" r="50" stroke="#fff" stroke-width="1" fill="none"/></svg>
        <div class="bs-content">
          <div class="bs-title">海量工程服务商</div>
          <div style="font-size:11px;opacity:0.7;margin-top:8px;letter-spacing:1px">造价 · 法律 · 资料 · 人才 · 设备</div>
          <div class="bs-sub" style="margin-top:6px">VERIFIED · PROFESSIONAL</div>
        </div>
      </div>
      <div class="banner-slide" style="background:linear-gradient(135deg,#0f172a,#374151)">
        <svg class="decor" viewBox="0 0 450 180" preserveAspectRatio="none"><path d="M0 0 L450 180 M450 0 L0 180" stroke="#fff" stroke-width="0.5" fill="none"/></svg>
        <div class="bs-content">
          <div class="bs-title">实名认证 · 信息担保</div>
          <div style="font-size:11px;opacity:0.7;margin-top:8px;letter-spacing:1px">免费信息平台 · 交易自行核实</div>
          <div class="bs-sub" style="margin-top:6px">SECURE · TRANSPARENT</div>
        </div>
      </div>
    </div>
    <div class="banner-dots">
      <div class="banner-dot active" onclick="goBanner(0,'homeBanner')"></div>
      <div class="banner-dot" onclick="goBanner(1,'homeBanner')"></div>
      <div class="banner-dot" onclick="goBanner(2,'homeBanner')"></div>
    </div>
  </div>

  <div class="stats-bar">
    <div class="stat-item"><div class="stat-num">3,286</div><div class="stat-label">入驻企业</div></div>
    <div class="stat-item"><div class="stat-num">12,540</div><div class="stat-label">服务人才</div></div>
    <div class="stat-item"><div class="stat-num">8,752</div><div class="stat-label">服务案例</div></div>
    <div class="stat-item"><div class="stat-num">98.6%</div><div class="stat-label">好评率</div></div>
  </div>

  <div class="feature-grid">
    <div class="feature-item" onclick="goPage('cost')"><div class="feature-icon" style="background:#1e3a5f"><svg viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg></div><div class="feature-label">工程造价</div></div>
    <div class="feature-item" onclick="goPage('legal')"><div class="feature-icon" style="background:#0f172a"><svg viewBox="0 0 24 24"><path d="M12 3v18M5 7h7M5 12h7M5 17h7M19 7h-2M19 12h-2M19 17h-2"/></svg></div><div class="feature-label">法律服务</div></div>
    <div class="feature-item" onclick="goPage('data')"><div class="feature-icon" style="background:#475569"><svg viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z"/><path d="M14 3v6h6M9 13h6M9 17h4"/></svg></div><div class="feature-label">工程资料</div></div>
    <div class="feature-item" onclick="goPage('talent')"><div class="feature-icon" style="background:#1e40af"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg></div><div class="feature-label">人才劳务</div></div>
    <div class="feature-item" onclick="goPage('machinery')"><div class="feature-icon" style="background:#b45309"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="14" height="8" rx="1"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/><path d="M17 11V7a2 2 0 00-2-2h-2M21 11v6"/></svg></div><div class="feature-label">机械建材</div></div>
    <div class="feature-item" onclick="goPage('smart')"><div class="feature-icon" style="background:#0e7490"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></svg></div><div class="feature-label">智能建造</div></div>
    <div class="feature-item" onclick="goPage('oil')"><div class="feature-icon" style="background:#991b1b"><svg viewBox="0 0 24 24"><path d="M12 2v4M8 6h8l-1 14H9z"/><path d="M5 12h14"/></svg></div><div class="feature-label">油田工程</div></div>
    <div class="feature-item" onclick="goPage('train')"><div class="feature-icon" style="background:#166534"><svg viewBox="0 0 24 24"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg></div><div class="feature-label">技能培训</div></div>
    <div class="feature-item" onclick="goPage('other')"><div class="feature-icon" style="background:#6b21a8"><svg viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg></div><div class="feature-label">其他服务</div></div>
    <div class="feature-item" onclick="showAlert('家装服务即将上线')"><div class="feature-icon" style="background:#831843"><svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><path d="M9 22V12h6v10"/></svg></div><div class="feature-label">家装服务</div></div>
    <div class="feature-item" onclick="goPage('circle')"><div class="feature-icon" style="background:#0f766e"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg></div><div class="feature-label">交流圈</div></div>
    <div class="feature-item" onclick="goPage('post')"><div class="feature-icon" style="background:#9a3412"><svg viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 113 3L12 15l-4 1 1-4z"/></svg></div><div class="feature-label">发布需求</div></div>
  </div>

  <div style="padding:8px 12px;display:flex;gap:8px">
    <div class="card" style="flex:1;margin:0;padding:12px;text-align:center;cursor:pointer" onclick="showAlert('入驻规则：需完成实名认证 + 资质审核')">
      <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:#1e3a5f;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px"><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z"/><path d="M14 3v6h6M9 13h6M9 17h4"/></svg>
      <div style="font-size:11px;color:#475569">入驻规则</div>
    </div>
    <div class="card" style="flex:1;margin:0;padding:12px;text-align:center;cursor:pointer" onclick="goPage('rules')">
      <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:#1e3a5f;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px"><path d="M3 7h18M3 12h18M3 17h18"/></svg>
      <div style="font-size:11px;color:#475569">平台规则</div>
    </div>
    <div class="card" style="flex:1;margin:0;padding:12px;text-align:center;cursor:pointer" onclick="showAlert('企业微信群入口')">
      <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:#1e3a5f;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8z"/></svg>
      <div style="font-size:11px;color:#475569">企业群</div>
    </div>
  </div>

  <div style="padding:4px 12px 8px">
    <div style="background:linear-gradient(90deg,#0f172a,#1e3a5f);color:#fff;padding:10px 14px;border-radius:8px;display:flex;align-items:center;gap:10px">
      <svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#fbbf24;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
      <div style="flex:1;font-size:12px;letter-spacing:0.3px"><b>限时活动：</b>新入驻服务商首单免抽佣</div>
      <div style="font-size:11px;opacity:0.8">立即申请 ›</div>
    </div>
  </div>

  <div class="search-section">
    <div class="search-row">
      <div class="search-input-wrap">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
        <input type="text" placeholder="搜索服务商 / 需求 / 设备">
      </div>
      <button class="search-btn">搜索</button>
    </div>
  </div>

  <div class="filter-bar">
    <div class="chip active">全部</div>
    <div class="chip">工程造价</div>
    <div class="chip">法律服务</div>
    <div class="chip">工程资料</div>
    <div class="chip">人才劳务</div>
    <div class="chip">机械设备</div>
    <div class="chip">智能建造</div>
  </div>

  <div class="section-title">推荐服务商 <span class="more">查看全部 ›</span></div>
  <div class="list-section">
    <div class="list-card" onclick="showProvider('cost')">
      <div class="list-avatar" style="background:#1e3a5f"><svg viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg></div>
      <div class="list-info">
        <div class="list-name">李造价 <span class="tag">认证</span></div>
        <div class="list-meta">新疆建工造价咨询有限公司 · 12年经验</div>
        <div class="list-tags"><span class="list-tag">土建</span><span class="list-tag">安装</span><span class="list-tag gray">乌鲁木齐</span></div>
        <div class="list-meta star">★ 4.9 · 156个项目</div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('cost')">咨询</button>
    </div>

    <div class="list-card" onclick="showProvider('legal')">
      <div class="list-avatar" style="background:#0f172a"><svg viewBox="0 0 24 24"><path d="M12 3v18M5 7h7M5 12h7M5 17h7M19 7h-2M19 12h-2M19 17h-2"/></svg></div>
      <div class="list-info">
        <div class="list-name">王律师 <span class="tag">认证</span></div>
        <div class="list-meta">新疆某律师事务所 · 8年经验</div>
        <div class="list-tags"><span class="list-tag">工程合同</span><span class="list-tag">欠款催收</span></div>
        <div class="list-meta star">★ 4.8 · 89个咨询</div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('legal')">咨询</button>
    </div>

    <div class="list-card" onclick="showProvider('data')">
      <div class="list-avatar" style="background:#475569"><svg viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z"/><path d="M14 3v6h6M9 13h6M9 17h4"/></svg></div>
      <div class="list-info">
        <div class="list-name">张资料 <span class="tag green">认证</span></div>
        <div class="list-meta">10年资料整理经验 · 持证资料员</div>
        <div class="list-tags"><span class="list-tag">竣工资料</span><span class="list-tag">房建</span></div>
        <div class="list-meta star">★ 4.9 · 124个项目</div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('data')">咨询</button>
    </div>
  </div>

  <div class="fab" onclick="goPage('post')"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
</div>


<!-- ============== 交易大厅 ============== -->
<div class="page" id="page-deal">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">交易大厅</div>
    <div class="nav-right"><svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg></div>
  </div>

  <div class="banner-section" style="height:140px">
    <div class="banner-slide" style="background:linear-gradient(135deg,#0f172a,#1e3a5f)">
      <svg class="decor" viewBox="0 0 450 140" preserveAspectRatio="none"><rect x="40" y="30" width="80" height="60" stroke="#fff" stroke-width="1" fill="none"/><rect x="180" y="20" width="90" height="70" stroke="#fff" stroke-width="1" fill="none"/><rect x="320" y="35" width="80" height="55" stroke="#fff" stroke-width="1" fill="none"/></svg>
      <div class="bs-content">
        <div class="bs-title">交易大厅</div>
        <div class="bs-sub" style="margin-top:6px">招标 · 求购 · 需求 一站式对接</div>
      </div>
    </div>
  </div>

  <div class="stats-bar">
    <div class="stat-item"><div class="stat-num">186</div><div class="stat-label">进行中</div></div>
    <div class="stat-item"><div class="stat-num">52</div><div class="stat-label">本周新增</div></div>
    <div class="stat-item"><div class="stat-num">96%</div><div class="stat-label">成交率</div></div>
    <div class="stat-item"><div class="stat-num">2.4亿</div><div class="stat-label">累计金额</div></div>
  </div>

  <div class="deal-tabs">
    <div class="deal-tab active">油田工程 <span class="deal-tab-count">58</span></div>
    <div class="deal-tab">建筑工程 <span class="deal-tab-count">86</span></div>
    <div class="deal-tab">机电工程 <span class="deal-tab-count">24</span></div>
    <div class="deal-tab">IT服务 <span class="deal-tab-count">12</span></div>
    <div class="deal-tab">商品交易 <span class="deal-tab-count">6</span></div>
  </div>

  <div class="filter-bar">
    <div class="chip active">全部类型</div>
    <div class="chip">招标</div>
    <div class="chip">求购</div>
    <div class="chip">需求</div>
    <div class="chip">紧急</div>
  </div>

  <div class="list-section">
    <div class="project-card" onclick="showProjectDetail()">
      <div class="project-type" style="background:#991b1b"><svg viewBox="0 0 24 24"><path d="M3 21h18M5 21V7l8-4 8 4v14M9 9h.01M9 13h.01M9 17h.01M15 9h.01M15 13h.01M15 17h.01"/></svg></div>
      <div class="project-info">
        <div class="project-name">克拉玛依油田钻井设备紧急采购招标</div>
        <div class="project-tags">
          <span class="tag-pill">招标</span>
          <span class="tag-pill danger">紧急</span>
          <span class="tag-pill">钻井设备</span>
          <span class="tag-pill">克拉玛依</span>
        </div>
        <div class="project-meta">
          <span><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> 截止 06-25</span>
          <span><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> 8人投标</span>
        </div>
        <div class="project-amount">¥ 280 万</div>
      </div>
    </div>

    <div class="project-card" onclick="showProjectDetail()">
      <div class="project-type" style="background:#b45309"><svg viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6"/></svg></div>
      <div class="project-info">
        <div class="project-name">求购5吨级振动压路机一台</div>
        <div class="project-tags">
          <span class="tag-pill">求购</span>
          <span class="tag-pill">机械设备</span>
          <span class="tag-pill">乌鲁木齐</span>
        </div>
        <div class="project-meta">
          <span><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> 截止 07-10</span>
          <span><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> 3人投标</span>
        </div>
        <div class="project-amount">¥ 8 - 12 万</div>
      </div>
    </div>

    <div class="project-card" onclick="showProjectDetail()">
      <div class="project-type" style="background:#1e3a5f"><svg viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg></div>
      <div class="project-info">
        <div class="project-name">乌鲁木齐市XX住宅小区施工图预算编制</div>
        <div class="project-tags">
          <span class="tag-pill">需求</span>
          <span class="tag-pill">工程造价</span>
          <span class="tag-pill">乌鲁木齐</span>
        </div>
        <div class="project-meta">
          <span><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> 截止 06-30</span>
          <span><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> 15人投标</span>
        </div>
        <div class="project-amount">¥ 5 - 8 万</div>
      </div>
    </div>

    <div class="project-card" onclick="showProjectDetail()">
      <div class="project-type" style="background:#166534"><svg viewBox="0 0 24 24"><path d="M14 3v4a1 1 0 001 1h4M17 21H7a2 2 0 01-2-2V5a2 2 0 012-2h7l5 5v11a2 2 0 01-2 2z"/><path d="M9 13h6M9 17h4"/></svg></div>
      <div class="project-info">
        <div class="project-name">哈密光伏电站项目土建劳务招标</div>
        <div class="project-tags">
          <span class="tag-pill">招标</span>
          <span class="tag-pill success">劳务分包</span>
          <span class="tag-pill">哈密</span>
        </div>
        <div class="project-meta">
          <span><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> 截止 07-05</span>
          <span><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> 22人投标</span>
        </div>
        <div class="project-amount">¥ 120 万</div>
      </div>
    </div>

    <div class="project-card" onclick="showProjectDetail()">
      <div class="project-type" style="background:#0f172a"><svg viewBox="0 0 24 24"><path d="M12 3v18M5 7h7M5 12h7M5 17h7M19 7h-2M19 12h-2M19 17h-2"/></svg></div>
      <div class="project-info">
        <div class="project-name">某油田工程合同纠纷法律咨询</div>
        <div class="project-tags">
          <span class="tag-pill">需求</span>
          <span class="tag-pill">法律服务</span>
          <span class="tag-pill">全疆</span>
        </div>
        <div class="project-meta">
          <span><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> 长期</span>
          <span><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> 6人投标</span>
        </div>
        <div class="project-amount">面议</div>
      </div>
    </div>
  </div>
</div>


<!-- ============== 工程造价 ============== -->
<div class="page" id="page-cost">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">工程造价</div>
    <div class="nav-right">⋯</div>
  </div>

  <div class="banner-section">
    <div class="banner-track" id="costBanner">
      <div class="banner-slide" style="background:linear-gradient(135deg,#0f172a,#1e3a5f)">
        <svg class="decor" viewBox="0 0 450 180" preserveAspectRatio="none"><polyline points="0,150 60,120 120,140 180,90 240,110 300,60 360,90 450,50" stroke="#fff" stroke-width="1" fill="none"/><polyline points="0,170 100,140 200,150 300,120 450,130" stroke="#fff" stroke-width="1" fill="none"/></svg>
        <div class="bs-content"><div class="bs-title">工程造价数字化</div><div class="bs-sub" style="margin-top:8px">PRECISE · EFFICIENT · TRANSPARENT</div></div>
      </div>
      <div class="banner-slide" style="background:linear-gradient(135deg,#1e3a5f,#0f172a)">
        <svg class="decor" viewBox="0 0 450 180" preserveAspectRatio="none"><circle cx="100" cy="90" r="60" stroke="#fff" stroke-width="1" fill="none"/><circle cx="350" cy="90" r="40" stroke="#fff" stroke-width="1" fill="none"/><line x1="160" y1="90" x2="310" y2="90" stroke="#fff" stroke-width="1"/></svg>
        <div class="bs-content"><div class="bs-title">智能造价分析</div><div class="bs-sub" style="margin-top:8px">AUTO · COMPARE · OPTIMIZE</div></div>
      </div>
    </div>
    <div class="banner-dots">
      <div class="banner-dot active" onclick="goBanner(0,'costBanner')"></div>
      <div class="banner-dot" onclick="goBanner(1,'costBanner')"></div>
    </div>
  </div>

  <div style="background:linear-gradient(135deg,#0f172a,#1e3a5f);padding:18px 16px;color:#fff">
    <h1 style="font-size:18px;font-weight:700;letter-spacing:1px">工程造价</h1>
    <p style="font-size:11px;opacity:0.75;margin-top:4px;letter-spacing:0.5px">投资估算 · 设计概算 · 竣工结算 · 全过程造价咨询</p>
    <div style="display:flex;gap:8px;margin-top:14px">
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:17px;font-weight:700">1,800+</div><div style="font-size:10px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">入驻造价师</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:17px;font-weight:700">3,500+</div><div style="font-size:10px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">完成项目</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:17px;font-weight:700">96.8%</div><div style="font-size:10px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">好评率</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:17px;font-weight:700">24h</div><div style="font-size:10px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">响应时效</div></div>
    </div>
  </div>

  <div class="search-section">
    <div class="search-row">
      <div class="search-input-wrap">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
        <input type="text" placeholder="搜索造价师...">
      </div>
      <button class="search-btn">搜索</button>
    </div>
  </div>

  <div style="background:#fff;padding:10px 14px;display:flex;gap:8px">
    <div style="flex:1;padding:9px;border:1px solid #1e3a5f;color:#1e3a5f;border-radius:6px;text-align:center;font-size:12px;font-weight:600;background:#f8fafc;letter-spacing:0.3px">专业类型 ▾</div>
    <div style="flex:1;padding:9px;border:1px solid #b91c1c;color:#b91c1c;border-radius:6px;text-align:center;font-size:12px;font-weight:600;background:#fef2f2;letter-spacing:0.3px">找茬专家 ▾</div>
  </div>

  <div class="filter-bar">
    <div class="chip" style="font-size:11px;color:#64748b;background:transparent;border:none;cursor:default;padding:5px 4px">类型：</div>
    <div class="chip active">全部</div>
    <div class="chip">土建</div>
    <div class="chip">安装</div>
    <div class="chip">市政</div>
    <div class="chip">园林</div>
    <div class="chip">水利</div>
    <div class="chip">公路</div>
    <div class="chip">装饰</div>
    <div class="chip">石化</div>
    <div class="chip">电力</div>
  </div>

  <div class="filter-bar" style="padding-top:0">
    <div class="chip" style="font-size:11px;color:#64748b;background:transparent;border:none;cursor:default;padding:5px 4px">地区：</div>
    <div class="chip active">乌鲁木齐</div>
    <div class="chip">克拉玛依</div>
    <div class="chip">吐鲁番</div>
    <div class="chip">哈密</div>
    <div class="chip">阿克苏</div>
    <div class="chip">喀什</div>
    <div class="chip">和田</div>
  </div>

  <div class="list-section">
    <div class="list-card" onclick="showProvider('cost')">
      <div class="list-avatar" style="background:#1e3a5f"><svg viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg></div>
      <div class="list-info">
        <div class="list-name">李造价 <span class="tag">认证</span></div>
        <div class="list-meta">新疆建工造价咨询有限公司</div>
        <div class="list-tags"><span class="list-tag">土建</span><span class="list-tag">安装</span><span class="list-tag gray">乌鲁木齐</span></div>
        <div class="list-meta star">★ 4.9 <span style="color:#94a3b8;font-weight:400">(56)</span></div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('cost')">咨询</button>
    </div>

    <div class="list-card" onclick="showProvider('cost')">
      <div class="list-avatar" style="background:#1e3a5f"><svg viewBox="0 0 24 24"><path d="M20 7h-9M14 17H5M17 20a3 3 0 100-6 3 3 0 000 6zM7 10a3 3 0 100-6 3 3 0 000 6z"/></svg></div>
      <div class="list-info">
        <div class="list-name">王高级 <span class="tag">专家</span></div>
        <div class="list-meta">甲级造价咨询机构 · 高级工程师</div>
        <div class="list-tags"><span class="list-tag">市政</span><span class="list-tag">公路</span><span class="list-tag gray">全疆</span></div>
        <div class="list-meta star">★ 4.8 <span style="color:#94a3b8;font-weight:400">(89)</span></div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('cost')">咨询</button>
    </div>

    <div class="list-card" onclick="showProvider('cost')">
      <div class="list-avatar" style="background:#1e3a5f"><svg viewBox="0 0 24 24"><path d="M14 3v4a1 1 0 001 1h4M17 21H7a2 2 0 01-2-2V5a2 2 0 012-2h7l5 5v11a2 2 0 01-2 2z"/><path d="M9 13h6M9 17h4"/></svg></div>
      <div class="list-info">
        <div class="list-name">张注册造价师 <span class="tag">认证</span></div>
        <div class="list-meta">某工程造价事务所 · 15年经验</div>
        <div class="list-tags"><span class="list-tag">水利</span><span class="list-tag">电力</span><span class="list-tag gray">阿克苏</span></div>
        <div class="list-meta star">★ 4.9 <span style="color:#94a3b8;font-weight:400">(124)</span></div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('cost')">咨询</button>
    </div>
  </div>
</div>


<!-- ============== 法律服务 ============== -->
<div class="page" id="page-legal">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">工程法律服务</div>
    <div class="nav-right">⋯</div>
  </div>

  <div style="background:linear-gradient(135deg,#0f172a,#1e3a5f);padding:20px 16px 18px;color:#fff;position:relative;overflow:hidden">
    <svg style="position:absolute;top:0;right:0;opacity:0.08" width="200" height="200" viewBox="0 0 200 200"><path d="M100 20 L150 60 L150 140 L100 180 L50 140 L50 60 Z" stroke="#fff" stroke-width="2" fill="none"/></svg>
    <h1 style="font-size:20px;font-weight:700;letter-spacing:1px;position:relative">工程法律服务</h1>
    <p style="font-size:12px;opacity:0.75;margin-top:4px;letter-spacing:0.5px">专业律师 · 在线咨询 · 案件代理</p>
    <div style="display:flex;gap:14px;margin-top:16px;position:relative">
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">186</div><div style="font-size:11px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">入驻律师</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">2,358</div><div style="font-size:11px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">服务案例</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">97.2%</div><div style="font-size:11px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">好评率</div></div>
    </div>
  </div>

  <div class="search-section">
    <div class="search-row">
      <div class="search-input-wrap">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
        <input type="text" placeholder="搜索律师姓名...">
      </div>
      <button class="search-btn">搜索</button>
    </div>
  </div>

  <div class="filter-bar">
    <div class="chip" style="font-size:11px;color:#64748b;background:transparent;border:none;cursor:default;padding:5px 4px">擅长：</div>
    <div class="chip active">全部</div>
    <div class="chip">工程合同</div>
    <div class="chip">欠款催收</div>
    <div class="chip">劳动工伤</div>
    <div class="chip">交通事故</div>
    <div class="chip">公司法务</div>
  </div>

  <div class="filter-bar" style="padding-top:0">
    <div class="chip" style="font-size:11px;color:#64748b;background:transparent;border:none;cursor:default;padding:5px 4px">地区：</div>
    <div class="chip active">乌鲁木齐</div>
    <div class="chip">全疆</div>
    <div class="chip">昌吉</div>
    <div class="chip">伊犁</div>
  </div>

  <div class="list-section">
    <div class="list-card" onclick="showProvider('legal')">
      <div class="list-avatar" style="background:#0f172a"><svg viewBox="0 0 24 24"><path d="M12 3v18M5 7h7M5 12h7M5 17h7M19 7h-2M19 12h-2M19 17h-2"/></svg></div>
      <div class="list-info">
        <div class="list-name">王律师 <span class="tag">认证</span></div>
        <div class="list-meta">新疆某律师事务所 · 合伙人 · 8年</div>
        <div class="list-tags"><span class="list-tag">工程合同</span><span class="list-tag">欠款催收</span><span class="list-tag gray">乌鲁木齐</span></div>
        <div class="list-meta star">★ 4.8 <span style="color:#94a3b8;font-weight:400">(89)</span></div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('legal')">咨询</button>
    </div>

    <div class="list-card" onclick="showProvider('legal')">
      <div class="list-avatar" style="background:#0f172a"><svg viewBox="0 0 24 24"><path d="M14 3v4a1 1 0 001 1h4M17 21H7a2 2 0 01-2-2V5a2 2 0 012-2h7l5 5v11a2 2 0 01-2 2z"/></svg></div>
      <div class="list-info">
        <div class="list-name">马律师 <span class="tag">认证</span></div>
        <div class="list-meta">新疆某律师事务所 · 12年</div>
        <div class="list-tags"><span class="list-tag">劳动工伤</span><span class="list-tag">公司法务</span><span class="list-tag gray">全疆</span></div>
        <div class="list-meta star">★ 4.9 <span style="color:#94a3b8;font-weight:400">(76)</span></div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('legal')">咨询</button>
    </div>

    <div class="list-card" onclick="showProvider('legal')">
      <div class="list-avatar" style="background:#0f172a"><svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg></div>
      <div class="list-info">
        <div class="list-name">刘律师 <span class="tag green">公益</span></div>
        <div class="list-meta">新疆某公益法律服务中心</div>
        <div class="list-tags"><span class="list-tag">交通事故</span><span class="list-tag">婚姻继承</span><span class="list-tag gray">乌鲁木齐</span></div>
        <div class="list-meta star">★ 4.7 <span style="color:#94a3b8;font-weight:400">(免费咨询)</span></div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('legal')">咨询</button>
    </div>
  </div>
</div>


<!-- ============== 工程资料 ============== -->
<div class="page" id="page-data">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">工程资料</div>
    <div class="nav-right">⋯</div>
  </div>

  <div style="background:linear-gradient(135deg,#475569,#0f172a);padding:20px 16px 18px;color:#fff">
    <h1 style="font-size:20px;font-weight:700;letter-spacing:1px">工程资料</h1>
    <p style="font-size:12px;opacity:0.75;margin-top:4px;letter-spacing:0.5px">专业资料员 · 竣工资料 · 过程资料整理</p>
    <div style="display:flex;gap:14px;margin-top:16px">
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">520+</div><div style="font-size:11px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">资料员</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">1,856</div><div style="font-size:11px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">完成项目</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">98%</div><div style="font-size:11px;opacity:0.7;margin-top:2px;letter-spacing:0.3px">好评率</div></div>
    </div>
  </div>

  <div class="search-section">
    <div class="search-row">
      <div class="search-input-wrap">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
        <input type="text" placeholder="搜索资料员...">
      </div>
      <button class="search-btn">搜索</button>
    </div>
  </div>

  <div class="filter-bar">
    <div class="chip" style="font-size:11px;color:#64748b;background:transparent;border:none;cursor:default;padding:5px 4px">擅长：</div>
    <div class="chip active">全部</div>
    <div class="chip">竣工资料</div>
    <div class="chip">过程资料</div>
    <div class="chip">安全资料</div>
    <div class="chip">监理资料</div>
  </div>

  <div class="filter-bar" style="padding-top:0">
    <div class="chip" style="font-size:11px;color:#64748b;background:transparent;border:none;cursor:default;padding:5px 4px">地区：</div>
    <div class="chip active">乌鲁木齐</div>
    <div class="chip">全疆</div>
    <div class="chip">昌吉</div>
  </div>

  <div class="list-section">
    <div class="list-card" onclick="showProvider('data')">
      <div class="list-avatar" style="background:#475569"><svg viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z"/><path d="M14 3v6h6M9 13h6M9 17h4"/></svg></div>
      <div class="list-info">
        <div class="list-name">张资料 <span class="tag green">认证</span></div>
        <div class="list-meta">持证资料员 · 10年经验</div>
        <div class="list-tags"><span class="list-tag">竣工资料</span><span class="list-tag gray">乌鲁木齐</span></div>
        <div class="list-meta star">★ 4.9 <span style="color:#94a3b8;font-weight:400">(124)</span></div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('data')">咨询</button>
    </div>

    <div class="list-card" onclick="showProvider('data')">
      <div class="list-avatar" style="background:#475569"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg></div>
      <div class="list-info">
        <div class="list-name">李资料员 <span class="tag green">认证</span></div>
        <div class="list-meta">某建工集团资料部 · 8年</div>
        <div class="list-tags"><span class="list-tag">过程资料</span><span class="list-tag">房建</span><span class="list-tag gray">昌吉</span></div>
        <div class="list-meta star">★ 4.8 <span style="color:#94a3b8;font-weight:400">(86)</span></div>
      </div>
      <button class="cons-btn" onclick="event.stopPropagation();showProvider('data')">咨询</button>
    </div>
  </div>
</div>


<!-- ============== 人才劳务 ============== -->
<div class="page" id="page-talent">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">人才 / 劳务</div>
    <div class="nav-right">⋯</div>
  </div>

  <div style="background:linear-gradient(135deg,#1e40af,#0f172a);padding:20px 16px;color:#fff">
    <h1 style="font-size:20px;font-weight:700;letter-spacing:1px">人才 · 劳务</h1>
    <p style="font-size:12px;opacity:0.75;margin-top:4px;letter-spacing:0.5px">专业人才库 · 劳务班组 · 全疆覆盖</p>
    <div style="display:flex;gap:14px;margin-top:16px">
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">12,540</div><div style="font-size:11px;opacity:0.7;margin-top:2px">专业人才</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">11</div><div style="font-size:11px;opacity:0.7;margin-top:2px">专业领域</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">5,200+</div><div style="font-size:11px;opacity:0.7;margin-top:2px">成功案例</div></div>
    </div>
  </div>

  <div class="tab-bar2">
    <div class="tab-item2 active" onclick="switchTalentView('lib',this)">人才库</div>
    <div class="tab-item2" onclick="switchTalentView('team',this)">劳务班组</div>
  </div>

  <div class="filter-bar">
    <div class="chip active">全部</div>
    <div class="chip">建筑</div>
    <div class="chip">石油</div>
    <div class="chip">化工</div>
    <div class="chip">电力</div>
    <div class="chip">水利</div>
    <div class="chip">市政</div>
    <div class="chip">矿山</div>
  </div>

  <div class="list-section" id="talentList">
    <div class="list-card">
      <div class="list-avatar" style="background:#1e40af"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
      <div class="list-info">
        <div class="list-name">王工 <span class="tag">高级</span></div>
        <div class="list-meta">某建工集团 · 项目经理 · 15年</div>
        <div class="list-tags"><span class="list-tag">建筑</span><span class="list-tag gray">乌鲁木齐</span></div>
        <div class="list-meta star">★ 4.8 · 38个项目</div>
      </div>
      <button class="cons-btn">联系</button>
    </div>

    <div class="list-card">
      <div class="list-avatar" style="background:#1e40af"><svg viewBox="0 0 24 24"><path d="M12 2v4M8 6h8l-1 14H9z"/></svg></div>
      <div class="list-info">
        <div class="list-name">陈师傅 <span class="tag">技师</span></div>
        <div class="list-meta">钻井技师 · 12年油田经验</div>
        <div class="list-tags"><span class="list-tag">石油</span><span class="list-tag gray">克拉玛依</span></div>
        <div class="list-meta star">★ 4.9 · 56个项目</div>
      </div>
      <button class="cons-btn">联系</button>
    </div>
  </div>
</div>

<!-- ============== 机械建材 ============== -->
<div class="page" id="page-machinery">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">机械建材供应</div>
    <div class="nav-right">⋯</div>
  </div>

  <div style="background:linear-gradient(135deg,#b45309,#7c2d12);padding:18px 16px;color:#fff">
    <h1 style="font-size:18px;font-weight:700;letter-spacing:1px">机械建材供应</h1>
    <p style="font-size:12px;opacity:0.75;margin-top:4px;letter-spacing:0.5px">机械租赁 · 建材供应 · 优质商家</p>
    <div style="display:flex;gap:8px;margin-top:14px">
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:17px;font-weight:700">3,860</div><div style="font-size:10px;opacity:0.7;margin-top:2px">入驻商家</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:17px;font-weight:700">28,500</div><div style="font-size:10px;opacity:0.7;margin-top:2px">在售商品</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:17px;font-weight:700">5.8亿</div><div style="font-size:10px;opacity:0.7;margin-top:2px">累计交易</div></div>
    </div>
  </div>

  <div class="search-section">
    <div class="search-row">
      <div class="search-input-wrap">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
        <input type="text" placeholder="搜索机械 / 建材 / 型号...">
      </div>
      <button class="search-btn">搜索</button>
    </div>
  </div>

  <div class="deal-tabs">
    <div class="deal-tab active">机械租赁</div>
    <div class="deal-tab">建材供应</div>
    <div class="deal-tab">优质商家</div>
    <div class="deal-tab">交流圈</div>
  </div>

  <div style="background:#fff;padding:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-bottom:1px solid #f1f5f9">
    <div style="text-align:center;cursor:pointer"><div style="width:36px;height:36px;margin:0 auto 4px;background:#fef3c7;border-radius:8px;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#b45309;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><rect x="3" y="11" width="14" height="8" rx="1"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/><path d="M17 11V7a2 2 0 00-2-2h-2"/></svg></div><div style="font-size:11px;color:#334155">工程车辆</div></div>
    <div style="text-align:center;cursor:pointer"><div style="width:36px;height:36px;margin:0 auto 4px;background:#fef3c7;border-radius:8px;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#b45309;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 9h18M9 3v18"/></svg></div><div style="font-size:11px;color:#334155">建筑模板</div></div>
    <div style="text-align:center;cursor:pointer"><div style="width:36px;height:36px;margin:0 auto 4px;background:#fef3c7;border-radius:8px;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#b45309;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg></div><div style="font-size:11px;color:#334155">五金紧固</div></div>
    <div style="text-align:center;cursor:pointer"><div style="width:36px;height:36px;margin:0 auto 4px;background:#fef3c7;border-radius:8px;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#b45309;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M9 9h6v6H9z"/></svg></div><div style="font-size:11px;color:#334155">混凝土</div></div>
    <div style="text-align:center;cursor:pointer"><div style="width:36px;height:36px;margin:0 auto 4px;background:#fef3c7;border-radius:8px;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#b45309;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div><div style="font-size:11px;color:#334155">电气设备</div></div>
    <div style="text-align:center;cursor:pointer"><div style="width:36px;height:36px;margin:0 auto 4px;background:#fef3c7;border-radius:8px;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#b45309;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div><div style="font-size:11px;color:#334155">安全防护</div></div>
    <div style="text-align:center;cursor:pointer"><div style="width:36px;height:36px;margin:0 auto 4px;background:#fef3c7;border-radius:8px;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#b45309;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><path d="M2 22h20M4 22V10l8-6 8 6v12"/></svg></div><div style="font-size:11px;color:#334155">木材加工</div></div>
    <div style="text-align:center;cursor:pointer"><div style="width:36px;height:36px;margin:0 auto 4px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#94a3b8;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></div><div style="font-size:11px;color:#64748b">更多</div></div>
  </div>

  <div class="filter-bar">
    <div class="chip active">综合推荐</div>
    <div class="chip">销量优先</div>
    <div class="chip">价格最低</div>
    <div class="chip">最新上架</div>
  </div>

  <div class="filter-bar" style="padding-top:0">
    <div class="chip" style="font-size:11px;color:#64748b;background:transparent;border:none;cursor:default;padding:5px 4px">价格：</div>
    <div class="chip">不限</div>
    <div class="chip">0-500</div>
    <div class="chip">500-2000</div>
    <div class="chip">2000-10000</div>
    <div class="chip">10000+</div>
  </div>

  <div class="list-section">
    <div class="list-card">
      <div class="list-avatar" style="background:#b45309"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="14" height="8" rx="1"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/><path d="M17 11V7a2 2 0 00-2-2h-2"/></svg></div>
      <div class="list-info">
        <div class="list-name">卡特彼勒 320D 挖掘机 <span class="tag">认证</span></div>
        <div class="list-meta">新疆某工程机械租赁公司</div>
        <div class="list-tags"><span class="list-tag">20吨级</span><span class="list-tag gray">乌鲁木齐</span></div>
        <div class="project-amount">¥ 1,200 / 天</div>
      </div>
      <button class="cons-btn">询价</button>
    </div>

    <div class="list-card">
      <div class="list-avatar" style="background:#b45309"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 9h18M9 3v18"/></svg></div>
      <div class="list-info">
        <div class="list-name">C30商品混凝土 <span class="tag green">认证</span></div>
        <div class="list-meta">新疆某建材集团</div>
        <div class="list-tags"><span class="list-tag">建材</span><span class="list-tag gray">全疆</span></div>
        <div class="project-amount">¥ 480 / m³</div>
      </div>
      <button class="cons-btn">询价</button>
    </div>

    <div class="list-card">
      <div class="list-avatar" style="background:#b45309"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="14" height="8" rx="1"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/><path d="M17 11V7a2 2 0 00-2-2h-2"/></svg></div>
      <div class="list-info">
        <div class="list-name">徐工 50 装载机 <span class="tag">认证</span></div>
        <div class="list-meta">某工程机械公司</div>
        <div class="list-tags"><span class="list-tag">5吨级</span><span class="list-tag gray">昌吉</span></div>
        <div class="project-amount">¥ 800 / 天</div>
      </div>
      <button class="cons-btn">询价</button>
    </div>
  </div>
</div>


<!-- ============== 智能建造 ============== -->
<div class="page" id="page-smart">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">智能建造</div>
    <div class="nav-right">⋯</div>
  </div>

  <div class="banner-section" style="height:140px">
    <div class="banner-slide" style="background:linear-gradient(135deg,#0e7490,#0f172a)">
      <svg class="decor" viewBox="0 0 450 140" preserveAspectRatio="none"><rect x="40" y="30" width="80" height="60" stroke="#fff" stroke-width="1" fill="none"/><circle cx="100" cy="60" r="15" stroke="#fff" stroke-width="1" fill="none"/><line x1="80" y1="90" x2="80" y2="110" stroke="#fff" stroke-width="1"/><line x1="120" y1="90" x2="120" y2="110" stroke="#fff" stroke-width="1"/></svg>
      <div class="bs-content">
        <div class="bs-title">智能建造 · 数字未来</div>
        <div class="bs-sub" style="margin-top:8px">INTELLIGENT · DIGITAL · FUTURE</div>
      </div>
    </div>
  </div>

  <div class="stats-bar">
    <div class="stat-item"><div class="stat-num">256</div><div class="stat-label">认证服务商</div></div>
    <div class="stat-item"><div class="stat-num">892</div><div class="stat-label">成功案例</div></div>
    <div class="stat-item"><div class="stat-num">97%</div><div class="stat-label">好评率</div></div>
  </div>

  <div class="tab-bar2">
    <div class="tab-item2 active">石油化工</div>
    <div class="tab-item2">建筑工程</div>
  </div>

  <div class="filter-bar">
    <div class="chip active">全部</div>
    <div class="chip">智能装备</div>
    <div class="chip">工业软件</div>
    <div class="chip">传感器</div>
    <div class="chip">机器人</div>
    <div class="chip">系统集成</div>
    <div class="chip">数字孪生</div>
    <div class="chip">BIM</div>
  </div>

  <div class="list-section">
    <div class="list-card">
      <div class="list-avatar" style="background:#0e7490"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/><circle cx="9" cy="9" r="1"/><circle cx="15" cy="15" r="1"/></svg></div>
      <div class="list-info">
        <div class="list-name">某智能装备公司 <span class="tag">认证</span></div>
        <div class="list-meta">智能装备 · 工业自动化</div>
        <div class="list-tags"><span class="list-tag">智能装备</span><span class="list-tag gray">乌鲁木齐</span></div>
        <div class="list-meta">已服务 86 个项目</div>
      </div>
      <button class="cons-btn">咨询</button>
    </div>

    <div class="list-card">
      <div class="list-avatar" style="background:#0e7490"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div>
      <div class="list-info">
        <div class="list-name">某BIM服务商 <span class="tag">专家</span></div>
        <div class="list-meta">BIM建模 · 数字孪生 · 全过程咨询</div>
        <div class="list-tags"><span class="list-tag">BIM</span><span class="list-tag">数字孪生</span></div>
        <div class="list-meta">已服务 124 个项目</div>
      </div>
      <button class="cons-btn">咨询</button>
    </div>
  </div>
</div>

<!-- ============== 油田工程 ============== -->
<div class="page" id="page-oil">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">油田工程</div>
    <div class="nav-right">⋯</div>
  </div>

  <div class="banner-section" style="height:160px">
    <div class="banner-slide" style="background:linear-gradient(135deg,#7f1d1d,#0f172a)">
      <svg class="decor" viewBox="0 0 450 160" preserveAspectRatio="none"><circle cx="80" cy="80" r="35" stroke="#fff" stroke-width="1" fill="none"/><path d="M80 45 L80 115 M45 80 L115 80" stroke="#fff" stroke-width="1"/><rect x="320" y="40" width="80" height="80" stroke="#fff" stroke-width="1" fill="none"/></svg>
      <div class="bs-content"><div class="bs-title">新疆油田工程服务</div><div class="bs-sub" style="margin-top:8px">DRILLING · EXTRACTION · MAINTENANCE</div></div>
    </div>
  </div>

  <div style="background:linear-gradient(135deg,#0f172a,#1e3a5f);margin:-30px 12px 0;border-radius:8px;padding:14px;color:#fff;position:relative;z-index:10;box-shadow:0 6px 20px rgba(15,23,42,0.18);border:1px solid rgba(255,255,255,0.08)">
    <div style="display:flex;gap:10px">
      <div style="flex:1;text-align:center"><div style="font-size:18px;font-weight:700">386</div><div style="font-size:11px;opacity:0.7;margin-top:2px">在线工人</div></div>
      <div style="flex:1;text-align:center;border-left:1px solid rgba(255,255,255,0.15);border-right:1px solid rgba(255,255,255,0.15)"><div style="font-size:18px;font-weight:700">1,280</div><div style="font-size:11px;opacity:0.7;margin-top:2px">成功撮合</div></div>
      <div style="flex:1;text-align:center"><div style="font-size:18px;font-weight:700">98.6%</div><div style="font-size:11px;opacity:0.7;margin-top:2px">好评率</div></div>
    </div>
  </div>

  <div style="background:#fff;padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px">
    <div class="feature-item" onclick="showAlert('零散劳务 - 钻井工/采油工/井下作业/管工/焊工/其他')"><div class="feature-icon" style="background:#991b1b"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div><div class="feature-label">零散劳务</div></div>
    <div class="feature-item" onclick="showAlert('二手设备 - 钻井/采油/井下工具等')"><div class="feature-icon" style="background:#7c2d12"><svg viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6"/></svg></div><div class="feature-label">二手设备</div></div>
    <div class="feature-item" onclick="showAlert('设备维保 - 日常保养/计划维修/紧急抢修等')"><div class="feature-icon" style="background:#b45309"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg></div><div class="feature-label">设备维保</div></div>
    <div class="feature-item" onclick="showAlert('技术服务商 - 钻井/采油/油藏/油田化学/数字油田等')"><div class="feature-icon" style="background:#1e40af"><svg viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div><div class="feature-label">技术服务商</div></div>
    <div class="feature-item" onclick="goPage('train')"><div class="feature-icon" style="background:#166534"><svg viewBox="0 0 24 24"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg></div><div class="feature-label">技能培训</div></div>
    <div class="feature-item" onclick="showAlert('其他服务')"><div class="feature-icon" style="background:#6b21a8"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg></div><div class="feature-label">其他服务</div></div>
  </div>

  <div class="section-title">油田零散劳务</div>
  <div class="list-section">
    <div class="list-card">
      <div class="list-avatar" style="background:#991b1b"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M5 21v-2a4 4 0 014-4h6a4 4 0 014 4v2"/></svg></div>
      <div class="list-info">
        <div class="list-name">张师傅 <span class="tag">认证</span></div>
        <div class="list-meta">钻井工 · 持证上岗 · 8年</div>
        <div class="list-tags"><span class="list-tag">钻井工</span><span class="list-tag gray">克拉玛依</span></div>
        <div class="project-amount">¥ 380 / 天</div>
      </div>
      <button class="cons-btn">联系</button>
    </div>

    <div class="list-card">
      <div class="list-avatar" style="background:#991b1b"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg></div>
      <div class="list-info">
        <div class="list-name">王技师 <span class="tag">专家</span></div>
        <div class="list-meta">采油技师 · 12年</div>
        <div class="list-tags"><span class="list-tag">采油工</span><span class="list-tag gray">全疆</span></div>
        <div class="project-amount">¥ 420 / 天</div>
      </div>
      <button class="cons-btn">联系</button>
    </div>
  </div>

  <button class="action-btn" onclick="goPage('post')">发布油田工程需求</button>
  <button class="action-btn outline" onclick="showAlert('入驻申请提交成功，请填写详细资料')">申请入驻成为服务商</button>
</div>


<!-- ============== 技能培训 ============== -->
<div class="page" id="page-train">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">技能培训</div>
    <div class="nav-right">⋯</div>
  </div>

  <div style="background:linear-gradient(135deg,#166534,#0f172a);padding:20px 16px;color:#fff">
    <h1 style="font-size:20px;font-weight:700;letter-spacing:1px">技能培训</h1>
    <p style="font-size:12px;opacity:0.75;margin-top:4px;letter-spacing:0.5px">特种作业 · 安全培训 · 技能认证 · HSE</p>
    <div style="display:flex;gap:14px;margin-top:16px">
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">86</div><div style="font-size:11px;opacity:0.7;margin-top:2px">培训项目</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">3,560</div><div style="font-size:11px;opacity:0.7;margin-top:2px">已培训人数</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">96%</div><div style="font-size:11px;opacity:0.7;margin-top:2px">通过率</div></div>
    </div>
  </div>

  <div class="search-section">
    <div class="search-row">
      <div class="search-input-wrap">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
        <input type="text" placeholder="搜索培训项目...">
      </div>
      <button class="search-btn">搜索</button>
    </div>
  </div>

  <div class="filter-bar">
    <div class="chip active">全部</div>
    <div class="chip">特种作业证</div>
    <div class="chip">安全培训</div>
    <div class="chip">技能认证</div>
    <div class="chip">HSE培训</div>
  </div>

  <div class="list-section">
    <div class="card" onclick="showAlert('培训详情')">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px">
        <div style="font-size:15px;font-weight:700;color:#0f172a">电工特种作业操作证</div>
        <span class="tag-pill success">报名中</span>
      </div>
      <div style="font-size:12px;color:#64748b;margin-bottom:4px;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" style="width:12px;height:12px;stroke:#94a3b8;stroke-width:2;fill:none"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> 2026-07-15 · 7天</div>
      <div style="font-size:12px;color:#64748b;margin-bottom:4px;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" style="width:12px;height:12px;stroke:#94a3b8;stroke-width:2;fill:none"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg> 乌鲁木齐市某职业培训中心</div>
      <div style="font-size:12px;color:#64748b;margin-bottom:10px;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" style="width:12px;height:12px;stroke:#94a3b8;stroke-width:2;fill:none"><path d="M3 21h18M5 21V7l8-4 8 4v14"/></svg> 新疆某职业技能培训学校</div>
      <div style="display:flex;gap:6px"><span class="tag-pill">特种作业</span><span class="tag-pill">电工</span></div>
      <div style="display:flex;gap:8px;margin-top:12px">
        <button class="cons-btn" style="flex:1;background:#166534">电话咨询</button>
        <button class="cons-btn" style="flex:1;background:#b45309">在线报名</button>
      </div>
    </div>

    <div class="card" onclick="showAlert('培训详情')">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px">
        <div style="font-size:15px;font-weight:700;color:#0f172a">油田HSE安全管理培训</div>
        <span class="tag-pill warn">即将开始</span>
      </div>
      <div style="font-size:12px;color:#64748b;margin-bottom:4px;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" style="width:12px;height:12px;stroke:#94a3b8;stroke-width:2;fill:none"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> 2026-07-08 · 3天</div>
      <div style="font-size:12px;color:#64748b;margin-bottom:4px;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" style="width:12px;height:12px;stroke:#94a3b8;stroke-width:2;fill:none"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg> 克拉玛依市</div>
      <div style="font-size:12px;color:#64748b;margin-bottom:10px;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" style="width:12px;height:12px;stroke:#94a3b8;stroke-width:2;fill:none"><path d="M3 21h18M5 21V7l8-4 8 4v14"/></svg> 某安全技术培训中心</div>
      <div style="display:flex;gap:6px"><span class="tag-pill">HSE</span><span class="tag-pill">安全</span></div>
      <div style="display:flex;gap:8px;margin-top:12px">
        <button class="cons-btn" style="flex:1;background:#166534">电话咨询</button>
        <button class="cons-btn" style="flex:1;background:#b45309">在线报名</button>
      </div>
    </div>
  </div>
</div>

<!-- ============== 其他服务 ============== -->
<div class="page" id="page-other">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">其他服务</div>
    <div class="nav-right">⋯</div>
  </div>

  <div style="background:linear-gradient(135deg,#6b21a8,#0f172a);padding:20px 16px;color:#fff">
    <h1 style="font-size:20px;font-weight:700;letter-spacing:1px">其他服务</h1>
    <p style="font-size:12px;opacity:0.75;margin-top:4px;letter-spacing:0.5px">财务会计 · 评估拍卖</p>
    <div style="display:flex;gap:14px;margin-top:16px">
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">158</div><div style="font-size:11px;opacity:0.7;margin-top:2px">入驻机构</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">2,156</div><div style="font-size:11px;opacity:0.7;margin-top:2px">服务案例</div></div>
      <div style="flex:1;background:rgba(255,255,255,0.08);border-radius:6px;padding:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)"><div style="font-size:18px;font-weight:700">97.8%</div><div style="font-size:11px;opacity:0.7;margin-top:2px">好评率</div></div>
    </div>
  </div>

  <div class="tab-bar2">
    <div class="tab-item2 active">财务会计</div>
    <div class="tab-item2">评估拍卖</div>
  </div>

  <div class="filter-bar">
    <div class="chip active">全部</div>
    <div class="chip">代账</div>
    <div class="chip">审计</div>
    <div class="chip">税务咨询</div>
    <div class="chip">财务顾问</div>
    <div class="chip">资产评估</div>
  </div>

  <div class="list-section">
    <div class="list-card">
      <div class="list-avatar" style="background:#6b21a8"><svg viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg></div>
      <div class="list-info">
        <div class="list-name">某会计师事务所 <span class="tag">认证</span></div>
        <div class="list-meta">代账 · 审计 · 税务咨询</div>
        <div class="list-tags"><span class="list-tag">代账</span><span class="list-tag gray">乌鲁木齐</span></div>
        <div class="list-meta">已服务 256 家企业</div>
      </div>
      <button class="cons-btn">咨询</button>
    </div>
  </div>
</div>


<!-- ============== 工程交流圈 ============== -->
<div class="page" id="page-circle">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">工程交流圈</div>
    <div class="nav-right">⋯</div>
  </div>

  <div style="background:linear-gradient(135deg,#0f172a,#1e3a5f);padding:24px 16px;color:#fff;text-align:center">
    <svg viewBox="0 0 24 24" style="width:40px;height:40px;stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
    <div style="font-size:20px;font-weight:700;letter-spacing:2px">工程交流圈</div>
    <div style="font-size:11px;opacity:0.7;margin-top:6px;letter-spacing:1px">资源共享 · 抱团取暖 · 共同成长</div>
  </div>

  <div class="stats-bar">
    <div class="stat-item"><div class="stat-num">3,286</div><div class="stat-label">圈友</div></div>
    <div class="stat-item"><div class="stat-num">1,524</div><div class="stat-label">话题</div></div>
    <div class="stat-item"><div class="stat-num">856</div><div class="stat-label">合作</div></div>
    <div class="stat-item"><div class="stat-num">12,000+</div><div class="stat-label">资料</div></div>
  </div>

  <div class="circle-tabs">
    <div class="circle-tab active" onclick="switchCircle(this)">推荐</div>
    <div class="circle-tab" onclick="switchCircle(this)">资料</div>
    <div class="circle-tab" onclick="switchCircle(this)">合作</div>
    <div class="circle-tab" onclick="switchCircle(this)">问答</div>
    <div class="circle-tab" onclick="switchCircle(this)">圈友</div>
  </div>

  <div class="list-section">
    <div class="topic-card">
      <div class="topic-head">
        <div class="topic-avatar">王</div>
        <div style="flex:1">
          <div class="topic-user">王造价师 <span style="font-size:10px;padding:1px 6px;border-radius:2px;background:#1e3a5f;color:#fff;letter-spacing:0.3px">专家</span></div>
          <div class="topic-time">2小时前 · 乌鲁木齐</div>
        </div>
      </div>
      <div class="topic-content">克拉玛依光伏项目寻求造价合作，有兴趣的同行私信～</div>
      <div style="display:flex;gap:5px;margin-bottom:10px">
        <span class="tag-pill">光伏</span>
        <span class="tag-pill">造价咨询</span>
      </div>
      <div style="font-size:11px;color:#94a3b8;display:flex;gap:18px"><span>▲ 24</span><span>◷ 8</span><span>★ 收藏</span></div>
    </div>

    <div class="topic-card">
      <div class="topic-head">
        <div class="topic-avatar" style="background:#475569">陈</div>
        <div style="flex:1">
          <div class="topic-user">陈资料员 <span style="font-size:10px;padding:1px 6px;border-radius:2px;background:#475569;color:#fff;letter-spacing:0.3px">资料员</span></div>
          <div class="topic-time">5小时前 · 昌吉</div>
        </div>
      </div>
      <div class="topic-content">分享：水利工程竣工资料整理要点，建议收藏</div>
      <div style="display:flex;gap:5px;margin-bottom:10px">
        <span class="tag-pill">竣工资料</span>
        <span class="tag-pill">水利</span>
      </div>
      <div style="font-size:11px;color:#94a3b8;display:flex;gap:18px"><span>▲ 86</span><span>◷ 12</span><span>★ 收藏</span></div>
    </div>

    <div class="topic-card">
      <div class="topic-head">
        <div class="topic-avatar" style="background:#0f172a">刘</div>
        <div style="flex:1">
          <div class="topic-user">刘律师 <span style="font-size:10px;padding:1px 6px;border-radius:2px;background:#0f172a;color:#fff;letter-spacing:0.3px">律师</span></div>
          <div class="topic-time">1天前</div>
        </div>
      </div>
      <div class="topic-content">Q：工程合同纠纷，对方拖欠工程款2年，怎么处理？</div>
      <div style="background:#f8fafc;padding:12px;border-radius:6px;font-size:13px;color:#475569;line-height:1.65;margin-bottom:10px;border-left:3px solid #16a34a">
        <span style="color:#16a34a;font-weight:700">A：</span>建议先发律师函催收，保留书面证据。如协商无果，可申请仲裁或诉讼，注意诉讼时效。
      </div>
      <div style="font-size:11px;color:#94a3b8;display:flex;gap:18px"><span>▲ 36</span><span>◷ 15</span></div>
    </div>
  </div>

  <div class="fab" onclick="showAlert('发布帖子 / 合作 / 问答')"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
</div>


<!-- ============== 发布需求 ============== -->
<div class="page" id="page-post">
  <div class="top-nav">
    <div class="nav-left" onclick="goPage('home')">‹ 返回</div>
    <div class="nav-center">发布需求</div>
    <div class="nav-right"></div>
  </div>

  <div class="section-title">选择需求分类</div>
  <div style="background:#fff;padding:14px 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
    <div class="chip active" style="text-align:center;padding:10px">工程造价</div>
    <div class="chip" style="text-align:center;padding:10px">法律服务</div>
    <div class="chip" style="text-align:center;padding:10px">工程资料</div>
    <div class="chip" style="text-align:center;padding:10px">人才劳务</div>
    <div class="chip" style="text-align:center;padding:10px">机械设备</div>
    <div class="chip" style="text-align:center;padding:10px">油田工程</div>
    <div class="chip" style="text-align:center;padding:10px">智能建造</div>
    <div class="chip" style="text-align:center;padding:10px">工程施工</div>
    <div class="chip" style="text-align:center;padding:10px">其他</div>
  </div>

  <div class="section-title">需求详情</div>
  <div class="form-section">
    <div class="form-item">
      <div class="form-label">需求标题</div>
      <input class="form-input" placeholder="请输入需求标题..." value="克拉玛依光伏项目造价预算编制">
    </div>
    <div class="form-item">
      <div class="form-label">预算方式</div>
      <div style="flex:1;display:flex;gap:8px">
        <div class="chip active">一口价</div>
        <div class="chip">计时</div>
      </div>
    </div>
    <div class="form-item">
      <div class="form-label">预算费用</div>
      <input class="form-input" placeholder="选填" value="5-8万">
    </div>
    <div class="form-item">
      <div class="form-label">工期要求</div>
      <input class="form-input" placeholder="例：30天" value="30天">
    </div>
    <div style="margin-top:12px">
      <div style="font-size:13px;color:#475569;margin-bottom:6px">详细描述</div>
      <textarea class="form-textarea" placeholder="请详细描述您的需求...">本项目位于克拉玛依市，为5MW光伏电站，需要专业的造价团队负责全过程造价咨询，包括设计概算、施工图预算、竣工结算等。要求团队具有光伏项目经验，持有相关资质证书。