charging-cabinet/deploy/landing/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 全站统一 favicon：与 web 管理端同源（logo/favicon.svg） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>艾动智能 — 智能充电柜矩阵系统</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
  color: #1A1C20;
}

a { color: inherit; text-decoration: none; }

/* ===== 整体布局：上中下三块 ===== */
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ===== TOP: 顶部导航 ===== */
.top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 48px;
  z-index: 10;
}

.top-brand { display: flex; align-items: center; gap: 8px; }
.logo {
  height: 48px;
  width: auto;
  display: block;
  /* 品牌图标是满幅方形（本身无圆角），48px 下加一点圆角更像 app 图标，不至于是一块硬方块 */
  border-radius: 10px;
}
.top-name { font-size: 24px; font-weight: 800; color: #1A1C20; letter-spacing: 0.02em; }

.top-links { display: flex; gap: 8px; }
.top-link {
  font-size: 13px; font-weight: 500;
  color: #4A5060;
  padding: 7px 16px;
  border-radius: 8px;
  transition: all 0.2s;
}
.top-link:hover { background: rgba(37,99,235,0.07); color: #2563EB; }
.top-link--cta { background: #1A1C20; color: #fff; }
.top-link--cta:hover { background: #2D3038; color: #fff; }

/* ===== MID: 中部背景图，填满 ===== */
.mid {
  flex: 1;
  min-height: 0;
  background: url("hero-bg.png") no-repeat right center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0 80px;
}

/* ===== COPY: 文字区域 ===== */
.copy {
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px;
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: 100px;
  font-size: 13px; font-weight: 600;
  color: #2563EB;
  width: fit-content;
}
.tag .dot {
  width: 6px; height: 6px;
  background: #2563EB;
  border-radius: 50%;
}

h1 {
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1A1C20;
}
h1 .accent { color: #2563EB; }

.subhead {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 300;
  color: #4A5060;
  line-height: 1.75;
  max-width: 480px;
}

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 5px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 100px;
  font-size: 13px; font-weight: 500;
  color: #4A5060;
}

.ctas { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  font-size: 15px; font-weight: 600;
  border-radius: 10px;
  transition: all 0.2s;
}
.btn-primary {
  background: #1A1C20; color: #fff;
  box-shadow: 0 4px 24px rgba(26,28,32,0.10);
}
.btn-primary:hover { background: #2D3038; transform: translateY(-2px); }
.btn-ghost {
  color: #4A5060;
  border: 1.5px solid rgba(0,0,0,0.12);
}
.btn-ghost:hover { border-color: #8B92A5; color: #1A1C20; }

.stats {
  display: flex; gap: 32px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 4px;
}
.stat-num { font-size: 28px; font-weight: 700; color: #1A1C20; line-height: 1.2; }
.stat-label { font-size: 12px; font-weight: 500; color: #8B92A5; margin-top: 2px; }

/* ===== BOT: 底部 ICP ===== */
.bot {
  flex-shrink: 0;
  text-align: center;
  padding: 14px;
  font-size: 12px;
  color: #6B7280;
  z-index: 10;
}
.bot a { color: #2563EB; }
.bot a:hover { text-decoration: underline; }
</style>
</head>
<body>

<div class="layout">

  <!-- 上：顶部导航 -->
  <div class="top">
    <div class="top-brand">
      <!-- 页头品牌图标：与 favicon 同一个文件（logo/favicon.svg），保证全站一致 -->
      <img class="logo" src="favicon.svg" alt="艾动智能">
      <span class="top-name">艾动智能</span>
    </div>
    <div class="top-links">
      <a href="/doc/" class="top-link">开发文档</a>
      <a href="/pms/" class="top-link top-link--cta">管理后台</a>
    </div>
  </div>

  <!-- 中：背景图填满 -->
  <div class="mid">
    <div class="copy">
      <div class="tag"><span class="dot"></span>智能充电矩阵系统</div>
      <h1>为换电场景打造的<br><span class="accent">下一代智能充电</span></h1>
      <p class="subhead">36仓独立直流快充，4G远程实时管控，多重安全防护体系。从硬件到云端，全栈自研的智能充电解决方案。</p>

      <div class="pills">
        <span class="pill">36仓独立</span>
        <span class="pill">多重防护</span>
        <span class="pill">4G在线</span>
        <span class="pill">BMS适配</span>
      </div>

      <div class="stats">
        <div><div class="stat-num">36</div><div class="stat-label">独立仓体</div></div>
        <div><div class="stat-num">&lt;0.5s</div><div class="stat-label">指令响应</div></div>
        <div><div class="stat-num">8000h</div><div class="stat-label">MTBF</div></div>
        <div><div class="stat-num">99%</div><div class="stat-label">可用率</div></div>
      </div>
    </div>
  </div>

  <!-- 下：底部 ICP -->
  <div class="bot">
    © 2026 艾动智能 · <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备2025198376号-1</a>
  </div>

</div>

</body>
</html>