﻿<!DOCTYPE html>
<html lang="zh-CN">
<head> <meta name="keywords" content="keywords_temp" />
<meta name="description" content="description_temp" />

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>火天下平台 2.0 — 全行业数字化聚合系统</title>
<style>
  :root {
    /* 火山引擎/Arco Design 色彩体系 */
    --brand: #165dff;
    --brand-hover: #4080ff;
    --brand-light: #e8f1ff;
    --bg: #ffffff;
    --bg-gray: #f7f8fa;
    --bg-blue: #f2f7ff;
    --text-1: #1d2129;
    --text-2: #4e5969;
    --text-3: #86909c;
    --line: #e5e6eb;
    --ok: #00b42a;
    --radius: 8px;
    --shadow: 0 4px 16px rgba(22, 93, 255, .06);
    --shadow-hover: 0 8px 28px rgba(22, 93, 255, .12);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--text-1);
    font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-feature-settings: "tnum";
    overflow-x: hidden;
  }

  /* ---------- 顶部导航（火山式） ---------- */
  nav {
    position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 100;
    background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; padding: 0 6vw;
  }
  .nav-logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
  .nav-logo-mark {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), #722ed1);
    display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700;
  }
  .nav-logo em { font-style: normal; color: var(--brand); }
  .nav-links { margin-left: auto; display: flex; gap: 36px; }
  .nav-links a {
    font-size: 14px; color: var(--text-2); text-decoration: none; transition: color .2s;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--brand); font-weight: 500; }
  .nav-cta {
    margin-left: 36px; padding: 8px 22px; background: var(--brand); color: #fff;
    border-radius: var(--radius); font-size: 14px; text-decoration: none; transition: background .2s;
  }
  .nav-cta:hover { background: var(--brand-hover); }
  main { padding-top: 64px; }

  /* ---------- HERO（浅色 + 渐变光斑） ---------- */
  .hero {
    position: relative; padding: 110px 6vw 90px;
    background:
      radial-gradient(600px 320px at 82% 12%, rgba(22,93,255,.10), transparent 65%),
      radial-gradient(520px 300px at 12% 78%, rgba(114,46,209,.07), transparent 65%),
      var(--bg);
    overflow: hidden;
  }
  .hero-grid-bg {
    position: absolute; inset: 0; opacity: .5;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000 30%, transparent 75%);
  }
  .hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; text-align: center; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--brand-light); color: var(--brand);
    font-size: 13px; padding: 6px 16px; border-radius: 100px; letter-spacing: 1px;
  }
  .hero-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
  h1 {
    margin-top: 26px; font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.2; font-weight: 700; letter-spacing: 1px;
  }
  h1 .grad {
    background: linear-gradient(100deg, var(--brand) 20%, #722ed1 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero-sub {
    margin: 26px auto 0; max-width: 680px; color: var(--text-2);
    font-size: 16px; line-height: 2;
  }
  .hero-sub strong { color: var(--text-1); font-weight: 600; }
  .hero-cta { margin-top: 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .btn-primary {
    padding: 13px 34px; background: var(--brand); color: #fff; border: none;
    font-size: 15px; border-radius: var(--radius); cursor: pointer;
    transition: all .2s; text-decoration: none; box-shadow: 0 4px 14px rgba(22,93,255,.3);
  }
  .btn-primary:hover { background: var(--brand-hover); box-shadow: 0 6px 20px rgba(22,93,255,.4); }
  .btn-ghost {
    padding: 13px 34px; background: #fff; color: var(--text-2);
    border: 1px solid var(--line); font-size: 15px; border-radius: var(--radius);
    cursor: pointer; transition: all .2s; text-decoration: none;
  }
  .btn-ghost:hover { color: var(--brand); border-color: var(--brand); }

  /* 行业标签流 */
  .industry-strip {
    position: relative; z-index: 2; margin-top: 56px;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  }
  .ind-tag {
    font-size: 13px; color: var(--text-2); letter-spacing: 1px;
    background: #fff; border: 1px solid var(--line);
    padding: 8px 20px; border-radius: 100px; transition: all .2s;
  }
  .ind-tag:hover { color: var(--brand); border-color: var(--brand); box-shadow: var(--shadow); }

  /* 指标条 */
  .ticker {
    position: relative; z-index: 2; margin-top: 64px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    overflow: hidden; box-shadow: var(--shadow);
  }
  .ticker-item { padding: 30px 24px; text-align: center; border-right: 1px solid var(--line); }
  .ticker-item:last-child { border-right: none; }
  .ticker-num {
    font-size: 34px; font-weight: 700; color: var(--text-1);
    font-variant-numeric: tabular-nums;
  }
  .ticker-num em { font-style: normal; color: var(--brand); font-size: 16px; margin-left: 3px; }
  .ticker-label { margin-top: 6px; font-size: 13px; color: var(--text-3); }

  /* ---------- 章节骨架 ---------- */
  section { padding: 96px 6vw; }
  section.gray { background: var(--bg-gray); }
  .sec-inner { max-width: 1200px; margin: 0 auto; }
  .sec-badge {
    display: inline-block; font-size: 13px; color: var(--brand); letter-spacing: 2px;
    background: var(--brand-light); padding: 5px 14px; border-radius: 100px; margin-bottom: 18px;
  }
  .sec-title { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: 1px; }
  .sec-desc { margin-top: 16px; max-width: 620px; color: var(--text-2); font-size: 15px; line-height: 2; }

  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.on { opacity: 1; transform: none; }

  /* ---------- 运作模式三段流 ---------- */
  .flow-steps { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .step {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 36px 30px; transition: all .25s;
  }
  .step:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
  .step-no { font-size: 13px; color: var(--brand); letter-spacing: 2px; font-weight: 600; }
  .step-name { margin-top: 12px; font-size: 21px; font-weight: 700; }
  .step-desc { margin-top: 12px; font-size: 14px; color: var(--text-2); line-height: 2; }
  .step-items { margin-top: 20px; border-top: 1px dashed var(--line); padding-top: 16px; }
  .step-items li {
    list-style: none; font-size: 13.5px; color: var(--text-2); line-height: 2.2;
    padding-left: 18px; position: relative;
  }
  .step-items li::before {
    content: ''; position: absolute; left: 0; top: 12px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  }

  /* ---------- 行业模板机制 ---------- */
  .tpl-wrap { margin-top: 52px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
  .tpl-rule {
    display: grid; grid-template-columns: 56px 1fr; gap: 20px;
    padding: 24px 0; border-bottom: 1px solid var(--line);
  }
  .tpl-rule:first-child { padding-top: 0; }
  .rule-no { font-size: 13px; color: var(--brand); letter-spacing: 1px; font-weight: 600; padding-top: 3px; }
  .rule-name { font-size: 17px; font-weight: 600; }
  .rule-detail { margin-top: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.9; }
  .tpl-panel {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 32px; position: sticky; top: 88px; box-shadow: var(--shadow);
  }
  .tpl-panel h3 { font-size: 15px; color: var(--text-1); font-weight: 600; letter-spacing: 1px; }
  .tpl-demo { margin-top: 20px; font-size: 13.5px; }
  .tpl-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 0; border-bottom: 1px dashed var(--line); color: var(--text-2);
  }
  .tpl-row b { font-weight: 500; color: var(--text-1); }
  .tpl-row .on { color: var(--ok); font-weight: 500; }
  .tpl-row .off { color: var(--text-3); text-decoration: line-through; }
  .tpl-foot { margin-top: 16px; font-size: 12.5px; color: var(--text-3); }

  /* ---------- 五端协同 ---------- */
  .terms-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .term {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 30px 24px; transition: all .25s;
  }
  .term:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: transparent; }
  .term-code { font-size: 12px; color: var(--brand); letter-spacing: 1px; font-weight: 600; }
  .term-name { margin-top: 12px; font-size: 18px; font-weight: 700; }
  .term-role { margin-top: 10px; font-size: 13px; color: var(--text-2); line-height: 1.9; }
  .term-stack {
    margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line);
    font-size: 12px; color: var(--text-3); line-height: 1.9;
  }

  /* ---------- 平台能力 ---------- */
  .cap-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .cap {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 36px 32px; transition: all .25s;
  }
  .cap:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
  .cap-no { font-size: 12px; color: var(--brand); letter-spacing: 2px; font-weight: 600; }
  .cap-name { margin-top: 10px; font-size: 20px; font-weight: 700; }
  .cap-desc { margin-top: 12px; font-size: 14px; color: var(--text-2); line-height: 2; }

  /* ---------- 下载区（品牌蓝底） ---------- */
  .dl-section {
    background: linear-gradient(135deg, #0e42c2 0%, var(--brand) 55%, #722ed1 130%);
    color: #fff;
  }
  .dl-section .sec-badge { background: rgba(255,255,255,.16); color: #fff; }
  .dl-section .sec-desc { color: rgba(255,255,255,.8); }
  .dl-wrap { margin-top: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .dl-card {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    border-radius: 14px; padding: 40px 36px; transition: all .25s;
  }
  .dl-card:hover { background: rgba(255,255,255,.14); transform: translateY(-4px); }
  .dl-tag { font-size: 12px; letter-spacing: 3px; color: rgba(255,255,255,.75); }
  .dl-name { margin-top: 12px; font-size: 24px; font-weight: 700; }
  .dl-desc { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.8); line-height: 2; min-height: 84px; }
  .dl-actions { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
  .dl-btn { padding: 11px 28px; font-size: 14px; border-radius: var(--radius); text-decoration: none; transition: all .2s; }
  .dl-btn.primary { background: #fff; color: var(--brand); font-weight: 600; }
  .dl-btn.primary:hover { box-shadow: 0 6px 20px rgba(0,0,0,.2); }
  .dl-btn.ghost { border: 1px solid rgba(255,255,255,.45); color: #fff; }
  .dl-btn.ghost:hover { background: rgba(255,255,255,.12); }
  .dl-note { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.9; }

  /* ---------- 页脚 ---------- */
  footer {
    background: var(--bg-gray); border-top: 1px solid var(--line);
    padding: 48px 6vw; display: flex; justify-content: space-between; align-items: flex-end;
  }
  footer .f-big { font-size: 22px; font-weight: 700; }
  footer .f-big span { color: var(--brand); }
  footer .f-meta { text-align: right; font-size: 12px; color: var(--text-3); line-height: 2.1; }

  @media (max-width: 1080px) {
    .nav-links { display: none; }
    .flow-steps, .tpl-wrap, .cap-grid, .dl-wrap { grid-template-columns: 1fr; }
    .terms-grid { grid-template-columns: repeat(2, 1fr); }
    .ticker { grid-template-columns: repeat(2, 1fr); }
    .ticker-item { border-bottom: 1px solid var(--line); }
  }
</style>
</head>
<body>

<nav>
  <div class="nav-logo">
    <div class="nav-logo-mark">火</div>
    <div>火天下<em>平台 2.0</em></div>
  </div>
  <div class="nav-links">
    <a href="#model" class="active">运作模式</a>
    <a href="#template">行业模板</a>
    <a href="#terminals">五端协同</a>
    <a href="#capability">平台能力</a>
    <a href="#download">下载接入</a>
  </div>
  <a class="nav-cta" href="#download">立即接入</a>
</nav>

<main>
  
  <header class="hero"> <meta name="keywords" content="keywords_temp" />
<meta name="description" content="description_temp" />

    <div class="hero-grid-bg"></div>
    <div class="hero-inner">
      <span class="hero-badge"><i></i>全行业数字化聚合系统 · V2.0</span>
      <h1>一套平台<br><span class="grad">接入千行百业的生意</span></h1>
      <p class="hero-sub">
        汽车后市场、餐饮、零售、生活服务——无论什么行业，接入火天下平台 2.0 后，
        企业获得<strong>按行业自动裁剪的专属 ERP</strong>，会员获得<strong>一个通用的消费 APP</strong>，
        平台以<strong>数字人民币原生资金体系</strong>和 <strong>AI 中台</strong>为所有角色提供底座能力。
      </p>
      <div class="hero-cta">
        <a class="btn-primary" href="#download">企业接入</a>
        <a class="btn-ghost" href="#model">了解运作模式</a>
      </div>
      <div class="industry-strip">
        <span class="ind-tag">汽车后市场</span>
        <span class="ind-tag">餐饮门店</span>
        <span class="ind-tag">零售便利</span>
        <span class="ind-tag">生活服务</span>
        <span class="ind-tag">维修保养</span>
        <span class="ind-tag">美容美发</span>
        <span class="ind-tag">更多行业持续接入</span>
      </div>
      <div class="ticker">
        <div class="ticker-item"><div class="ticker-num" data-count="98">0</div><div class="ticker-label">数据表 · 全量审计七年</div></div>
        <div class="ticker-item"><div class="ticker-num" data-count="775">0</div><div class="ticker-label">接口端点 · 统一契约</div></div>
        <div class="ticker-item"><div class="ticker-num" data-count="5">0</div><div class="ticker-label">终端形态 · 一套中台</div></div>
        <div class="ticker-item"><div class="ticker-num" data-count="0"><em>起</em></div><div class="ticker-label">资金不经平台 · 直连数币</div></div>
      </div>
    </div>
  </header>

  
  <section id="model" class="gray">
    <div class="sec-inner">
      <div class="reveal">
        <span class="sec-badge">01 / HOW IT WORKS</span>
        <h2 class="sec-title">三段式接入，各就各位</h2>
        <p class="sec-desc">平台统一治理，企业自主经营，会员自由消费——每个角色只看到自己该看的东西。</p>
      </div>
      <div class="flow-steps reveal">
        <div class="step">
          <div class="step-no">STEP 1 · 平台侧</div>
          <div class="step-name">中心平台统一录入</div>
          <div class="step-desc">运营方在中心平台完成企业入驻登记，按区域树分配归属，指定企业所属行业与经营范围。</div>
          <ul class="step-items">
            <li>树形区域节点治理</li>
            <li>企业档案与行业分配</li>
            <li>行业模板版本统一管控</li>
          </ul>
        </div>
        <div class="step">
          <div class="step-no">STEP 2 · 企业侧</div>
          <div class="step-name">下载 ERP 自主部署</div>
          <div class="step-desc">企业下载 ERP 模板安装到自己的服务器，登录时系统按企业行业自动呈现专属功能——无关行业功能完全隐藏。</div>
          <ul class="step-items">
            <li>按行业裁剪的专属功能界面</li>
            <li>数据存在企业自己服务器</li>
            <li>录入经营数据即开张</li>
          </ul>
        </div>
        <div class="step">
          <div class="step-no">STEP 3 · 会员侧</div>
          <div class="step-name">会员 APP 自由消费</div>
          <div class="step-desc">个人会员下载一个 APP，即可在所有接入企业消费——跨店权益、次卡年费、返利积分全域通用。</div>
          <ul class="step-items">
            <li>一个账号走遍全行业商户</li>
            <li>权益最优解自动抵扣</li>
            <li>数币支付，资金直达商户</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  
  <section id="template">
    <div class="sec-inner">
      <div class="reveal">
        <span class="sec-badge">02 / INDUSTRY TEMPLATE</span>
        <h2 class="sec-title">行业模板：同一套 ERP，千种面孔</h2>
        <p class="sec-desc">平台为每个行业配置专属功能栏目。企业安装 ERP 时选定行业，系统只呈现该行业的功能——不多一个，不少一个。</p>
      </div>
      <div class="tpl-wrap">
        <div class="tpl-rules reveal">
          <div class="tpl-rule">
            <span class="rule-no">T-01</span>
            <div><div class="rule-name">功能栏目勾选制</div><div class="rule-detail">行业与功能栏目多对多映射，平台在中心端勾选配置；未勾选栏目在企业 ERP 中完全隐藏，不是置灰，是不存在。</div></div>
          </div>
          <div class="tpl-rule">
            <span class="rule-no">T-02</span>
            <div><div class="rule-name">通用底座 + 行业继承</div><div class="rule-detail">全行业通用模板作为底座，收银、库存、财务等核心能力所有行业共享；行业模板在底座上增删，绝不重复造轮子。</div></div>
          </div>
          <div class="tpl-rule">
            <span class="rule-no">T-03</span>
            <div><div class="rule-name">模板版本管控</div><div class="rule-detail">行业配置变更必须走版本发布流程，企业端按版本升级，配置改动永不实时击穿在营企业。</div></div>
          </div>
          <div class="tpl-rule">
            <span class="rule-no">T-04</span>
            <div><div class="rule-name">行业数据隔离</div><div class="rule-detail">每个行业独立数据表前缀，企业数据物理隔离，跨行业数据永不混排。</div></div>
          </div>
        </div>
        <aside class="tpl-panel reveal">
          <h3>同一套 ERP · 两个行业视角</h3>
          <div class="tpl-demo">
            <div class="tpl-row"><b>收银开单</b><span class="on">汽修门店 ✓　餐饮门店 ✓</span></div>
            <div class="tpl-row"><b>库存管理</b><span class="on">✓　✓</span></div>
            <div class="tpl-row"><b>工单调度</b><span>汽修 ✓　<span class="off">餐饮 ✗</span></span></div>
            <div class="tpl-row"><b>桌台管理</b><span><span class="off">汽修 ✗</span>　餐饮 ✓</span></div>
            <div class="tpl-row"><b>服务预约</b><span class="on">✓　✓</span></div>
            <div class="tpl-row"><b>财务台账</b><span class="on">✓　✓</span></div>
          </div>
          <div class="tpl-foot">登录即按行业自动呈现，无需任何手工配置</div>
        </aside>
      </div>
    </div>
  </section>

  
  <section id="terminals" class="gray">
    <div class="sec-inner">
      <div class="reveal">
        <span class="sec-badge">03 / ECOSYSTEM</span>
        <h2 class="sec-title">五端协同，一张网络</h2>
        <p class="sec-desc">平台、企业、会员、调度、通讯——五种角色共享同一套账户、商品、订单与资金底座。</p>
      </div>
      <div class="terms-grid reveal">
        <div class="term">
          <div class="term-code">CP / 中心平台</div>
          <div class="term-name">运营治理中心</div>
          <div class="term-role">企业入驻、行业分配、模板管控、返利审核、信誉体系、全局合规大屏。</div>
          <div class="term-stack">Vue3 · Arco Design<br>树形区域治理</div>
        </div>
        <div class="term">
          <div class="term-code">ERP / 企业端</div>
          <div class="term-name">行业化 ERP</div>
          <div class="term-role">按行业自动裁剪功能。商品、收银、采购、库存、人事、财务全链路，断网照常开单。</div>
          <div class="term-stack">企业自主部署<br>SQLite 本地优先</div>
        </div>
        <div class="term">
          <div class="term-code">APP / 会员端</div>
          <div class="term-name">会员消费 APP</div>
          <div class="term-role">商城选购、权益抵扣、服务预约、评价互动。UniApp 一套代码多端发行。</div>
          <div class="term-stack">UniApp · Vue3<br>权益最优解引擎</div>
        </div>
        <div class="term">
          <div class="term-code">DSP / 调度端</div>
          <div class="term-name">行业调度中心</div>
          <div class="term-role">四类工单状态机统一驱动，员工池资质校验，照片核验门禁，全行业工单调度。</div>
          <div class="term-stack">状态机统一抽象<br>跨企业智能派单</div>
        </div>
        <div class="term">
          <div class="term-code">IM / 通讯端</div>
          <div class="term-name">企业级 IM</div>
          <div class="term-role">企业与会员直达沟通，消息类型白名单管控，反诈风控内置，留痕可审计。</div>
          <div class="term-stack">OpenIM 网关<br>MsgType 白名单</div>
        </div>
      </div>
    </div>
  </section>

  
  <section id="capability">
    <div class="sec-inner">
      <div class="reveal">
        <span class="sec-badge">04 / PLATFORM POWER</span>
        <h2 class="sec-title">底座能力，全行业共享</h2>
        <p class="sec-desc">无论哪个行业接入，这四项底座能力开箱即用。</p>
      </div>
      <div class="cap-grid reveal">
        <div class="cap">
          <div class="cap-no">CAP-01</div>
          <div class="cap-name">数字人民币原生资金体系</div>
          <div class="cap-desc">所有支付统一收口，企业自行开户绑定，资金直达企业不经过平台。转账双人制衡、流水自动勾稽、全量审计七年——钱的事，一分不差。</div>
        </div>
        <div class="cap">
          <div class="cap-no">CAP-02</div>
          <div class="cap-name">AI 中台（千问驱动）</div>
          <div class="cap-desc">会员客服、经营问答、知识库三条线统一接入。AI 只建议不执行、全量审计、企业数据物理隔离——三条铁则机器级强制执行。</div>
        </div>
        <div class="cap">
          <div class="cap-no">CAP-03</div>
          <div class="cap-name">离线优先同步</div>
          <div class="cap-desc">门店断网不是停机理由。本地落库照常开单，网络恢复后自动追赶同步，指数退避重试，幂等去重不丢单不重单。</div>
        </div>
        <div class="cap">
          <div class="cap-no">CAP-04</div>
          <div class="cap-name">跨企业权益网络</div>
          <div class="cap-desc">次卡、年费卡、返利池跨企业通用。权益最优解引擎自动为会员选最划算的组合，抵扣额最大者优先，临期权益先用。</div>
        </div>
      </div>
    </div>
  </section>

  
  <section id="download" class="dl-section">
    <div class="sec-inner">
      <div class="reveal">
        <span class="sec-badge">05 / GET STARTED</span>
        <h2 class="sec-title">下载接入，即刻开张</h2>
        <p class="sec-desc">企业先联系平台完成入驻登记与行业分配，再下载 ERP 部署；会员直接下载 APP 即可消费。</p>
      </div>
      <div class="dl-wrap reveal">
        <div class="dl-card">
          <div class="dl-tag">FOR BUSINESS · 企业端</div>
          <div class="dl-name">行业化 ERP 模板</div>
          <div class="dl-desc">
            下载后部署到企业自己的服务器（Docker 一键安装，最低 1 核 4G 即可运行）。
            首次登录自动匹配企业行业，呈现专属功能界面。数据存于企业本地，平台远程只做版本升级。
          </div>
          <div class="dl-actions">
            <a class="dl-btn primary" href="/download/htx-erp-latest.zip">下载 ERP 模板</a>
            <a class="dl-btn ghost" href="/download/erp-install-guide.html">安装指南</a>
          </div>
          <div class="dl-note">前置条件：已在中心平台完成企业入驻登记 · 已分配行业类型 · 已开通数币对公钱包</div>
        </div>
        <div class="dl-card">
          <div class="dl-tag">FOR MEMBER · 会员端</div>
          <div class="dl-name">火天下会员 APP</div>
          <div class="dl-desc">
            一个账号通行平台所有接入企业：商城消费、服务预约、权益抵扣、数币支付、
            跨店返利。Android / iOS / 小程序三端同账号互通。
          </div>
          <div class="dl-actions">
            <a class="dl-btn primary" href="/download/htx-app-release.apk" download>下载 Android 安装包</a>
            <a class="dl-btn ghost" href="/app/" target="_blank">打开 H5 版（免安装）</a>
          </div>
          <div class="dl-note">Android 原生包已发布 · H5 版浏览器打开即用 · iOS / 小程序待主体认证</div>
        </div>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="f-big">火天下平台<span> 2.0</span></div>
  <div class="f-meta">
    全行业数字化聚合系统 · 数字人民币原生<br>
    Spring Boot 3.2 · Vue 3 · UniApp · MySQL 8 · Redis 7<br>
    © 2026 HUOTIANXIA PLATFORM
  </div>
</footer>

<script>
// ---- 滚动渐显 ----
const io = new IntersectionObserver((es) => {
  es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('on'); io.unobserve(e.target); } });
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));

// ---- 数字滚动 ----
const nio = new IntersectionObserver((es) => {
  es.forEach(e => {
    if (!e.isIntersecting) return;
    nio.unobserve(e.target);
    const el = e.target, target = +el.dataset.count;
    const suffix = el.querySelector('em') ? el.querySelector('em').outerHTML : '';
    const t0 = performance.now(), dur = 1400;
    (function step(now) {
      const p = Math.min((now - t0) / dur, 1);
      const ease = 1 - Math.pow(1 - p, 3);
      el.innerHTML = Math.round(target * ease) + suffix;
      if (p < 1) requestAnimationFrame(step);
    })(t0);
  });
}, { threshold: 0.4 });
document.querySelectorAll('.ticker-num').forEach(el => nio.observe(el));

// ---- 导航高亮 ----
const links = document.querySelectorAll('.nav-links a');
const secs = [...links].map(a => document.querySelector(a.getAttribute('href')));
window.addEventListener('scroll', () => {
  let cur = 0;
  secs.forEach((s, i) => { if (s && s.getBoundingClientRect().top < innerHeight * 0.35) cur = i; });
  links.forEach((a, i) => a.classList.toggle('active', i === cur));
}, { passive: true });
</script>
</body>
</html>
