前端模板：智能电动车APP控制界面UI模板

一屏展示智能电助力单车的核心控制与状态反馈：地图切换、解锁按钮、车辆信息、设置/上报/个人中心弹窗，界面已中文化且交互可直接体验，适合用作移动端控车或 IoT 演示首屏。

亮点卖点

• 真实交互：地图开关、锁/解锁切换、菜单/设置/上报/个人中心均有弹窗与状态提示，不是静态稿。
• 信息面板：车辆信息弹窗展示电量、续航、温度、功率与行程/积分等列表，右箭头有实际内容承载。
• 状态持久化：地图开关、锁定状态、城市/车型写入 localStorage，刷新后仍保持。
• 轻量依赖：基于 jQuery，纯前端直接打开即可预览，无需构建。
• 品牌可换：整体配色黑灰 + 绿色主色，便于替换为你的品牌色与 Logo。

设计风格

• 深色背景配荧光绿主按钮，凸显科技感与能源属性。
• 圆角卡片 + 内阴影按钮，模拟实体按键质感。
• 弹窗采用半透明遮罩、图标列表与数据 Chip，信息层级清晰。

适用场景

• 共享单车/电助力单车/滑板车的控车或状态展示 Demo。
• IoT 设备管理界面、智慧出行/车联网产品的原型展示。
• 移动端着陆页首屏互动、产品评审或快速提案演示。

使用方式

1. 直接打开 index.html 预览交互；保持本地文件结构不变。
2. 替换图片：将 imgs/logo.png、imgs/1.png 换成你的品牌与车辆图。
3. 修改文案/数据：在 js/custom.js 的 defaults/modalData 中调整城市、车型、文案与提示。
4. 调整配色：在 css/custom.css 的 :root 修改 --app-bg-color、--app-primary-color 即可换肤。

文件结构

• index.html：页面骨架与按钮/弹窗容器。
• css/custom.css：布局、配色、弹窗与按钮样式。
• js/custom.js：交互逻辑、状态持久化、弹窗数据。
• js/jquery.min.js：jQuery 依赖。
• imgs/：Logo 与车辆示意图。
• css/bootstrap.min.css / css/font-awesome.min.css：基础栅格与图标。

自定义提示

• 想增加新的菜单项或数据字段，在 modalData 中新增条目；车辆信息卡片可在 createChip 调用处扩展。
• 需要对接真实接口时，可在 loadState/saveState 旁引入异步请求，或将 defaults 替换为接口数据。
• 若要移除 jQuery，可用原生事件重写同名函数，逻辑保持不变。