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>
<!-- 社交分享（og / Twitter）：此前完全缺失，链接被分享时没有预览图 -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="艾动智能">
<meta property="og:title" content="艾动智能 — 为换电场景打造的下一代智能充电">
<meta property="og:description" content="36 仓独立直流快充，4G 远程实时管控，多重安全防护体系。从硬件到云端，全栈自研的智能充电解决方案。">
<meta property="og:image" content="https://app.anzhizhichong.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://app.anzhizhichong.com/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="艾动智能 — 为换电场景打造的下一代智能充电">
<meta name="twitter:description" content="36 仓独立直流快充，4G 远程实时管控，多重安全防护体系。从硬件到云端，全栈自研。">
<meta name="twitter:image" content="https://app.anzhizhichong.com/og-image.jpg">
<style>
/* ==========================================================================
   艾动智能 · 产品介绍页（单屏不滚动 / 明亮浅色）
   —— 设计口径见 AGENTS.md「操作规则」：偏好明亮浅色、单屏不滚动，⛔ 不做暗色科技风
   —— 品牌色直接取自 logo：logo/纯色横向.svg 的 .cls-1 = #0366e6
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --brand: #0366e6;        /* 取自 logo 的蓝，全站强调色统一用它 */
  --brand-dark: #0354c4;   /* hover 加深 */
  --brand-soft: #eaf2fe;   /* 极浅蓝底，用于标签/弱化背景 */
  --ink: #0F1419;          /* 主标题 */
  --body: #454B58;         /* 正文 */
  --muted: #8B92A5;        /* 辅助文字 */
  --line: rgba(15,20,25,0.08);
}

html, body {
  height: 100%;
  overflow: hidden;        /* 单屏不滚动（AGENTS.md 口径） */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}

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

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

/* ===== 背景：白底 + 右上角极淡的品牌蓝光晕（保持明亮，不搞暗色）===== */
.bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 620px at 82% 18%, rgba(3,102,230,0.055), transparent 68%),
    radial-gradient(700px 480px at 96% 88%, rgba(3,102,230,0.035), transparent 70%);
}

/* ===== TOP: 顶部导航 ===== */
.top {
  position: relative; z-index: 2;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 48px;
}
.top-brand { display: flex; align-items: center; }
/* 横版锁标 1511.75×413.59（≈3.65:1）；48px 高 ⇒ 约 175px 宽 */
.logo { height: 46px; width: auto; display: block; }

.top-links { display: flex; align-items: center; gap: 6px; }
.top-link {
  font-size: 13px; font-weight: 500; color: var(--body);
  padding: 8px 16px; border-radius: 8px; transition: all .2s;
}
.top-link:hover { background: var(--brand-soft); color: var(--brand); }
.top-link--cta { background: var(--ink); color: #fff; }
.top-link--cta:hover { background: #23272F; color: #fff; }

/* ===== MID: 左文右图 分栏 ===== */
.mid {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: flex; align-items: center;
  gap: 40px;
  padding: 0 64px;
}

/* ---- 左：文案 ---- */
.copy {
  flex: 1 1 52%;
  max-width: 620px;
  display: flex; flex-direction: column; gap: 20px;
}

/* 小标签：品牌蓝 + 呼吸圆点 */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 12px;
  background: var(--brand-soft);
  border: 1px solid rgba(3,102,230,0.16);
  border-radius: 100px;
  font-size: 13px; font-weight: 600; color: var(--brand);
  width: fit-content;
}
.tag .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(3,102,230,0.45);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(3,102,230,0.40); }
  70%  { box-shadow: 0 0 0 7px rgba(3,102,230,0); }
  100% { box-shadow: 0 0 0 0 rgba(3,102,230,0); }
}

h1 {
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 .accent { color: var(--brand); }

.subhead {
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--body);
  max-width: 500px;
}

/* 能力标签：只放 stats 里没有的，避免信息重复 */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 5px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px; font-weight: 500; color: var(--body);
  box-shadow: 0 1px 2px rgba(15,20,25,0.03);
}

/* 行动按钮（此前只有 CSS、HTML 里从未渲染过）*/
.ctas { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px;
  font-size: 15px; font-weight: 600;
  border-radius: 10px; transition: all .2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 6px 20px rgba(3,102,230,0.24);
}
.btn-primary:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(3,102,230,0.30);
}
.btn-ghost { color: var(--body); border: 1.5px solid rgba(15,20,25,0.13); background: #fff; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn .arrow { transition: transform .2s; }
.btn-primary:hover .arrow { transform: translateX(3px); }

/* 数据条 */
.stats {
  display: flex; gap: 40px;
  padding-top: 18px; margin-top: 4px;
  border-top: 1px solid var(--line);
}
.stat-num {
  font-size: 30px; font-weight: 800; color: var(--ink);
  line-height: 1.1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;   /* 数字等宽，四个数据对齐 */
}
.stat-num .unit { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.stat-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 5px; }

/* ---- 右：产品图 ---- */
.hero {
  position: relative;
  flex: 1 1 48%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* 柜子背后的柔光 + 地面投影，给纯白背景加点纵深（仍是浅色）*/
.hero::before {
  content: ''; position: absolute; z-index: 0;
  width: 78%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(3,102,230,0.10), transparent 62%);
}
.hero img {
  position: relative; z-index: 1;
  /* ⛔ 绝不用 background-size:100% 100%（那会把 1.78 的图横向拉爆）；
       contain = 保持原始宽高比，永不变形 */
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  /* 把图片的硬边框**融进页面白底**：径向遮罩让中心（柜体）保持不透明、四缘渐变透明。
     否则 4:3 的图贴在白底上会有一道明显的"贴图"竖直硬边。
     椭圆半径按柜体在画面里的占比取（柜体约占宽 50%、高 84%）⇒ 柜体完全在实心区内，
     只有背景在边缘化开。图片自带地面投影，故移除 CSS 投影（否则影子会被遮罩切断）。 */
  -webkit-mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
  mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
}

/* ===== BOT: 底部备案 ===== */
.bot {
  position: relative; z-index: 2;
  flex-shrink: 0;
  text-align: center; padding: 14px;
  font-size: 12px; color: var(--muted);
}
.bot a { color: var(--brand); }
.bot a:hover { text-decoration: underline; }

/* ===== 自适应：窄屏时收紧，保证仍然单屏不滚动 ===== */
@media (max-width: 1180px) {
  .mid { padding: 0 40px; gap: 28px; }
  .stats { gap: 28px; }
  .stat-num { font-size: 26px; }
}
/* 到更窄/更矮时让图片让位给文字，避免文字被挤出屏幕 */
@media (max-width: 900px), (max-height: 620px) {
  .hero { display: none; }
  .copy { flex-basis: 100%; max-width: 720px; }
}
</style>
</head>
<body>

<div class="bg"></div>

<div class="layout">

  <!-- 上：顶部导航 -->
  <div class="top">
    <div class="top-brand">
      <!-- 横版锁标（图标 + "艾动智能"字样，文字已转为路径、无字体依赖）-->
      <img class="logo" src="logo.svg" alt="艾动智能">
    </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 远程实时管控，多重安全防护体系。<br>
        从硬件到云端，全栈自研的智能充电解决方案。
      </p>

      <!-- 只放 stats 未覆盖的能力点，"36仓独立"已由下方数据条表达，不再重复 -->
      <div class="pills">
        <span class="pill">多重防护</span>
        <span class="pill">4G 在线</span>
        <span class="pill">BMS 适配</span>
      </div>

      <!-- 首屏行动按钮 -->
      <div class="ctas">
        <a href="/pms/" class="btn btn-primary">
          进入管理后台
          <svg class="arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 12h14M13 6l6 6-6 6"/>
          </svg>
        </a>
        <a href="/doc/" class="btn btn-ghost">开发文档</a>
      </div>

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

    <!-- 产品图：object-fit:contain 保证不变形；窄屏时隐藏让位给文字 -->
    <div class="hero">
      <img src="hero.jpg" alt="艾动智能 36 仓智能充电柜">
    </div>
  </div>

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

</div>

</body>
</html>