<!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, viewport-fit=cover">
  <title>金江会展 - 中国邯郸（永年）紧固件展览会</title>
  <meta name="description" content="金江会展专业承办中国邯郸永年紧固件展览会、标准件展、光伏新能源展">
  <meta name="keywords" content="金江会展，紧固件展，永年展会，邯郸展会">
  <link href="http://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
  <link href="/shared/css/common.css" rel="stylesheet">
  <link href="/css/home.css" rel="stylesheet">
  <style>
    /* ===== 关于金江 - 手机端布局 ===== */
    @media (max-width: 768px) {
      /* Hero: 图片在上，文字在下（紧贴图片） */
      #aboutSubPage .about-hero-inner {
        flex-direction: column !important;
        gap: 3px !important;
      }
      #aboutSubPage .about-hero-image {
        flex: none !important;
        width: 100% !important;
      }
      #aboutSubPage .about-hero-image img {
        height: 260px !important;
      }
      #aboutSubPage .about-hero-text {
        flex: none !important;
        width: 100% !important;
        min-height: auto !important;
      }
      #aboutSubPage .about-hero-text h3 {
        font-size: 24px !important;
      }
      #aboutSubPage .about-hero-text h3,
      #aboutSubPage .about-hero-text div {
        margin-top: 0 !important;
      }

      /* Stats: 2列4行 */
      #aboutSubPage #aboutStatsGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
      }

      /* Brands: 竖向排列，每个占满宽度 */
      #aboutSubPage #aboutBrandsGrid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      #aboutSubPage #aboutBrandsGrid > div {
        max-width: 100% !important;
      }
      #aboutSubPage #aboutBrandsGrid img {
        height: 200px !important;
      }

      /* Bottom: 荣誉+使命 竖向排列 */
      #aboutSubPage .about-bottom {
        flex-direction: column !important;
        gap: 30px !important;
      }
      #aboutSubPage .about-honors {
        flex: none !important;
        width: 100% !important;
      }
      #aboutSubPage .about-mission-wrapper {
        flex: none !important;
        width: 100% !important;
      }

      /* Honors: 2列2行 */
      #aboutSubPage #aboutHonorsGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
      }

      /* 页面内边距调整 */
      #aboutSubPage {
        padding-top: 100px !important;
      }
      #aboutSubPage .about-hero,
      #aboutSubPage .about-stats,
      #aboutSubPage .about-brands,
      #aboutSubPage .about-bottom {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
    }

    /* ===== 新闻中心 - 手机端 ===== */
    @media (max-width: 768px) {
      #newsSubPage #newsList {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      #newsSubPage {
        padding-top: 100px !important;
      }
      #newsSubPage > div:last-child {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      #newsSubPage .filter-btn {
        padding: 8px 16px !important;
        font-size: 12px !important;
      }
    }

    /* ===== 联系我们 - 手机端 ===== */
    @media (max-width: 768px) {
      #contactSubPage {
        padding-top: 100px !important;
      }
      #contactSubPage > div:last-child {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      /* Row 1: 博览中心 - 竖向堆叠 */
      #contactSubPage > div:last-child > div:nth-child(1) {
        flex-direction: column !important;
        gap: 20px !important;
        margin-bottom: 40px !important;
      }
      #contactSubPage > div:last-child > div:nth-child(1) > div:nth-child(1) {
        flex: none !important;
        width: 100% !important;
      }
      #contactSubPage > div:last-child > div:nth-child(1) > div:nth-child(1) > div {
        height: 280px !important;
      }
      #contactSubPage > div:last-child > div:nth-child(1) > div:nth-child(2) {
        flex: none !important;
        width: 100% !important;
      }
      /* 两个展馆改为竖向 */
      #contactSubPage > div:last-child > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) {
        flex-direction: column !important;
        gap: 12px !important;
      }
      /* Row 2: 公司信息 - 竖向堆叠 */
      #contactSubPage > div:last-child > div:nth-child(2) {
        flex-direction: column !important;
        gap: 20px !important;
      }
      #contactSubPage > div:last-child > div:nth-child(2) > div:nth-child(1) {
        flex: none !important;
        width: 100% !important;
      }
      #contactSubPage > div:last-child > div:nth-child(2) > div:nth-child(1) > div {
        height: 280px !important;
      }
      #contactSubPage > div:last-child > div:nth-child(2) > div:nth-child(2) {
        flex: none !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: 12px !important;
      }
      /* 展馆标题字体缩小 */
      #contactSubPage h3 {
        font-size: 22px !important;
      }
    }
  </style>
  <!-- 引入全站共用 JavaScript -->
  <script src="/shared/js/common.js"></script>
</head>
<body>
  <!-- 开场动画遮罩 -->
  <div id="intro-overlay" onclick="closeIntroOverlay()">
    <!-- 视频背景 -->
    <div id="video-container">
      <video id="intro-video" autoplay muted playsinline>
        <source src="/uploads/main/home/intro-background.mp4" type="video/mp4">
      </video>
    </div>
    <!-- 原代码动画（保留作为注释，如需恢复可取消注释）
    <div id="canvas-container"><canvas id="c"></canvas></div>
    -->
    <div class="vignette"></div>
    <div id="main-text">金江会展·中国专业紧固件展会品牌</div>
    <div class="info-wrapper">
      <div class="info-item">
        <div class="info-title">第23届中国·永年标准件<br>厂商联谊暨产品展示会</div>
        <div class="info-time">2027年2月13-15日（正月初八-初十）</div>
      </div>
      <div class="info-item">
        <div class="info-title">第5届华北(邯郸)光伏新能源<br>暨建筑机电抗震博览会</div>
        <div class="info-time">2026年6月26-28日</div>
      </div>
      <div class="info-item">
        <div class="info-title">第19届中国·邯郸(永年)<br>紧固件及设备展览会</div>
        <div class="info-time">2026年9月16-19日</div>
      </div>
    </div>
    <div id="enter-text" onclick="closeIntroOverlay()">点击进入网站</div>
  </div>

  <!-- 顶部栏 -->
  <div class="top-bar hidden-during-video">
    <div class="container">
      <!-- 左侧：Logo + 展会信息 -->
      <div class="top-logo">
        <img src="/uploads/main/home/logo.svg" alt="金江会展">
        <div class="logo-divider"></div>
        <div class="top-info-container">
          <div class="top-info-title" id="topTitle">紧固件及设备展览会</div>
          <div class="top-info-meta">
            <div class="top-info-item">
              <i class="ri-time-line"></i>
              <span id="topDate">2026 年 9 月 16-19 日</span>
            </div>
            <div class="top-info-item">
              <i class="ri-map-pin-line"></i>
              <span id="topLocation">中国永年紧固件博览中心</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 移动端菜单按钮 - 移到第一行最右侧 -->
      <button class="mobile-menu-btn" onclick="toggleMobileMenu()">☰</button>
      
      <!-- 右侧：导航菜单 + 登记按钮 -->
      <div class="top-actions">
        <!-- PC端导航菜单 -->
        <nav class="navbar">
          <div class="nav-container">
            <ul class="nav-menu" id="navMenu">
              <li><a href="javascript:void(0)" class="active" onclick="showHome(); closeMobileMenu(); return false;">首页</a></li>
              <li><a href="javascript:void(0)" onclick="showSubPage('about', event); closeMobileMenu(); return false;">关于金江</a></li>
              <li class="nav-exhibition nav-exhibition-blue"><a href="/fastener" onclick="closeMobileMenu(); return true;">9月紧固件及设备展</a></li>
              <li class="nav-exhibition nav-exhibition-red"><a href="/standard" onclick="closeMobileMenu(); return true;">正月标准件产品展</a></li>
              <li class="nav-exhibition nav-exhibition-green"><a href="/pv" onclick="closeMobileMenu(); return true;">6月光伏抗震展</a></li>
              <li><a href="javascript:void(0)" onclick="showSubPage('news', event); closeMobileMenu(); return false;">新闻中心</a></li>
              <li><a href="javascript:void(0)" onclick="showSubPage('contact', event); closeMobileMenu(); return false;">联系我们</a></li>
              <li><a href="http://www.fastenerfair-cn.com" target="_blank" class="lang-switch">EN</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </div>

  <!-- 移动端导航栏（单独显示） -->
  <nav class="navbar mobile-only">
    <div class="nav-container">
      <ul class="nav-menu" id="navMenuMobile">
        <li><a href="javascript:void(0)" class="active" onclick="showHome(); closeMobileMenu(); return false;">首页</a></li>
        <li><a href="javascript:void(0)" onclick="showSubPage('about', event); closeMobileMenu(); return false;">关于金江</a></li>
        <li class="nav-exhibition nav-exhibition-blue"><a href="/fastener" onclick="closeMobileMenu(); return true;">9月紧固件及设备展</a></li>
        <li class="nav-exhibition nav-exhibition-red"><a href="/standard" onclick="closeMobileMenu(); return true;">正月标准件产品展</a></li>
        <li class="nav-exhibition nav-exhibition-green"><a href="/pv" onclick="closeMobileMenu(); return true;">6月光伏抗震展</a></li>
        <li><a href="javascript:void(0)" onclick="showSubPage('news', event); closeMobileMenu(); return false;">新闻中心</a></li>
        <li><a href="javascript:void(0)" onclick="showSubPage('contact', event); closeMobileMenu(); return false;">联系我们</a></li>
        <li><a href="http://www.example.com/en" target="_blank" class="lang-switch">EN</a></li>
      </ul>
    </div>
  </nav>

  <!-- Hero 轮播海报 -->
  <section class="hero-section">
    <!-- 视频元素（初始隐藏） -->
    <div class="hero-video-container" id="heroVideoContainer">
      <video id="heroVideo" class="hero-video" playsinline muted>
        <!-- PC端视频源（默认） -->
        <source id="heroVideoSource" src="/public/hero-video.mp4" type="video/mp4">
      </video>
      <!-- 视频遮罩，确保文字可读 -->
      <div class="hero-video-overlay"></div>
      <!-- 海报文字层：视频结束尾帧上方显示，由后管开关控制 -->
      <div class="hero-poster-text" id="heroPosterText" style="display:none;">
        <div class="poster-items-container" id="posterItemsContainer"></div>
      </div>
    </div>

    

    <div class="hero-features hidden-during-video">
      <div class="feature-item">
        <div class="feature-row">
          <div class="feature-icon">
            <i class="ri-rocket-2-line"></i>
          </div>
          <h4><span>精准</span><span>配对</span></h4>
        </div>
        <span class="feature-en">Precise matching</span>
      </div>
      
      <div class="feature-item">
        <div class="feature-row">
          <div class="feature-icon">
            <i class="ri-global-line"></i>
          </div>
          <h4><span>全球</span><span>商机</span></h4>
        </div>
        <span class="feature-en">Global business</span>
      </div>
      
      <div class="feature-item">
        <div class="feature-row">
          <div class="feature-icon">
            <i class="ri-bar-chart-line"></i>
          </div>
          <h4><span>高效</span><span>成交</span></h4>
        </div>
        <span class="feature-en">High efficiency</span>
      </div>
      
      <div class="feature-item">
        <div class="feature-row">
          <div class="feature-icon">
            <i class="ri-discuss-line"></i>
          </div>
          <h4><span>共话</span><span>未来</span></h4>
        </div>
        <span class="feature-en">Talk future</span>
      </div>
      
      <div class="feature-item">
        <div class="feature-row">
          <div class="feature-icon">
            <i class="ri-team-line"></i>
          </div>
          <h4><span>多方</span><span>参与</span></h4>
        </div>
        <span class="feature-en">Multi participate</span>
      </div>
    </div>
  </section>

  <!-- 展会系列 - 交互式板块 -->
  <section class="exhibitions-section" id="mainContent">
    <div class="exhibitions-interactive">
      <!-- 展会 1: 紧固件及设备展览会 -->
      <div class="exhibition-panel exhibition-panel-blue" onclick="location.href='/fastener'">
        <div class="exhibition-panel-bg" style="background-image: url('/uploads/main/home/fastener.jpg');"></div>
        <div class="exhibition-panel-content">
          <div class="exhibition-panel-header">
            <span class="exhibition-panel-tag">Hot</span>
            <h3>2026第19届<br>中国永年紧固件及设备展览会</h3>
          </div>
          <div class="exhibition-panel-info">
            <p><i class="ri-time-line"></i> 2026年9月16-19日</p>
            <p><i class="ri-map-pin-line"></i> 永年博览中心</p>
            <p>依托产业基地优势，打造一站式采购平台，是紧固件行业最具影响力的专业展会之一。</p>
          </div>
          <div class="exhibition-panel-categories">
            <h4>展区分类</h4>
            <div class="category-list">
              <div class="category-item">
                <i class="ri-settings-4-fill"></i>
                <span>设备展区</span>
              </div>
              <div class="category-item">
                <i class="ri-box-3-line"></i>
                <span>成品展区</span>
              </div>
              <div class="category-item">
                <i class="ri-shape-2-line"></i>
                <span>模具展区</span>
              </div>
              <div class="category-item">
                <i class="ri-tools-line"></i>
                <span>配套产品展区</span>
              </div>
              <div class="category-item">
                <i class="ri-stack-line"></i>
                <span>原材料展区</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 展会 2: 标准件厂商联谊产品展示会 -->
      <div class="exhibition-panel exhibition-panel-red" onclick="location.href='/standard'">
        <div class="exhibition-panel-bg" style="background-image: url('/uploads/main/home/standard.jpg');"></div>
        <div class="exhibition-panel-content">
          <div class="exhibition-panel-header">
            <span class="exhibition-panel-tag">Hot</span>
            <h3>2027第23届<br>标准件厂商联谊暨产品展示会</h3>
          </div>
          <div class="exhibition-panel-info">
            <p><i class="ri-time-line"></i> 2027年2月13-15日</p>
            <p><i class="ri-map-pin-line"></i> 永年博览中心</p>
            <p>每年农历正月初八举办，已成为行业传统和惯例，是永年标准件行业最具影响力的品牌展会。</p>
          </div>
          <div class="exhibition-panel-categories">
            <h4>展区分类</h4>
            <div class="category-list">
              <div class="category-item">
                <i class="ri-box-3-line"></i>
                <span>成品展区</span>
              </div>
              <div class="category-item">
                <i class="ri-hammer-line"></i>
                <span>五金工具展区</span>
              </div>
              <div class="category-item">
                <i class="ri-tools-line"></i>
                <span>配套产品展区</span>
              </div>
              <div class="category-item">
                <i class="ri-stack-line"></i>
                <span>原材料展区</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 展会 3: 建筑机电抗震光伏新能源博览会 -->
      <div class="exhibition-panel exhibition-panel-green" onclick="location.href='/pv'">
        <div class="exhibition-panel-bg" style="background-image: url('/uploads/main/home/pv.jpg');"></div>
        <div class="exhibition-panel-content">
          <div class="exhibition-panel-header">
            <span class="exhibition-panel-tag" style="background: #10B981;">New</span>
            <h3>2026第6届<br>建筑机电抗震光伏新能源博览会</h3>
          </div>
          <div class="exhibition-panel-info">
            <p><i class="ri-time-line"></i> 2026年6月26-28日</p>
            <p><i class="ri-map-pin-line"></i> 永年博览中心</p>
            <p>聚焦建筑机电抗震和光伏新能源领域，是华北地区重要的专业博览会之一。</p>
          </div>
          <div class="exhibition-panel-categories">
            <h4>展区分类</h4>
            <div class="category-list">
              <div class="category-item">
                <i class="ri-building-line"></i>
                <span>建筑配件展区</span>
              </div>
              <div class="category-item">
                <i class="ri-sun-line"></i>
                <span>光伏配件展区</span>
              </div>
              <div class="category-item">
                <i class="ri-shield-check-line"></i>
                <span>抗震配件展区</span>
              </div>
              <div class="category-item">
                <i class="ri-hammer-line"></i>
                <span>五金工具展区</span>
              </div>
              <div class="category-item">
                <i class="ri-flashlight-line"></i>
                <span>新能源展区</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 企业简介板块 - 浅灰色底色+红色重点文字 -->
  <section class="about-section scroll-animate">
    <div class="about-container">
      <!-- 主内容 - 左图右文 -->
      <div class="about-main">
        <!-- 左侧图片 -->
        <div class="about-image-section">
          <div class="about-main-image">
            <img src="/uploads/main/about/about-us-new.jpg" alt="金江会展" onerror="this.src='/uploads/_inbox/banners/banner-home.webp'">
          </div>
        </div>

        <!-- 右侧文字 -->
        <div class="about-content-wrapper">
          <div class="about-content-tag">Since 2003</div>
          <h3>中国领先的紧固件展会组织者</h3>
          <p class="about-description">
            <strong>金江会展</strong>成立于2003年，是中国领先的紧固件展会组织者。我们致力于为紧固件行业搭建<strong>专业的贸易交流平台</strong>，
            依托产业基地优势，打造<strong>一站式采购平台</strong>，推动行业发展。多年来，我们成功举办了多届专业展会，
            为紧固件制造和贸易企业提供了优质的商业机会。
          </p>
          <p class="about-description">
            我们拥有<strong>专业的策划团队</strong>、完善的展会服务体系和广泛的行业资源，致力于为参展商和观众打造<strong>高效的交流平台</strong>，助力中国紧固件产业走向世界。
          </p>
          <a href="/#aboutSubPage" class="about-cta">
            了解更多 <i class="ri-arrow-right-line"></i>
          </a>
        </div>
      </div>

      <!-- 下方数据展示 - 紧密连接 -->
      <div class="about-stats-section scroll-animate" id="statsSection">
        <!-- 点线动画背景 -->
        <canvas class="network-canvas" id="statsNetworkCanvas"></canvas>
        
        <div class="about-stats-header">
          <h4>二十余年专业积累</h4>
          <p>用数据说话，见证金江会展的成长历程</p>
        </div>
        <div class="about-stats-grid">
          <div class="stat-card-item">
            <div class="stat-item-icon">
              <i class="ri-calendar-check-fill"></i>
            </div>
            <div class="stat-item-number" data-target="2003">0</div>
            <div class="stat-item-label">公司成立</div>
            <div class="stat-item-unit">YEAR</div>
          </div>

          <div class="stat-card-item">
            <div class="stat-item-icon">
              <i class="ri-store-2-fill"></i>
            </div>
            <div class="stat-item-number" data-target="100">0</div>
            <div class="stat-item-label">专业展会</div>
            <div class="stat-item-unit">EXHIBITIONS</div>
          </div>

          <div class="stat-card-item">
            <div class="stat-item-icon">
              <i class="ri-newspaper-fill"></i>
            </div>
            <div class="stat-item-number" data-target="200">0</div>
            <div class="stat-item-label">媒体杂志</div>
            <div class="stat-item-unit">ISSUES</div>
          </div>

          <div class="stat-card-item">
            <div class="stat-item-icon">
              <i class="ri-team-fill"></i>
            </div>
            <div class="stat-item-number" data-target="12000">0</div>
            <div class="stat-item-label">服务企业</div>
            <div class="stat-item-unit">COMPANIES</div>
          </div>
        </div>
      </div>
    </div>
  </section>



  <!-- 新闻中心板块 -->
  <section class="news-center-section scroll-animate" id="newsCenter">
    <div class="news-container">
      <!-- 标题区域 -->
      <div class="news-header">
        <!-- 大父容器：控制整行布局 -->
        <div class="title-row">
          <!-- 左边中文：独立子容器 -->
          <div class="title-item title-left">
            <h2>新闻中心</h2>
          </div>
          <!-- 中间英文：独立子容器（含红色圆角背景） -->
          <div class="title-item title-center">
            News Center
          </div>
          <!-- 右边副标题：独立子容器 -->
          <div class="title-item title-right">
            <p class="section-desc">最新展会动态与行业资讯</p>
          </div>
        </div>
      </div>

      <!-- 视频区域 - 点击播放 -->
      <div class="news-main" id="videoSection" style="cursor: pointer;">
        <div class="news-main-image" style="position: relative;">
          <!-- 使用优酷视频的默认封面作为预览图 -->
          <iframe 
            id="videoPreviewIframe"
            src="http://player.youku.com/embed/XNjE3Mjk0MjQ1Ng==" 
            frameborder="0" 
            allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
            allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
          allowfullscreen 
            style="width: 100%; height: 100%; border: none; pointer-events: none;"
          ></iframe>
          
          <!-- 播放按钮覆盖层 -->
          <div class="video-overlay" style="background: rgba(0, 0, 0, 0.3);">
            <div class="play-button">
              <i class="ri-play-fill"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 新闻列表 -->
      <div class="news-list" id="homeNewsList">
        <!-- 新闻将通过 JavaScript 动态渲染 -->
      </div>
    </div>
  </section>

  <!-- 合作单位板块 - 跟随鼠标切换 -->
  <section class="partners-section scroll-animate" id="partners">
    <div class="section-header">
      <!-- 大父容器：控制整行布局 -->
      <div class="title-row">
        <!-- 左边中文：独立子容器 -->
        <div class="title-item title-left">
          <h2>合作单位</h2>
        </div>
        <!-- 右边英文：独立子容器（含红色圆角背景） -->
        <div class="title-item title-center">
          Support Unit
        </div>
        <!-- 右边副标题：独立子容器 -->
        <div class="title-item title-right">
          <p class="section-desc">我们的公司在多个行业协会中同时担任重要职位，与行业领先企业保持紧密合作关系</p>
        </div>
      </div>
    </div>

    <!-- 底纹区域：鼠标经过logo时显示浅灰色底纹 -->
    <div class="partner-watermark" id="partnerWatermark"></div>

    <!-- 横向滚动的Logo容器 -->
    <div class="partners-track-container">
      <div class="partners-track" id="partnersTrack">
        <!--GEN:PARTNERS-->
          <div class="partner-card"><div class="partner-logo"><img src="/public/partners/partner-01.jpg" alt="中国紧固件协会"></div><div class="partner-info"><h4>中国紧固件协会</h4></div></div>
        <div class="partner-card" data-tilt="0.4"><div class="partner-logo"><img src="/public/partners/partner-02.jpg" alt="河北省紧固件商会"></div><div class="partner-info"><h4>河北省紧固件商会</h4></div></div>
        <div class="partner-card" data-tilt="0.6"><div class="partner-logo"><img src="/public/partners/partner-03.jpg" alt="邯郸市标准化协会"></div><div class="partner-info"><h4>邯郸市标准化协会</h4></div></div>
        <div class="partner-card" data-tilt="0.8"><div class="partner-logo"><img src="/public/partners/partner-04.jpg" alt="永年区钢铁行业协会"></div><div class="partner-info"><h4>永年区钢铁行业协会</h4></div></div>
        <div class="partner-card" data-tilt="1.0"><div class="partner-logo"><img src="/public/partners/partner-05.jpg" alt="中国五金制品协会"></div><div class="partner-info"><h4>中国五金制品协会</h4></div></div>
        <div class="partner-card" data-tilt="0.4"><div class="partner-logo"><img src="/public/partners/partner-06.jpg" alt="河北省五金机电商会"></div><div class="partner-info"><h4>河北省五金机电商会</h4></div></div>
        <div class="partner-card" data-tilt="0.4"><div class="partner-logo"><img src="/public/partners/partner-07.jpg" alt="邯郸市建筑机械协会"></div><div class="partner-info"><h4>邯郸市建筑机械协会</h4></div></div>
        <div class="partner-card" data-tilt="0.4"><div class="partner-logo"><img src="/public/partners/partner-08.jpg" alt="建筑机电抗震分会"></div><div class="partner-info"><h4>建筑机电抗震分会</h4></div></div>
        <div class="partner-card" data-tilt="0.4"><div class="partner-logo"><img src="/public/partners/partner-09.jpg" alt="河北省装备制造业协会"></div><div class="partner-info"><h4>河北省装备制造业协会</h4></div></div>
        <div class="partner-card" data-tilt="0.4"><div class="partner-logo"><img src="/public/partners/partner-10.jpg" alt="中国标准件技术创新联盟"></div><div class="partner-info"><h4>中国标准件技术创新联盟</h4></div></div>
        <div class="partner-card" data-tilt="0.4"><div class="partner-logo"><img src="/public/partners/partner-11.jpg" alt="邯郸市会展行业协会"></div><div class="partner-info"><h4>邯郸市会展行业协会</h4></div></div>
        <div class="partner-card" data-tilt="0.4"><div class="partner-logo"><img src="/public/partners/partner-12.jpg" alt="全国紧固件标准化技术委员会"></div><div class="partner-info"><h4>全国紧固件标准化技术委员会</h4></div></div>
          <!--GEN:PARTNERS-END-->
      </div>
    </div>
  </section>

  <!-- 关于金江子页面 -->
  <section id="aboutSubPage" style="display: none; padding-top: 120px; min-height: 100vh; background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);">
    <div class="section-header">
      <span class="section-tag">About Jinjiang</span>
      <h2>关于金江</h2>
    </div>
    
    <!-- Hero: 左图右文 -->
    <div class="about-hero" style="max-width: 1800px; margin: 0 auto; padding: 40px 30px;">
      <div class="about-hero-inner" style="display: flex; gap: 60px;">
        <div class="about-hero-image" style="flex: 0 0 45%; min-height: 400px; display: flex;">
          <img id="aboutHeroImage" src="" alt="" style="width: 100%; height: 400px; object-fit: cover; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.12);">
        </div>
        <div class="about-hero-text" style="flex: 1; min-height: 400px; display: flex; flex-direction: column; justify-content: center;">
          <h3 id="aboutHeroTitle" style="display: none; font-size: 35px; font-weight: 700; color: #1A202C; margin-bottom: 25px; line-height: 1.4;"></h3>
          <div id="aboutHeroContent" style="font-size: 16px; color: #718096; line-height: 1.8;"></div>
        </div>
      </div>
    </div>
    
    <!-- Stats: 8项数据 -->
    <div class="about-stats" style="max-width: 1800px; margin: 0 auto; padding: 30px;">
      <div id="aboutStatsGrid" style="display: grid; grid-template-columns: repeat(8, 1fr); gap: 15px;"></div>
    </div>
    
    <!-- Brands: 3品牌配图 -->
    <div class="about-brands" style="max-width: 1800px; margin: 0 auto; padding: 40px 30px;">
      <h3 id="aboutBrandsTitle" style="font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 40px;"></h3>
      <div id="aboutBrandsGrid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;"></div>
    </div>
    
    <!-- Qualifications + Mission 并排 -->
    <div class="about-bottom" style="max-width: 1800px; margin: 0 auto; padding: 40px 30px 60px; display: flex; gap: 40px;">
      <div class="about-honors" style="flex: 1;">
        <h3 style="font-size: 24px; font-weight: 700; margin-bottom: 25px;">资质荣誉</h3>
        <div id="aboutHonorsGrid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;"></div>
      </div>
      <div class="about-mission-wrapper" style="flex: 0 0 35%; display: flex; flex-direction: column;">
        <h3 style="font-size: 24px; font-weight: 700; margin-bottom: 25px; color: #1A202C;">企业使命</h3>
        <div class="about-mission" style="flex: 1; background: linear-gradient(135deg, #DC2626, #B91C1C); border-radius: 16px; padding: 50px; display: flex; align-items: center; justify-content: center;">
          <p id="aboutMissionContent" style="font-size: 20px; color: rgba(255,255,255,0.9); line-height: 2; text-align: center;"></p>
        </div>
      </div>
    </div>
  </section>

  <!-- 联系我们子页面 -->
  <section id="contactSubPage" class="exhibitions-section" style="display: none; margin-top: 0px; padding-top: 120px; padding-bottom: 50px;">
    <div id="contact" class="section-header">
      <span class="section-tag">Contact Us</span>
      <h2>联系我们</h2>
    </div>
    <div style="max-width: 1800px; margin: 0 auto; padding: 0 30px;">
      
      <!-- ====== Row 1: 博览中心 - 左地图·右信息 ====== -->
      <div style="display: flex; gap: 50px; margin-bottom: 80px;">
        <!-- 左：地图 -->
        <div style="flex: 1;">
          <div style="width: 100%; height: 450px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12); background: #f5f5f5;">
            <div id="venueMapContainer" style="width: 100%; height: 100%;"></div>
          </div>
        </div>
        <!-- 右：信息 -->
        <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
          <h3 style="font-size: 28px; color: #1A202C; margin-bottom: 20px;">中国永年紧固件博览中心</h3>
          <div id="contactCenterDesc" style="font-size: 15px; color: #718096; line-height: 1.8; margin-bottom: 30px;"></div>
          <div style="display: flex; gap: 30px; margin-bottom: 25px;">
            <div style="background: #f8f9fa; border-radius: 12px; padding: 25px 30px; text-align: center; flex: 1;">
              <h4 style="font-size: 18px; color: #DC2626; margin-bottom: 8px;">南展馆</h4>
              <p style="font-size: 16px; color: #4A5568; font-weight: 600;">面积：<span id="contactSouthHall"></span></p>
            </div>
            <div style="background: #f8f9fa; border-radius: 12px; padding: 25px 30px; text-align: center; flex: 1;">
              <h4 style="font-size: 18px; color: #DC2626; margin-bottom: 8px;">北展馆</h4>
              <p style="font-size: 16px; color: #4A5568; font-weight: 600;">面积：<span id="contactNorthHall"></span></p>
            </div>
          </div>
          <!-- 博览中心地址 -->
          <div style="display: flex; align-items: center; gap: 10px; padding: 15px 20px; background: #f8f9fa; border-radius: 10px; font-size: 15px; color: #4A5568;">
            <i class="ri-map-pin-line" style="color: #DC2626; font-size: 20px;"></i>
            <span id="contactVenueAddress"></span>
          </div>
        </div>
      </div>
      
      <!-- ====== Row 2: 公司信息 - 左地图 + 右三竖列 ====== -->
      <div style="display: flex; gap: 50px;">
        <!-- Left: Company Map -->
        <div style="flex: 1;">
          <div style="width: 100%; height: 450px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12); background: #f5f5f5;">
            <div id="companyMapContainer" style="width: 100%; height: 100%;"></div>
          </div>
        </div>
        <!-- Right: Three vertical columns -->
        <div style="flex: 1; display: flex; gap: 20px;">
          <!-- Column 1: 公司全称 -->
          <div style="flex: 1; background: white; border-radius: 16px; padding: 30px 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;">
            <div style="width: 56px; height: 56px; background: rgba(220,38,38,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
              <i class="ri-building-4-line" style="color: #DC2626; font-size: 28px;"></i>
            </div>
            <div style="font-size: 14px; color: #94a3b8; margin-bottom: 6px;">公司全称</div>
            <div id="contactCompanyName" style="font-size: 16px; color: #1A202C; font-weight: 600;"></div>
          </div>
          <!-- Column 2: 公司地址 -->
          <div style="flex: 1; background: white; border-radius: 16px; padding: 30px 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;">
            <div style="width: 56px; height: 56px; background: rgba(220,38,38,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
              <i class="ri-map-pin-line" style="color: #DC2626; font-size: 28px;"></i>
            </div>
            <div style="font-size: 14px; color: #94a3b8; margin-bottom: 6px;">公司地址</div>
            <div id="contactCompanyAddress" style="font-size: 15px; color: #1A202C; font-weight: 500;"></div>
          </div>
          <!-- Column 3: 电话 + 邮箱 -->
          <div style="flex: 1; background: white; border-radius: 16px; padding: 30px 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;">
            <div style="width: 56px; height: 56px; background: rgba(220,38,38,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
              <i class="ri-phone-line" style="color: #DC2626; font-size: 28px;"></i>
            </div>
            <div style="font-size: 14px; color: #94a3b8; margin-bottom: 6px;">联系电话</div>
            <div id="contactCompanyPhone" style="font-size: 15px; color: #1A202C; font-weight: 500; margin-bottom: 15px;"></div>
            <div style="font-size: 14px; color: #94a3b8; margin-bottom: 6px;">电子邮箱</div>
            <div id="contactCompanyEmail" style="font-size: 15px; color: #1A202C; font-weight: 500;"></div>
          </div>
        </div>
      </div>
      
    </div>
  </section>
  
  <!-- 高德地图加载脚本 -->
  <script>
    var amapLoaded = false;
    var mapsInitialized = false;
    
    function initContactMaps() {
      if (mapsInitialized) return;
      
      var vmc = document.getElementById('venueMapContainer');
      var cmc = document.getElementById('companyMapContainer');
      if (!vmc || !cmc) {
        // 如果容器还没渲染，稍后重试
        setTimeout(initContactMaps, 500);
        return;
      }
      // 确保容器可见且有尺寸
      vmc.style.width = '100%';
      vmc.style.height = '100%';
      cmc.style.width = '100%';
      cmc.style.height = '100%';
      
      if (typeof AMapLoader === 'undefined') {
        var s = document.createElement('script');
        s.src = 'http://webapi.amap.com/loader.js';
        s.onload = function() { amapLoaded = true; loadContactMaps(); };
        document.head.appendChild(s);
      } else {
        amapLoaded = true;
        loadContactMaps();
      }
    }
    
    function loadContactMaps() {
      if (mapsInitialized) return;
      mapsInitialized = true;
      
      // 高德地图安全密钥（2021.12后申请的key必须配合安全密钥使用）
      window._AMapSecurityConfig = {
        securityJsCode: '2d9313bc79a9b14204b84491e1dc0655'
      };
      
      AMapLoader.load({
        key: '9bbb22b14569ff8dcf6c729b51751728',
        version: '2.0'
      }).then(function(AMap) {
        // 展馆地图 - 永年紧固件博览中心
        var venueMap = new AMap.Map("venueMapContainer", {
          zoom: 16, center: [114.517706, 36.809418], mapStyle: 'amap://styles/whitesmoke'
        });
        new AMap.Marker({ position: [114.517706, 36.809418], map: venueMap, title: '永年紧固件博览中心' });
        
        // 公司地图 - 河北金江会展策划有限公司（尚客优酒店南楼）
        var companyMap = new AMap.Map("companyMapContainer", {
          zoom: 16, center: [114.497860, 36.780148], mapStyle: 'amap://styles/whitesmoke'
        });
        new AMap.Marker({ position: [114.497860, 36.780148], map: companyMap, title: '河北金江会展策划有限公司' });
        
        // 点击地图打开设备默认地图导航
        document.getElementById('venueMapContainer').style.cursor = 'pointer';
        document.getElementById('companyMapContainer').style.cursor = 'pointer';
        document.getElementById('venueMapContainer').onclick = function() {
          window.open('http://uri.amap.com/marker?position=114.517706,36.809418&name=永年紧固件博览中心', '_blank');
        };
        document.getElementById('companyMapContainer').onclick = function() {
          window.open('http://uri.amap.com/marker?position=114.497860,36.780148&name=河北金江会展策划有限公司', '_blank');
        };
      }).catch(function(e) { console.error('地图加载失败:', e); });
    }
  </script>

  <!-- 新闻中心子页面 -->
  <section id="newsSubPage" class="exhibitions-section" style="display: none; margin-top: 0px; padding-top: 120px; padding-bottom: 50px;">
    <div id="news" class="section-header">
      <span class="section-tag">News Center</span>
      <h2>新闻中心</h2>
    </div>
    <div style="max-width: 1800px; margin: 0 auto; padding: 0 30px;">
      <!-- 新闻分类筛选 -->
      <div id="newsFilters" style="display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap;">
        <button class="filter-btn active" data-category="company" style="padding: 10px 25px; border: 2px solid #64748b; border-radius: 30px; background: #64748b; color: #ffffff; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">公司新闻</button>
        <button class="filter-btn" data-category="fastener" style="padding: 10px 25px; border: 2px solid #e2e8f0; border-radius: 30px; background: transparent; color: #64748b; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s;">紧固件展会</button>
        <button class="filter-btn" data-category="standard" style="padding: 10px 25px; border: 2px solid #e2e8f0; border-radius: 30px; background: transparent; color: #64748b; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s;">标准件展会</button>
        <button class="filter-btn" data-category="pv" style="padding: 10px 25px; border: 2px solid #e2e8f0; border-radius: 30px; background: transparent; color: #64748b; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s;">光伏展会</button>
      </div>

      <!-- 新闻列表 -->
      <div id="newsList" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;">
        <div class="empty" style="grid-column: 1 / -1; text-align: center; padding: 60px 0; color: #94a3b8;">
          <p>加载中...</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 新闻详情子页面 -->
  <section id="newsDetailSubPage" style="display: none; margin-top: 0px; min-height: 100vh; background: #f8f9fa; padding-top: 80px;">
    <div style="max-width: 900px; margin: 0 auto; padding: 40px 30px;">
      <!-- 返回按钮 -->
      <div style="margin-bottom: 30px;">
        <a href="javascript:void(0)" onclick="backToNewsList()" style="display: inline-flex; align-items: center; gap: 8px; color: #DC2626; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.3s;">
          <i class="ri-arrow-left-line" style="font-size: 16px;"></i>
          返回新闻列表
        </a>
      </div>
      
      <!-- 新闻详情内容 -->
      <div id="newsDetailContent" style="background: #ffffff; border-radius: 16px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
        <!-- 标题 -->
        <h1 id="newsDetailTitle" style="font-size: 30px; font-weight: 700; color: #1A202C; margin: 0 0 20px; line-height: 1.4;"></h1>
        
        <!-- 元信息 -->
        <div style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; margin-bottom: 30px; flex-wrap: wrap; gap: 15px;">
          <div style="display: flex; align-items: center; gap: 20px; color: #718096; font-size: 14px;">
            <span id="newsDetailDate" style="display: flex; align-items: center; gap: 5px;">
              <i class="ri-calendar-line" style="color: #DC2626;"></i>
            </span>
            <span id="newsDetailCategory" style="display: flex; align-items: center; gap: 5px;">
              <i class="ri-folder-line" style="color: #DC2626;"></i>
            </span>
          </div>
          <div style="color: #718096; font-size: 14px;">
            <span id="newsDetailViews" style="display: flex; align-items: center; gap: 5px;">
              <i class="ri-eye-line" style="color: #DC2626;"></i>
            </span>
          </div>
        </div>
        
        <!-- 摘要 -->
        <div id="newsDetailExcerpt" style="background: #f8f9fa; border-left: 4px solid #DC2626; padding: 15px 20px; margin-bottom: 30px; border-radius: 0 8px 8px 0; font-size: 16px; color: #4A5568; line-height: 1.8;"></div>
        
        <!-- 正文 - 使用隔离容器防止样式污染 -->
        <div id="newsDetailBody" style="font-size: 16px; line-height: 1.8; color: #4A5568; contain: style layout; isolation: isolate; overflow: visible;"></div>
      </div>
    </div>
  </section>

  <!-- 公共底部横幅占位符 -->
  <div id="footer-placeholder"></div>
  <!-- 动态加载公共底部横幅（从API） -->
<!-- -->
<script src="/js/home.js"></script>

<!-- -->

  <!-- 视频播放模态框 -->
  <div id="videoModal" class="modal-overlay" style="z-index: 10000;">
    <div class="modal-container video-modal-container" style="max-width: 1000px; width: 95%; padding: 0; background: #000; position: relative; max-height: 95vh;">
      <div class="modal-header" style="border-radius: 0;">
        <h2><i class="ri-video-line"></i> 展会视频</h2>
        <button class="modal-close" onclick="closeVideoModal()">×</button>
      </div>
      <div class="video-modal-body" style="padding: 0; background: #000; position: relative; z-index: 1;">
        <iframe
          id="videoIframe"
          src=""
          frameborder="0"
          allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
          allowfullscreen
          style="width: 100%; height: 500px; border: none; display: block;"
        ></iframe>
      </div>
      <!-- 视频播放结束提示 -->
      <div class="video-end-hint" id="videoEndHint">
        <div class="scroll-arrow">
          <i class="ri-arrow-down-line"></i>
        </div>
        <span class="scroll-hint-text">下滑参观网站</span>
      </div>
    </div>
  </div>

  <!-- 展商登记模态框 -->
  <div id="exhibitorModal" class="modal-overlay">
    <div class="modal-container">
      <div class="modal-header">
        <h2><i class="ri-building-2-line"></i> 展商登记</h2>
        <button class="modal-close" onclick="closeModal('exhibitor')">×</button>
      </div>
      <div class="modal-body">
        <div class="modal-success">✅ <strong>提交成功！</strong><br>我们已收到您的申请，将在 3 个工作日内与您联系。</div>
        <form onsubmit="submitExhibitorForm(event)">
          <div class="modal-section">
            <h3><i class="ri-building-2-line"></i> 展商登记信息</h3>
            <div class="modal-row">
              <div class="modal-group">
                <label>公司名称 <span class="required">*</span></label>
                <input type="text" name="company_name" required placeholder="请输入公司全称">
              </div>
              <div class="modal-group">
                <label>统一社会信用代码</label>
                <input type="text" name="credit_code" placeholder="请输入统一社会信用代码">
              </div>
            </div>
            <div class="modal-group full">
              <label>公司地址 <span class="required">*</span></label>
              <input type="text" name="company_address" required placeholder="请输入公司详细地址">
            </div>
            <div class="modal-group full">
              <label>公司简介</label>
              <textarea name="company_intro" placeholder="请简要介绍贵公司"></textarea>
            </div>
          </div>
          <div class="modal-section">
            <h3>👤 联系人信息</h3>
            <div class="modal-row">
              <div class="modal-group">
                <label>联系人姓名 <span class="required">*</span></label>
                <input type="text" name="contact_name" required placeholder="请输入联系人姓名">
              </div>
              <div class="modal-group">
                <label>职位</label>
                <input type="text" name="contact_position" placeholder="请输入职位">
              </div>
            </div>
            <div class="modal-row">
              <div class="modal-group">
                <label>手机号码 <span class="required">*</span></label>
                <input type="tel" name="contact_phone" required placeholder="请输入手机号码">
              </div>
              <div class="modal-group">
                <label>电子邮箱 <span class="required">*</span></label>
                <input type="email" name="contact_email" required placeholder="请输入邮箱">
              </div>
            </div>
          </div>
          <div class="modal-section">
            <h3><i class="ri-file-text-line"></i> 参展信息</h3>
            <div class="modal-row">
              <div class="modal-group">
                <label>意向展会 <span class="required">*</span></label>
                <select name="exhibition" required>
                  <option value="">请选择展会</option>
                  <option value="fastener">紧固件及设备展</option>
                  <option value="standard">标准件产品展</option>
                  <option value="pv">建筑抗震光伏展</option>
                </select>
              </div>
              <div class="modal-group">
                <label>展位类型 <span class="required">*</span></label>
                <select name="booth_type" required>
                  <option value="">请选择</option>
                  <option value="special">特装展位</option>
                  <option value="standard">标准展位</option>
                </select>
              </div>
            </div>
            <div class="modal-group full">
              <label>主营产品</label>
              <textarea name="products" placeholder="请列出拟参展的主要产品"></textarea>
            </div>
          </div>
          <div class="modal-section">
            <h3>🔐 安全验证</h3>
            <div class="modal-group full">
              <label>请将滑块拖动到最右侧 <span class="required">*</span></label>
              <div id="exhibitorSliderCaptcha" style="position: relative; background: #e8e8e8; border-radius: 8px; height: 50px; overflow: visible;">
                <div id="exhibitorSliderTrack" style="position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #52c41a 0%, #52c41a 100%); width: 0%; transition: none;"></div>
                <div id="exhibitorSliderTarget" style="position: absolute; top: 0; left: 0; height: 100%; width: 50px; background: rgba(82, 196, 26, 0.2); border-right: 2px solid #52c41a; pointer-events: none;"></div>
                <div id="exhibitorSliderBtn" style="position: absolute; top: 5px; left: 5px; width: 40px; height: 40px; background: white; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: grab; display: flex; align-items: center; justify-content: center; font-size: 18px; user-select: none; z-index: 10;">
                  <span style="color: #999;">→</span>
                </div>
                <div id="exhibitorSliderText" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #999; font-size: 14px; pointer-events: none; white-space: nowrap;">请按住滑块，拖动到最右侧</div>
              </div>
              <input type="hidden" id="exhibitorCaptchaInput" value="false">
            </div>
          </div>
          <button type="submit" class="modal-submit">📤 提交申请</button>
        </form>
      </div>
    </div>
  </div>

  <!-- 观众登记模态框 -->
  <div id="visitorModal" class="modal-overlay">
    <div class="modal-container">
      <div class="modal-header">
        <h2><i class="ri-ticket-line"></i> 观众登记</h2>
        <button class="modal-close" onclick="closeModal('visitor')">×</button>
      </div>
      <div class="modal-body">
        <div class="modal-success">✅ <strong>登记成功！</strong><br>确认码已发送至您的手机，请凭此码入场。</div>
        <form onsubmit="submitVisitorForm(event)">
          <div class="modal-section">
            <h3>👤 个人信息</h3>
            <div class="modal-row">
              <div class="modal-group">
                <label>姓名 <span class="required">*</span></label>
                <input type="text" name="name" required placeholder="请输入真实姓名">
              </div>
              <div class="modal-group">
                <label>性别 <span class="required">*</span></label>
                <select name="gender" required>
                  <option value="">请选择</option>
                  <option value="male">男</option>
                  <option value="female">女</option>
                </select>
              </div>
            </div>
            <div class="modal-row">
              <div class="modal-group">
                <label>手机号码 <span class="required">*</span></label>
                <input type="tel" name="phone" required placeholder="请输入手机号码">
              </div>
              <div class="modal-group">
                <label>电子邮箱</label>
                <input type="email" name="email" placeholder="请输入邮箱">
              </div>
            </div>
          </div>
          <div class="modal-section">
            <h3><i class="ri-building-2-line"></i> 公司信息</h3>
            <div class="modal-row">
              <div class="modal-group">
                <label>公司名称</label>
                <input type="text" name="company" placeholder="请输入公司全称">
              </div>
              <div class="modal-group">
                <label>职位</label>
                <input type="text" name="position" placeholder="请输入职位">
              </div>
            </div>
          </div>
          <div class="modal-section">
            <h3><i class="ri-ticket-line"></i> 参观信息</h3>
            <div class="modal-row">
              <div class="modal-group">
                <label>意向展会 <span class="required">*</span></label>
                <select name="exhibition" required>
                  <option value="">请选择展会</option>
                  <option value="fastener">紧固件及设备展</option>
                  <option value="standard">标准件产品展</option>
                  <option value="pv">建筑抗震光伏展</option>
                </select>
              </div>
              <div class="modal-group">
                <label>参观日期</label>
                <input type="date" name="visit_date">
              </div>
            </div>
            <div class="modal-group full">
              <label>参观目的</label>
              <textarea name="purpose" placeholder="请简要说明参观目的"></textarea>
            </div>
          </div>
          <div class="modal-section">
            <h3>🔐 安全验证</h3>
            <div class="modal-group full">
              <label>请将滑块拖动到最右侧 <span class="required">*</span></label>
              <div id="visitorSliderCaptcha" style="position: relative; background: #e8e8e8; border-radius: 8px; height: 50px; overflow: visible;">
                <div id="visitorSliderTrack" style="position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #52c41a 0%, #52c41a 100%); width: 0%; transition: none;"></div>
                <div id="visitorSliderTarget" style="position: absolute; top: 0; left: 0; height: 100%; width: 50px; background: rgba(82, 196, 26, 0.2); border-right: 2px solid #52c41a; pointer-events: none;"></div>
                <div id="visitorSliderBtn" style="position: absolute; top: 5px; left: 5px; width: 40px; height: 40px; background: white; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: grab; display: flex; align-items: center; justify-content: center; font-size: 18px; user-select: none; z-index: 10;">
                  <span style="color: #999;">→</span>
                </div>
                <div id="visitorSliderText" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #999; font-size: 14px; pointer-events: none; white-space: nowrap;">请按住滑块，拖动到最右侧</div>
              </div>
              <input type="hidden" id="visitorCaptchaInput" value="false">
            </div>
          </div>
          <button type="submit" class="modal-submit">📤 提交登记</button>
        </form>
      </div>
    </div>
  </div>

<!-- -->
  <!-- -->
<script src="/js/track.js"></script>
<!-- -->

<!-- 展会信息动态链接（前后台联动）-->
<script>
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    if (window.linkExhibitionData) linkExhibitionData();
  }, 100);
});
</script>
<!-- 动态加载首页内容（后台可编辑）-->
<script>
window.addEventListener('pageshow', function(e) {
  if (e.persisted) {
    location.reload();
  }
})
</script>
</body>
</html>
