06765f99db
- 使用 Taro + React 重写 H5 用户端（替换旧的 React+Vite+H5 实现）
- 6 个页面：登录、首页、设备列表、设备详情、仓体详情、个人中心
- Zustand 状态管理 + API 层封装 11 个接口
- 后端 H5 路由：新增仪表盘/项目/设备/充电控制接口，组织数据隔离
- 扫码入口：/h5/{abstract_id} → 免认证查设备 + 登录后跳转
- 管理端：新增绑定码管理、二维码展示下载、设备绑定/替换 IMEI
- 产品落地页更新（hero-bg + logo 替换）
- 接口对齐修复：修正 action 路径/请求体，DashboardData 和 CabinetItem 字段匹配后端
- 布局兼容性：grid → flex，提升移动浏览器兼容性
- 移除旧 H5 项目 software/h5/
205 lines
5.1 KiB
HTML
205 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<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;
|
||
}
|
||
.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">
|
||
<img class="logo" src="logo-1.png" 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"><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>
|