编辑页面

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>
/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.5;
}

/* ===== 手机模拟容器 ===== */
.phone-frame {
  max-width: 450px;
  margin: 0 auto;
  background-color: #fff;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ===== ① 顶部导航栏 ===== */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 12px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #eee;
}
.nav-left {
  width: 60px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-center {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #333;
}
.nav-right {
  width: 60px;
  text-align: right;
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

/* ===== ② 轮播图 / Banner ===== */
.banner-section {
  width: 100%;
  min-height: 180px;
  position: relative;
  overflow: hidden;
  background: #1a2a4a;
}
.banner-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 180px;
}
.banner-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.banner-bg {
  position: absolute;
  inset: 0;
}
.banner-overlay {
  position: relative;
  z-index: 2;
  padding: 20px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  width: 100%;
}
.banner-overlay h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.banner-overlay p {
  font-size: 12px;
  opacity: 0.85;
}
.banner-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
}
.dot.active {
  background: #fff;
  width: 20px;
  border-radius: 4px;
}

/* ===== ③ CTA 按钮区 ===== */
.cta-section {
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  margin: 8px 16px 0;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  position: relative;
  z-index: 10;
}
.cta-btn {
  flex: 1;
  height: 42px;
  border-radius: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, opacity 0.15s;
  color: #fff;
}
.cta-btn:active { transform: scale(0.97); }
.cta-primary { background: #1a2a4a; }
.cta-secondary { background: #4a69bd; }
.cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== ④ 功能图标网格 ===== */
.icon-grid-section {
  background: #fff;
  padding: 18px 12px 14px;
  margin-top: 10px;
}
.icon-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 0;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 64px;
  cursor: pointer;
  padding: 4px 0;
}
.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-circle svg { width: 24px; height: 24px; }
.icon-label {
  font-size: 12px;
  color: #444;
  white-space: nowrap;
}

/* 图标颜色 - 专业沉稳 */
.icon-indigo  { background: #e8ecf4; }
.icon-orange  { background: #fdf0e8; }
.icon-red     { background: #fce8e8; }
.icon-gold    { background: #fdf6e3; }
.icon-green   { background: #e8f5ec; }
.icon-blue    { background: #e8f1fb; }
.icon-teal    { background: #e6f7f5; }
.icon-purple  { background: #f0ebf8; }
.icon-slate   { background: #eceef2; }
.icon-rose    { background: #fceaea; }
.icon-cyan    { background: #e6f6f8; }
.icon-violet  { background: #f3eefd; }

/* ===== ⑤ 促销横幅 ===== */
.promo-banner {
  margin: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1a2a4a, #2c3e50);
  padding: 14px 18px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.promo-text h3 { font-size: 16px; font-weight: 700; }
.promo-text p { font-size: 12px; opacity: 0.75; margin-top: 4px; }
.promo-tag {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* 企业微信群入口横条 */
.wechat-group-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 16px 12px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1px solid #c6e6cb;
  border-radius: 12px;
  cursor: pointer;
}
.wechat-group-bar:active { background: #e8f9ed; }
.wg-left { display: flex; align-items: center; gap: 10px; }
.wg-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #07c160;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wg-icon svg { width: 20px; height: 20px; }
.wg-info { flex: 1; }
.wg-name { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 2px; }
.wg-code { font-size: 11px; color: #888; }
.wg-right { display: flex; align-items: center; gap: 8px; }
.wg-tag { font-size: 12px; color: #07c160; font-weight: 500; }
.wg-arrow { font-size: 20px; color: #ccc; }

/* ===== ⑥ 统计数据区 ===== */
.stats-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  background: #fff;
  margin-top: 10px;
}
.stat-item { flex: 1; text-align: center; position: relative; }
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  width: 1px;
  background: #e0e0e0;
}
.stat-num { font-size: 20px; font-weight: 700; color: #1a2a4a; letter-spacing: -0.5px; }
.stat-label { font-size: 12px; color: #888; margin-top: 4px; }

/* ===== ⑦ 交易大厅入口 ===== */
.trade-hall-section { background: #fff; margin-top: 10px; padding: 0 16px; }
.trade-hall-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
  border-bottom: 1px solid #f0f0f0;
}
.trade-hall-title {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trade-hall-title svg { width: 18px; height: 18px; flex-shrink: 0; }
.trade-hall-title .sub { font-size: 12px; color: #999; font-weight: 400; margin-left: 4px; }
.trade-hall-more { font-size: 13px; color: #999; cursor: pointer; }

.trade-quick-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 0; }
.trade-quick-card {
  background: linear-gradient(135deg, #1a2a4a, #2c3e50);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s;
}
.trade-quick-card:active { transform: scale(0.97); }
.trade-quick-card.orange { background: linear-gradient(135deg, #4a69bd, #2c3e50); }
.trade-quick-card.green  { background: linear-gradient(135deg, #1e6f5c, #2a9d8f); }
.trade-quick-card svg { width: 26px; height: 26px; margin-bottom: 6px; }
.trade-quick-label { font-size: 13px; font-weight: 600; }
.trade-quick-count { font-size: 11px; opacity: 0.75; margin-top: 3px; }

/* ===== ⑧ 底部 TabBar ===== */
.tabbar-placeholder { height: 56px; }
.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 #eee;
  z-index: 99;
}
.tab-item { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; flex: 1; padding: 4px 0; }
.tab-item svg { width: 23px; height: 23px; color: #bbb; }
.tab-label { font-size: 10px; color: #bbb; }
.tab-item.active svg { color: #1a2a4a; }
.tab-item.active .tab-label { color: #1a2a4a; }

/* 发布悬浮按钮 */
.fab-publish {
  position: fixed;
  bottom: 70px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1a2a4a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 300;
  box-shadow: 0 4px 15px rgba(26,42,74,0.35);
  cursor: pointer;
  z-index: 90;
  border: none;
}
.fab-label {
  position: absolute;
  top: 50%;
  right: 58px;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: #1a2a4a;
  white-space: nowrap;
  background: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ===== 骨架标注样式（调试用）===== */
.skeleton-note {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 200;
  pointer-events: none;
}
.section-wrapper { position: relative; }

/* ===== 工程资料筛选面板 ===== */
.data-filter-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 900;
  opacity: 0; visibility: hidden; transition: opacity 0.3s;
}
.data-filter-overlay.show { opacity: 1; visibility: visible; }
.data-filter-panel {
  position: fixed;
  left: 50%; transform: translateX(-50%) translateY(100%);
  bottom: 0; width: 100%; max-width: 450px; max-height: 90vh;
  background: #fff; border-radius: 18px 18px 0 0;
  z-index: 910; transition: transform 0.38s cubic-bezier(0.32,0.72,0,1);
  display: flex; flex-direction: column;
}
.data-filter-panel.show { transform: translateX(-50%) translateY(0); }
.data-panel-handle { width: 36px; height: 4px; border-radius: 2px; background: #ddd; margin: 10px auto 0; flex-shrink: 0; }
.data-panel-header {
  padding: 14px 16px 12px; border-bottom: 1px solid #f0f0f0;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.data-panel-title { font-size: 17px; font-weight: 700; color: #333; }
.data-panel-close { font-size: 22px; color: #999; cursor: pointer; background: none; border: none; padding: 0; line-height: 1; }
.data-panel-body { flex: 1; overflow-y: auto; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
.data-filter-section { padding: 10px 16px; }
.data-filter-label { font-size: 12px; color: #888; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.data-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.data-filter-chip {
  padding: 6px 14px; border-radius: 16px; font-size: 13px;
  border: 1px solid #e0e0e0; background: #fff; color: #555;
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.data-filter-chip.active { background: #1a2a4a; color: #fff; border-color: #1a2a4a; }
.data-city-bar { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.data-city-bar.show { display: flex; }
.data-city-chip {
  padding: 5px 13px; border-radius: 14px; font-size: 12px;
  border: 1px solid #e0e0e0; background: #fff; color: #888;
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.data-city-chip.active { background: #4a69bd; color: #fff; border-color: #4a69bd; }
.data-provider-card {
  background: #fff; border-radius: 12px; padding: 14px;
  margin: 10px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  cursor: pointer; transition: box-shadow 0.2s;
}
.data-provider-card:active { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.data-provider-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.data-provider-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.data-provider-avatar svg { width: 22px; height: 22px; }
.data-provider-info { flex: 1; min-width: 0; }
.data-provider-name { font-size: 15px; font-weight: 700; color: #333; }
.data-provider-firm { font-size: 12px; color: #888; margin-top: 2px; }
.data-provider-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.data-provider-tag {
  font-size: 11px; color: #1a2a4a;
  background: rgba(26,42,74,0.08); padding: 2px 8px; border-radius: 4px;
}
</style>
</head>
<body>

<div class="phone-frame">

  <!-- ========== ① 顶部导航栏 ========== -->
  <div class="section-wrapper">
    <span class="skeleton-note">① 导航栏</span>
    <nav class="top-nav">
      <div class="nav-left"><span style="font-size:18px;color:#555;">×</span></div>
      <div class="nav-center">疆工智联</div>
      <div class="nav-right" onclick="location.href='pages/platform-rules.html'" style="font-size:22px;color:#888;">⋮</div>
    </nav>
  </div>

  <!-- ========== ② 轮播图 / Banner ========== -->
  <div class="section-wrapper" style="position:relative;">
    <span class="skeleton-note">② Banner轮播</span>
    <section class="banner-section" id="bannerSection">
      <div class="banner-track" id="bannerTrack">

        <!-- 幻灯片1: 油田工业 -->
        <div class="banner-slide">
          <div class="banner-bg" style="background:linear-gradient(135deg,#0d1b2a 0%,#1b3a5c 50%,#0d2640 100%);">
            <svg style="position:absolute;right:-10px;top:10px;opacity:0.15" width="200" height="160" viewBox="0 0 200 160">
              <rect x="60" y="80" width="8" height="60" fill="#4a69bd"/>
              <rect x="56" y="75" width="16" height="10" fill="#4a69bd"/>
              <rect x="50" y="40" width="28" height="38" fill="#4a69bd"/>
              <rect x="64" y="20" width="10" height="25" fill="#4a69bd"/>
              <circle cx="69" cy="15" r="12" fill="#4a69bd"/>
              <rect x="20" y="110" width="120" height="6" fill="#4a69bd"/>
            </svg>
          </div>
          <div class="banner-overlay">
            <h2>油田工业数字化</h2>
            <p>智能钻井 · 数据驱动 · 远程运维</p>
          </div>
        </div>

        <!-- 幻灯片2: 智能建造 -->
        <div class="banner-slide">
          <div class="banner-bg" style="background:linear-gradient(135deg,#1a2a4a 0%,#2c3e50 100%);">
            <svg style="position:absolute;right:0;top:0;opacity:0.12" width="180" height="180" viewBox="0 0 180 180">
              <rect x="20" y="100" width="60" height="60" fill="#4a69bd"/>
              <rect x="30" y="60" width="40" height="44" fill="#4a69bd"/>
              <polygon points="50,20 20,60 80,60" fill="#4a69bd"/>
              <rect x="110" y="80" width="50" height="80" fill="#4a69bd"/>
              <rect x="118" y="50" width="34" height="34" fill="#4a69bd"/>
              <polygon points="135,20 110,50 160,50" fill="#4a69bd"/>
            </svg>
          </div>
          <div class="banner-overlay">
            <h2>建筑智能化</h2>
            <p>BIM全生命周期 · IoT物联 · 数字孪生</p>
          </div>
        </div>

        <!-- 幻灯片3: 建材机械供需 -->
        <div class="banner-slide">
          <div class="banner-bg" style="background:linear-gradient(135deg,#1a2a4a 0%,#1e3a5f 100%);">
            <svg style="position:absolute;right:0;bottom:0;opacity:0.15" width="200" height="140" viewBox="0 0 200 140">
              <rect x="10" y="80" width="80" height="40" fill="#4a69bd"/>
              <rect x="5" y="70" width="90" height="14" fill="#4a69bd"/>
              <rect x="50" y="90" width="8" height="30" fill="#4a69bd"/>
              <rect x="90" y="60" width="100" height="60" fill="#4a69bd"/>
              <rect x="85" y="50" width="110" height="14" fill="#4a69bd"/>
              <circle cx="30" cy="130" r="14" fill="#4a69bd"/>
              <circle cx="70" cy="130" r="14" fill="#4a69bd"/>
              <circle cx="120" cy="130" r="14" fill="#4a69bd"/>
              <circle cx="160" cy="130" r="14" fill="#4a69bd"/>
            </svg>
          </div>
          <div class="banner-overlay">
            <h2>建材机械供需平台</h2>
            <p>一站式采购 · 智能匹配 · 供应链协同</p>
          </div>
        </div>

        <!-- 幻灯片4: 人才库 -->
        <div class="banner-slide">
          <div class="banner-bg" style="background:linear-gradient(135deg,#1a2a4a 0%,#2a3f6f 100%);">
            <svg style="position:absolute;right:10px;top:20px;opacity:0.15" width="160" height="140" viewBox="0 0 160 140">
              <circle cx="80" cy="40" r="22" fill="#4a69bd"/>
              <rect x="54" y="62" width="52" height="20" rx="10" fill="#4a69bd"/>
              <circle cx="30" cy="90" r="18" fill="#4a69bd"/>
              <rect x="8" y="108" width="44" height="16" rx="8" fill="#4a69bd"/>
              <circle cx="130" cy="90" r="18" fill="#4a69bd"/>
              <rect x="108" y="108" width="44" height="16" rx="8" fill="#4a69bd"/>
            </svg>
          </div>
          <div class="banner-overlay">
            <h2>专业人才库</h2>
            <p>精准对接 · 技能认证 · 项目协作</p>
          </div>
        </div>

      </div>
      <div class="banner-dots" id="bannerDots">
        <span class="dot active" data-index="0"></span>
        <span class="dot" data-index="1"></span>
        <span class="dot" data-index="2"></span>
        <span class="dot" data-index="3"></span>
      </div>
    </section>
  </div>

  <!-- ========== ③ CTA 操作按钮 ========== -->
  <div class="section-wrapper">
    <span class="skeleton-note">③ CTA按钮</span>
    <section class="cta-section">
      <button class="cta-btn cta-primary" onclick="location.href='pages/trade-hall.html?action=publish'">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
        <span>发布需求</span>
      </button>
      <button class="cta-btn cta-secondary" onclick="location.href='pages/join-platform.html'">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>入驻平台</span>
      </button>
    </section>
  </div>

  <!-- ========== ④ 功能图标入口 ========== -->
  <div class="section-wrapper">
    <span class="skeleton-note">④ 功能入口</span>
    <section class="icon-grid-section">
      <div class="icon-row">

        <!-- 交易大厅 -->
        <div class="icon-item" onclick="location.href='pages/trade-hall.html'">
          <div class="icon-circle icon-orange">
            <svg viewBox="0 0 24 24" fill="none" stroke="#e07020" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
            </svg>
          </div>
          <span class="icon-label">交易大厅</span>
        </div>

        <!-- 油田工程 -->
        <div class="icon-item" onclick="location.href='pages/oil-engineering.html'">
          <div class="icon-circle icon-slate">
            <svg viewBox="0 0 24 24" fill="none" stroke="#3d5a80" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 2v10"/><path d="M8 6l4-4 4 4"/><rect x="8" y="12" width="8" height="10"/><line x1="12" y1="10" x2="12" y2="6"/>
            </svg>
          </div>
          <span class="icon-label">油田工程</span>
        </div>

        <!-- 智能建造 -->
        <div class="icon-item" onclick="location.href='pages/smart-construction.html'">
          <div class="icon-circle icon-red">
            <svg viewBox="0 0 24 24" fill="none" stroke="#c0392b" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/>
            </svg>
          </div>
          <span class="icon-label">智能建造</span>
        </div>

        <!-- 机械建材供应 -->
        <div class="icon-item" onclick="location.href='pages/machinery.html'">
          <div class="icon-circle icon-gold">
            <svg viewBox="0 0 24 24" fill="none" stroke="#d68910" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>
              <path d="M14.83 9.17a4 4 0 0 1 0 5.66M9.17 9.17a4 4 0 0 0 0 5.66"/>
            </svg>
          </div>
          <span class="icon-label">机械建材</span>
        </div>

        <!-- 人才库 -->
        <div class="icon-item" onclick="location.href='pages/talent-pool.html'">
          <div class="icon-circle icon-green">
            <svg viewBox="0 0 24 24" fill="none" stroke="#1e8449" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
          </div>
          <span class="icon-label">人才库</span>
        </div>

        <!-- 工程造价 -->
        <div class="icon-item" onclick="location.href='pages/cost-management.html'">
          <div class="icon-circle icon-blue">
            <svg viewBox="0 0 24 24" fill="none" stroke="#2874a6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
            </svg>
          </div>
          <span class="icon-label">工程造价</span>
        </div>

        <!-- 工程资料 -->
        <div class="icon-item" onclick="showDataFilterPanel()">
          <div class="icon-circle icon-teal">
            <svg viewBox="0 0 24 24" fill="none" stroke="#148f77" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>
            </svg>
          </div>
          <span class="icon-label">工程资料</span>
        </div>

        <!-- 工程法律服务 -->
        <div class="icon-item" onclick="location.href='pages/legal-service.html'">
          <div class="icon-circle icon-indigo">
            <svg viewBox="0 0 24 24" fill="none" stroke="#2c3e50" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
            </svg>
          </div>
          <span class="icon-label">法律服务</span>
        </div>

        <!-- 工程交流圈 -->
        <div class="icon-item" onclick="location.href='pages/community.html'">
          <div class="icon-circle icon-rose">
            <svg viewBox="0 0 24 24" fill="none" stroke="#c0392b" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
            </svg>
          </div>
          <span class="icon-label">交流圈</span>
        </div>

        <!-- 家装 -->
        <div class="icon-item" onclick="location.href='pages/home-decoration.html'">
          <div class="icon-circle icon-cyan">
            <svg viewBox="0 0 24 24" fill="none" stroke="#148f77" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
            </svg>
          </div>
          <span class="icon-label">家装</span>
        </div>

        <!-- 平台建议 -->
        <div class="icon-item" onclick="location.href='pages/feedback.html'">
          <div class="icon-circle icon-purple">
            <svg viewBox="0 0 24 24" fill="none" stroke="#6c5ce7" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
          </div>
          <span class="icon-label">平台建议</span>
        </div>

        <!-- 其他 -->
        <div class="icon-item" onclick="location.href='pages/other-services.html'">
          <div class="icon-circle icon-violet">
            <svg viewBox="0 0 24 24" fill="none" stroke="#5b2c6f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>
            </svg>
          </div>
          <span class="icon-label">其他</span>
        </div>

      </div>
    </section>

    <!-- 企业微信群入口 -->
    <div class="wechat-group-bar" onclick="location.href='pages/community.html'">
      <div class="wg-left">
        <div class="wg-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>
        </div>
        <div class="wg-info">
          <div class="wg-name">工程交流圈 · 企业微信群</div>
          <div class="wg-code">群号：gongcheng-xq2024</div>
        </div>
      </div>
      <div class="wg-right">
        <span class="wg-tag">扫码加入</span>
        <span class="wg-arrow">›</span>
      </div>
    </div>
  </div>

  <!-- ========== ⑤ 促销横幅 ========== -->
  <div class="section-wrapper">
    <span class="skeleton-note">⑤ 促销横幅</span>
    <section class="promo-banner">
      <div class="promo-text">
        <h3>工程数字化转型季</h3>
        <p>入驻即享 AI算量+智能匹配+供需对接 超值套餐</p>
      </div>
      <div class="promo-tag">HOT</div>
    </section>
  </div>

  <!-- ========== ⑥ 统计数据 ========== -->
  <div class="section-wrapper">
    <span class="skeleton-note">⑥ 数据统计</span>
    <section class="stats-section">
      <div class="stat-item">
        <div class="stat-num">38,620,000</div>
        <div class="stat-label">累计交易金额(元)</div>
      </div>
      <div class="stat-item">
        <div class="stat-num">12,847</div>
        <div class="stat-label">项目数量</div>
      </div>
      <div class="stat-item">
        <div class="stat-num">56,390</div>
        <div class="stat-label">注册专业人才</div>
      </div>
    </section>
  </div>

  <!-- ========== ⑦ 交易大厅入口 ========== -->
  <div class="section-wrapper">
    <span class="skeleton-note">⑦ 交易大厅入口</span>
    <section class="trade-hall-section">
      <div class="trade-hall-header">
        <span class="trade-hall-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="#1a2a4a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
          </svg>
          交易大厅
          <span class="sub">需求发布 · 项目对接</span>
        </span>
        <span class="trade-hall-more" onclick="location.href='pages/trade-hall.html'">更多 ›</span>
      </div>
      <div class="trade-quick-cards">
        <div class="trade-quick-card" onclick="location.href='pages/trade-hall.html?tab=demand'">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/>
          </svg>
          <div class="trade-quick-label">发布需求</div>
          <div class="trade-quick-count">快速发布 · 精准匹配</div>
        </div>
        <div class="trade-quick-card orange" onclick="location.href='pages/trade-hall.html?tab=projects'">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
          </svg>
          <div class="trade-quick-label">项目列表</div>
          <div class="trade-quick-count">12,847个项目</div>
        </div>
        <div class="trade-quick-card green" onclick="location.href='pages/trade-hall.html?tab=my'">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
          </svg>
          <div class="trade-quick-label">我的项目</div>
          <div class="trade-quick-count">管理我的需求</div>
        </div>
      </div>
    </section>
  </div>

  <!-- 底部占位 -->
  <div class="tabbar-placeholder"></div>

  <!-- 悬浮发布按钮 -->
  <button class="fab-publish" onclick="location.href='pages/trade-hall.html?action=publish'">+</button>

  <!-- ========== ⑧ 底部 TabBar ========== -->
  <nav class="tabbar">
    <div class="tab-item active">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
      </svg>
      <span class="tab-label">首页</span>
    </div>
    <div class="tab-item" onclick="location.href='pages/trade-hall.html'">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
      </svg>
      <span class="tab-label">交易</span>
    </div>
    <div class="tab-item" onclick="location.href='pages/talent-pool.html'">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      <span class="tab-label">找人</span>
    </div>
    <div class="tab-item" onclick="location.href='pages/profile.html'">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
      </svg>
      <span class="tab-label">我的</span>
    </div>
  </nav>

</div>

<!-- ===== 轮播图自动播放脚本 ===== -->
<script>
(function() {
  var track = document.getElementById('bannerTrack');
  var dots = document.querySelectorAll('#bannerDots .dot');
  var totalSlides = dots.length;
  var current = 0;
  var timer = null;

  function goToSlide(index) {
    current = index;
    track.style.transform = 'translateX(-' + (current * 100) + '%)';
    dots.forEach(function(d, i) {
      d.classList.toggle('active', i === current);
    });
  }
  function nextSlide() { goToSlide((current + 1) % totalSlides); }
  function startAuto() {
    if (timer) clearInterval(timer);
    timer = setInterval(nextSlide, 4000);
  }

  dots.forEach(function(dot) {
    dot.addEventListener('click', function() {
      goToSlide(parseInt(this.dataset.index));
      startAuto();
    });
  });

  var startX = 0, isDragging = false;
  var bannerSectionElem = document.getElementById('bannerSection');
  bannerSectionElem.addEventListener('touchstart', function(e) {
    startX = e.touches[0].clientX;
    isDragging = true;
    if (timer) clearInterval(timer);
  }, { passive: true });
  bannerSectionElem.addEventListener('touchend', function(e) {
    if (!isDragging) return;
    isDragging = false;
    var diff = startX - e.changedTouches[0].clientX;
    if (Math.abs(diff) > 50) {
      if (diff > 0) nextSlide();
      else goToSlide((current - 1 + totalSlides) % totalSlides);
    }
    startAuto();
  }, { passive: true });

  startAuto();
})();
</script>

<!-- ===== 工程资料筛选面板 ===== -->
<div class="data-filter-overlay" id="dataFilterOverlay"></div>
<div class="data-filter-panel" id="dataFilterPanel">
  <div class="data-panel-handle"></div>
  <div class="data-panel-header">
    <div class="data-panel-title">工程资料筛选</div>
    <button class="data-panel-close" id="dataPanelClose">×</button>
  </div>
  <div class="data-panel-body">
    <div class="data-filter-section">
      <div class="data-filter-label">擅长领域</div>
      <div class="data-filter-bar" id="dataExpertiseBar">
        <div class="data-filter-chip active" data-exp="全部" onclick="selectDataExpertise('全部')">全部</div>
        <div class="data-filter-chip" data-exp="房建" onclick="selectDataExpertise('房建')">房建</div>
        <div class="data-filter-chip" data-exp="市政" onclick="selectDataExpertise('市政')">市政</div>
        <div class="data-filter-chip" data-exp="水利" onclick="selectDataExpertise('水利')">水利</div>
        <div class="data-filter-chip" data-exp="光伏" onclick="selectDataExpertise('光伏')">光伏</div>
        <div class="data-filter-chip" data-exp="煤炭" onclick="selectDataExpertise('煤炭')">煤炭</div>
        <div class="data-filter-chip" data-exp="风光" onclick="selectDataExpertise('风光')">风光</div>
        <div class="data-filter-chip" data-exp="公路" onclick="selectDataExpertise('公路')">公路</div>
        <div class="data-filter-chip" data-exp="铁路" onclick="selectDataExpertise('铁路')">铁路</div>
        <div class="data-filter-chip" data-exp="桥梁隧道" onclick="selectDataExpertise('桥梁隧道')">桥梁隧道</div>
        <div class="data-filter-chip" data-exp="电力" onclick="selectDataExpertise('电力')">电力</div>
        <div class="data-filter-chip" data-exp="石油化工" onclick="selectDataExpertise('石油化工')">石油化工</div>
        <div class="data-filter-chip" data-exp="钢结构厂房" onclick="selectDataExpertise('钢结构厂房')">钢结构厂房</div>
        <div class="data-filter-chip" data-exp="储能" onclick="selectDataExpertise('储能')">储能</div>
        <div class="data-filter-chip" data-exp="绿碳" onclick="selectDataExpertise('绿碳')">绿碳</div>
      </div>
    </div>
    <div class="data-filter-section">
      <div class="data-filter-label">所在地级市/州</div>
      <div class="data-filter-bar" id="dataProvinceBar">
        <div class="data-filter-chip active" data-province="新疆" onclick="selectDataProvince('新疆')">新疆</div>
        <div class="data-filter-chip" data-province="乌鲁木齐市" onclick="selectDataProvince('乌鲁木齐市')">乌鲁木齐市</div>
        <div class="data-filter-chip" data-province="克拉玛依市" onclick="selectDataProvince('克拉玛依市')">克拉玛依市</div>
        <div class="data-filter-chip" data-province="吐鲁番市" onclick="selectDataProvince('吐鲁番市')">吐鲁番市</div>
        <div class="data-filter-chip" data-province="哈密市" onclick="selectDataProvince('哈密市')">哈密市</div>
        <div class="data-filter-chip" data-province="昌吉州" onclick="selectDataProvince('昌吉州')">昌吉州</div>
        <div class="data-filter-chip" data-province="博州" onclick="selectDataProvince('博州')">博州</div>
        <div class="data-filter-chip" data-province="巴州" onclick="selectDataProvince('巴州')">巴州</div>
        <div class="data-filter-chip" data-province="克州" onclick="selectDataProvince('克州')">克州</div>
        <div class="data-filter-chip" data-province="伊犁州" onclick="selectDataProvince('伊犁州')">伊犁州</div>
        <div class="data-filter-chip" data-province="阿克苏地区" onclick="selectDataProvince('阿克苏地区')">阿克苏地区</div>
        <div class="data-filter-chip" data-province="喀什地区" onclick="selectDataProvince('喀什地区')">喀什地区</div>
        <div class="data-filter-chip" data-province="和田地区" onclick="selectDataProvince('和田地区')">和田地区</div>
        <div class="data-filter-chip" data-province="塔城地区" onclick="selectDataProvince('塔城地区')">塔城地区</div>
        <div class="data-filter-chip" data-province="阿勒泰地区" onclick="selectDataProvince('阿勒泰地区')">阿勒泰地区</div>
        <div class="data-filter-chip" data-province="石河子市" onclick="selectDataProvince('石河子市')">石河子市</div>
        <div class="data-filter-chip" data-province="阿拉尔市" onclick="selectDataProvince('阿拉尔市')">阿拉尔市</div>
        <div class="data-filter-chip" data-province="图木舒克市" onclick="selectDataProvince('图木舒克市')">图木舒克市</div>
        <div class="data-filter-chip" data-province="五家渠市" onclick="selectDataProvince('五家渠市')">五家渠市</div>
      </div>
      <div class="data-city-bar" id="dataCityBar">
        <div class="data-city-chip active" data-city="全部" onclick="selectDataCity('全部')">全部区县</div>
      </div>
    </div>
    <div id="dataProviderList"></div>
  </div>
</div>

<script>
var dataProviders = [
  { name:'张建国 资料主管', firm:'中建三局第一建设工程', region:'乌鲁木齐市', city:'天山区', tags:['房建资料','施工组织设计','竣工验收'] },
  { name:'李晓燕 资料员', firm:'北京城建集团', region:'乌鲁木齐市', city:'沙依巴克区', tags:['市政资料','道路工程','给排水'] },
  { name:'王志强 工作室负责人', firm:'星云工程资料工作室', region:'克拉玛依市', city:'克拉玛依区', tags:['油田工程','石化项目','全过程资料'] },
  { name:'陈美华 资料主管', firm:'中国水利水电第十四工程局', region:'昌吉州', city:'昌吉市', tags:['水利资料','水库工程','河道治理'] },
  { name:'刘明远 资料员', firm:'中国铁建大桥工程局', region:'喀什地区', city:'喀什市', tags:['桥梁资料','隧道工程','公路工程'] },
  { name:'赵雪梅 工作室负责人', firm:'雪梅工程资料工作室', region:'伊犁州', city:'伊宁市', tags:['房建资料','精装修','幕墙工程'] },
  { name:'孙建国 资料主管', firm:'中国能源建设集团', region:'哈密市', city:'伊州区', tags:['风光煤电','新能源','输变电'] },
  { name:'周晓丽 资料员', firm:'中国化学工程第三建设有限公司', region:'巴州', city:'库尔勒市', tags:['化工资料','石化装置','储运工程'] }
];

var dataProvinceCityMap = {
  '新疆': ['全部'],
  '乌鲁木齐市': ['全部', '天山区', '沙依巴克区', '新市区', '水磨沟区', '头屯河区', '达坂城区', '米东区', '乌鲁木齐县'],
  '克拉玛依市': ['全部', '独山子区', '克拉玛依区', '白碱滩区', '乌尔禾区'],
  '吐鲁番市': ['全部', '高昌区', '鄯善县', '托克逊县'],
  '哈密市': ['全部', '伊州区', '巴里坤哈萨克自治县', '伊吾县'],
  '昌吉州': ['全部', '昌吉市', '阜康市', '呼图壁县', '玛纳斯县', '奇台县', '吉木萨尔县', '木垒哈萨克自治县'],
  '博州': ['全部', '博乐市', '阿拉山口市', '精河县', '温泉县'],
  '巴州': ['全部', '库尔勒市', '轮台县', '尉犁县', '若羌县', '且末县', '焉耆回族自治县', '和静县', '和硕县', '博湖县'],
  '克州': ['全部', '阿图什市', '阿克陶县', '阿合奇县', '乌恰县'],
  '伊犁州': ['全部', '伊宁市', '奎屯市', '霍尔果斯市', '伊宁县', '察布查尔锡伯自治县', '霍城县', '巩留县', '新源县', '昭苏县', '特克斯县', '尼勒克县'],
  '阿克苏地区': ['全部', '阿克苏市', '库车市', '沙雅县', '新和县', '拜城县', '温宿县', '阿瓦提县', '乌什县', '柯坪县'],
  '喀什地区': ['全部', '喀什市', '疏附县', '疏勒县', '英吉沙县', '泽普县', '莎车县', '麦盖提县', '岳普湖县', '伽师县', '巴楚县', '塔什库尔干塔吉克自治县'],
  '和田地区': ['全部', '和田市', '和田县', '墨玉县', '皮山县', '洛浦县', '策勒县', '于田县', '民丰县'],
  '塔城地区': ['全部', '塔城市', '乌苏市', '额敏县', '沙湾市', '托里县', '裕民县', '和布克赛尔蒙古自治县'],
  '阿勒泰地区': ['全部', '阿勒泰市', '布尔津县', '富蕴县', '福海县', '哈巴河县', '青河县', '吉木乃县'],
  '石河子市': ['全部', '石河子市'],
  '阿拉尔市': ['全部', '阿拉尔市'],
  '图木舒克市': ['全部', '图木舒克市'],
  '五家渠市': ['全部', '五家渠市']
};

var currentDataExpertise = '全部';
var currentDataProvince = '全部';
var currentDataCity = '全部';

function showDataFilterPanel() {
  document.getElementById('dataFilterOverlay').classList.add('show');
  document.getElementById('dataFilterPanel').classList.add('show');
  renderDataProviders();
}
function closeDataFilterPanel() {
  document.getElementById('dataFilterOverlay').classList.remove('show');
  document.getElementById('dataFilterPanel').classList.remove('show');
}
document.getElementById('dataFilterOverlay').addEventListener('click', closeDataFilterPanel);
document.getElementById('dataPanelClose').addEventListener('click', closeDataFilterPanel);

function selectDataExpertise(exp) {
  currentDataExpertise = exp;
  var chips = document.querySelectorAll('#dataExpertiseBar .data-filter-chip');
  chips.forEach(function(c) { c.classList.toggle('active', c.dataset.exp === exp); });
  renderDataProviders();
}
function selectDataProvince(prov) {
  currentDataProvince = prov;
  currentDataCity = '全部';
  var chips = document.querySelectorAll('#dataProvinceBar .data-filter-chip');
  chips.forEach(function(c) { c.classList.toggle('active', c.dataset.province === prov); });
  var cityBar = document.getElementById('dataCityBar');
  var cities = dataProvinceCityMap[prov] || ['全部'];
  var cityHtml = '<div class="data-city-chip active" data-city="全部" onclick="selectDataCity(\'全部\')">全部区县</div>';
  if (prov !== '新疆') {
    cities.forEach(function(city) {
      if (city !== '全部') {
        cityHtml += '<div class="data-city-chip" data-city="' + city + '" onclick="selectDataCity(\'' + city + '\')">' + city + '</div>';
      }
    });
  }
  cityBar.innerHTML = cityHtml;
  cityBar.classList[prov === '新疆' ? 'remove' : 'add']('show');
  renderDataProviders();
}
function selectDataCity(city) {
  currentDataCity = city;
  var chips = document.querySelectorAll('#dataCityBar .data-city-chip');
  chips.forEach(function(c) { c.classList.toggle('active', c.dataset.city === city); });
  renderDataProviders();
}
function renderDataProviders() {
  var list = document.getElementById('dataProviderList');
  var filtered = dataProviders.slice();
  if (currentDataExpertise !== '全部') {
    filtered = filtered.filter(function(p) { return p.tags.some(function(t) { return t.indexOf(currentDataExpertise) !== -1; }); });
  }
  if (currentDataProvince !== '全部') filtered = filtered.filter(function(p) { return p.region === currentDataProvince; });
  if (currentDataCity !== '全部') filtered = filtered.filter(function(p) { return p.city === currentDataCity; });
  if (filtered.length === 0) {
    list.innerHTML = '<div style="text-align:center;padding:40px 20px;color:#ccc;"><div style="font-size:36px;margin-bottom:10px;color:#ddd;">📄</div><div style="font-size:14px;">暂无符合条件的资料员</div></div>';
    return;
  }
  var html = '';
  filtered.forEach(function(p) {
    var tagHtml = p.tags.slice(0, 3).map(function(t) { return '<span class="data-provider-tag">' + t + '</span>'; }).join('');
    html += '<div class="data-provider-card">' +
      '<div class="data-provider-header">' +
        '<div class="data-provider-avatar" style="background:#1a2a4a;">' +
          '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
            '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>' +
          '</svg>' +
        '</div>' +
        '<div class="data-provider-info">' +
          '<div class="data-provider-name">' + p.name + '</div>' +
          '<div class="data-provider-firm">' + p.firm + '</div>' +
        '</div>' +
      '</div>' +
      '<div class="data-provider-tags">' + tagHtml + '</div>' +
    '</div>';
  });
  list.innerHTML = html;
}
</script>

</body>
</html>