变更类型：全局卡片纵向间距与页面左右边距调整
| 序号 | 改动项 | 具体说明 |
|---|---|---|
| 01 | 卡片纵向间距统一调整 | 页面内卡片与卡片之间的纵向间距由 12px 统一调整为 8px。 |
| 02 | 页面左右边距统一调整 | 页面主内容区左右边距由 12px 统一调整为 8px，内容宽度随父容器自适应。 |
卡片纵向间距 12px · 页面左右边距 12px
卡片纵向间距 8px · 页面左右边距 8px
| 对照项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 卡片纵向间距 | 12px | 8px | 全局统一调整为 8px |
| 页面左右边距 | 12px | 8px | 主内容区左右统一调整为 8px |
变更类型：视觉资源替换 · 内容区间距调整 · 星级站背景替换
| 序号 | 改动项 | 具体说明 |
|---|---|---|
| 01 | 返回箭头全局替换 | 7.0 返回箭头切换为 8.0 新版箭头资源。 |
| 02 | 右侧三个 Icon 替换 | 右侧三个功能入口全部换为 8.0 新版资源。 |
| 03 | 内容区顶部间距调整 | 导航栏底部至首个内容模块的间距由 12px 调整为 8px。 |
| 04 | 星级站背景切图替换 | 星级站背景由 375 × 400px 旧资源替换为 375 × 375px JPG。 |
旧箭头
旧 Icon
旧 Icon
旧 Icon
红框表示本次需要替换的资源范围
新箭头
新 Icon
新 Icon
新 Icon
红框表示 8.0 新版替换资源
12
导航栏底部 → 首个内容模块：12px
8
导航栏底部 → 首个内容模块：8px
375
400
星级站bg · 375 × 400px
375
375
星级站bg · 375 × 375px · JPG
| 对照项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 左侧返回箭头 | 7.0 旧箭头资源 | 8.0 新箭头资源 | 替换切图 |
| 右侧三个 Icon | 7.0 旧版资源 | 8.0 新版资源 | 全部替换 |
| 导航栏与内容区间距 | 12px | 8px | 调整为 8px |
| 星级站背景切图 | 375 × 400px | 375 × 375px · JPG | 替换切图 |
变更类型：由屏幕通栏改为内容区卡片 · 组件内间距与右侧箭头调整
组件占满屏幕宽度，左右不保留页面边距。
组件填充内容区，页面左右各保留 8px，不再贴合屏幕两侧。
| 对照项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 组件承载范围 | 组件通栏，直接占满屏幕宽度 | 组件位于页面内容区内，不再贴合屏幕两侧 | 移入页面内容容器 |
| 页面左右间距 | 0px | 左右各 8px | 由页面内容区提供 8px 边距，组件宽度填充父容器，不写死 359px |
| 组件圆角 | 无圆角 | 8px | 新增 R8 圆角 |
| 组件水平内边距 | 16px | 8px | 调整为 8px |
| 内容元素间距 | 8px | 4px | 调整为 4px |
| 右侧箭头 | “箭头-下”切图，12 × 12px | “箭头(线)”切图，8 × 8px | 替换资源并调整为 8 × 8px |
变更类型：找桩指引容器透明度调整 · 容器位置调整
| 序号 | 改动项 | 具体说明 |
|---|---|---|
| 01 | 容器背景透明度调整 | 找桩指引容器背景由 #000000 40% 调整为 #000000 60%。 |
| 02 | 容器位置调整 | 由 right: 0px / top: 57px 调整为 right: 2px / top: 55px，新版等效 bottom: 8px。 |
right: 0px · top: 57px
right: 2px · top: 55px · bottom: 8px
| 对照项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 找桩指引背景 | #000000 40% | #000000 60% | 调整透明度 |
| 找桩指引位置 | right: 0px / top: 57px | right: 2px / top: 55px | 调整位置 |
变更类型：星级站横幅重构 · 地址上方信息重构 · 标签体系重构 · 地址与导航重构
| 序号 | 改动项 | 具体说明 |
|---|---|---|
| 01 | 横幅视觉样式重构 | 背景渐变、顶部圆角、边框及权益文字颜色全部按照 8.0 样式实现。 |
| 02 | 横幅结构重构 | 由 7.0 的绝对定位结构改为横向 Flex：左侧固定 Icon 区，右侧权益区占据剩余宽度。 |
| 03 | 高度与叠层关系调整 | 横幅高度由约 52px 调整为 56px；与下方基础信息卡片的重叠区域由 12px 调整为 20px。 |
| 04 | 左侧 Icon 区重构 | 由 97 × 34px 的绝对定位区域调整为 104 × 36px 固定区域。 |
| 05 | 右侧权益区重构 | 调整为 Flex: 1、高 36px、内边距 8px。 |
| 06 | 权益内容间距收紧 | 内部元素统一使用 4px 间距；分隔线高度与右侧箭头均调整为 8px。 |
上层横幅总高 56px；顶部内容行 36px；底部 20px 作为叠层衔接区
| 对照项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 横幅高度 | 约 52px | 56px | 调整为 56px |
| 布局方式 | 元素绝对定位 | 横向 Flex 布局 | 按 8.0 重构 |
| 顶部圆角 | 16px | 12px | 调整为 12px |
| 边框 | 1px #EDF8FF | 无 | 移除旧边框 |
| 背景渐变 | #2C2E31 → #333C4C → #50658E | #2A3542 → #2F3947 → #5A6A89 | 替换渐变 |
| 与下层重叠 | 12px | 20px | 调整为 20px |
| 左侧 Icon 区 | 97 × 34px，left 6px / top 3px | 104 × 36px 固定区域 | 重构固定区域 |
| 右侧权益区 | 152 × 37px，内边距 10px | Flex: 1 / H36 / P8 | 重构自适应区域 |
| 权益内容间距 | 文字组 6px，箭头间距 10px | 所有元素统一 4px | 统一为 4px |
| 分隔线 / 箭头 | 12px / 14px | 8px / 8px | 调整为 8px |
| 权益文字 | 12px 渐变文字 | 12px / #D9CAB8 | 调整文字颜色 |
评分与最近充电动态位于同一行
移除评分，仅保留最近充电动态
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 场站评分 | 展示评分及分隔线 | 不展示 | 删除评分结构 |
| 动态文案 | “1小时前有人成功充过电” | “几分钟前有人充过” | 调整文案逻辑 |
| 最近充电 Icon | 无 | 新增 12 × 12px Icon | 新增切图 |
| 文字样式 | 12px / #00ACE5 | 12px / #77849E | 调整文字颜色 |
旧版小喇叭切图与背景样式
新版小喇叭切图与背景样式
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 小喇叭 Icon | 7.0 旧版切图 | 8.0 新版切图，16 × 16px | 替换切图 |
| 背景样式 | 7.0 旧版背景 | Icon 背景 #FEDACE；横幅 #FEECE6 渐变至透明 | 按 8.0 更新色彩 |
| 内容间距 | Icon 与文字间距 5px | Icon 与文字间距 4px | 调整为 4px |
旧版限充与问号 Icon
新版限充与问号 Icon
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 限充 Icon | 7.0 旧版切图 | 8.0 新版切图，16 × 16px | 替换切图 |
| 问号 Icon | 7.0 旧版切图 | 8.0 新版切图，12 × 12px | 替换切图 |
| 背景样式 | 7.0 旧版背景 | Icon 背景 #DDE7F0；横幅 #EEF2F9 渐变至透明 | 按 8.0 更新色彩 |
| 文字颜色 | #6F7173 | #77849E | 调整文字颜色 |
| 内部间距 | 主要元素间距 5px | Icon 与内容 4px；文字与问号 2px | 按 8.0 重构间距 |
7 个标签 · 两行布局
4 个标签 · 单行布局
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 标签数量 | 示例 7 个，两行展示 | 示例 4 个，单行展示 | 具体保留及删除规则详见 PRD |
| 标签容器 | 0.5px #E4E5E7 描边、无填充 | #F2F5FA 填充、无描边 | 重构容器样式 |
| 文字样式 | 12px / #414345 | 12px / #77849E | 调整文字颜色 |
| 内边距 | 上下 2px / 左右 8px | 上下 2px / 左右 5px | 水平内边距调整为 5px |
| 辅助箭头 | 无 | 可交互标签增加 6 × 6px 实心箭头 | 按标签类型展示 |
站名间距 2px · 底部内边距 16px
站名间距 4px · 底部内边距 12px
| 间距项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 站名与最近充电动态间距 | 2px | 4px | 调整为 4px |
| 外层内边距 | 上、左、右 12px；下 16px | 四周 12px | 底部调整为 12px |
地图缩略图 + 两行地址信息 + 右侧独立导航
单行地址状态 · 12px 内容间距 · 组合导航按钮
上下左右 P8
两行地址状态 · 导航按钮保持垂直居中
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 附近电站入口 | 显示“查看附近其他电站”及右箭头 | 不展示 | 删除入口及相关交互 |
| 底部背景 | 7.0 旧版切图 | 8.0 新版切图 | 替换切图，随地址区域填充父容器 |
| 地址区高度 | 由旧版地图缩略图与内容结构撑开 | 不设置固定高度，随地址行数自适应 | 使用内容自适应高度 |
| 地址结构 | 地图缩略图 + 两行地址信息 + 独立导航 | 一至两行地址 + 组合导航按钮 | 按 8.0 重构布局 |
| 地图缩略图 | 左侧独立展示 56 × 56px 地图 | 不单独展示 | 移除独立地图缩略图 |
| 地址文字 | 12px / #141517 | 11px / #77849E，支持一至两行；超长内容在第二行省略 | 更新字号、颜色、换行及溢出规则 |
| 地址辅助箭头 | 用于附近电站入口，12 × 12px | 8 × 8px 线性箭头，跟随地址末行文字 | 替换 Icon 并跟随末行内容 |
| 导航方式 | 导航 Icon 与距离上下分离 | 导航 Icon 与距离横向放在同一按钮容器 | 重构为组合按钮 |
| 导航按钮 | 24 × 24px 圆形 Icon 容器 | 最小宽度 50px / P6 / 圆角 8px / #00ACE5 | 按新版按钮样式实现 |
| 导航内容 | Icon 与距离纵向排列 | 12 × 12px Icon；与距离间距 1px；距离 10px Semibold / 白色 | 调整 Icon、排布与文字样式 |
| 导航垂直对齐 | 按旧版独立区域定位 | 地址为单行或两行时均保持垂直居中 | 父容器使用垂直居中对齐 |
| 地址与导航间距 | 旧版独立布局 | 12px | 设置为 12px |
| 地址区内边距 | 按旧版切图与三栏结构定位 | 上、下、左、右均为 8px | 统一使用 Padding 8px |
变更类型：特色服务 Icon 全量重绘 · 右侧说明遮罩与样式重构
Icon 与文字间距 4px · 局部模糊遮罩
Icon 与文字间距 2px · 10px 横向渐变遮罩
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 特色服务 Icon | 7.0 旧版 Icon 切图 | 全部替换为 8.0 新版 Icon 切图 | 按服务类型替换完整 Frame 切图 |
| Icon Frame | 20 × 20px 外层容器，内部图形 16 × 16px | 完整 Frame 16 × 16px | 使用新版 16 × 16px 完整 Frame |
| Icon 与文字间距 | 4px | 2px | 调整为 2px |
| 服务文字 | 12px / #141517 | 12px / 行高 16px / #414345 | 调整文字颜色与行高 |
| 整体高度 | 44px | 40px | 调整为 40px |
| 整体布局 | 左侧服务列表固定定位，右侧说明区覆盖 | 横向 Flex：服务列表 Flex: 1，说明区固定在右侧 | 按 8.0 重构为自适应布局 |
| 右侧遮罩 | #A1B5C9 40% / Blur 4px，局部约 6.8 × 18px | 透明至白色的横向渐变，宽 10px、高度填满容器 | 替换为 10px 渐变遮罩 |
| “说明”文字 | 12px / #414345 | 12px / 行高 16px / #6F7173 | 调整为三级文字色 |
| “说明”箭头 | 12 × 12px 旧版箭头 | 8 × 8px 新版线性箭头 | 替换 Icon 并调整尺寸 |
| 说明区内边距 | 左 4px / 右 10px | 上下 12px / 左 6px / 右 12px | 按新版内边距实现 |
变更类型：终端类型标签切图 · 箭头切图与尺寸 · 内边距及网格间距调整
外层 P12
外层 Padding 12px · 网格 Gap 8px
外层 P8
外层 Padding 8px · 网格 Gap 6px
旧版箭头切图 · 14 × 14px
新版实心箭头切图 · 6 × 6px
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 终端类型标签 | 7.0 旧版标签切图 | 全部替换为 8.0 新版标签切图 | 按终端类型替换完整 Frame 切图 |
| 标签 Frame | 高 20px；短标签宽 32px，长标签宽 56px | 高 20px；短标签宽 32px，长标签宽 57px | 使用切图原始 Frame，不自行重绘文字 |
| 外层内边距 | 12px | 8px | 统一调整为 Padding 8px |
| 终端卡片网格间距 | 横向、纵向均为 8px | 横向、纵向均为 6px | 统一调整为 Gap 6px |
| 箭头切图与尺寸 | 7.0 旧版箭头，14 × 14px | 8.0 新版实心箭头，6 × 6px | 替换切图并调整为 6 × 6px |
| 箭头位置 | 双列卡片中独立位于右上区域 | 统一跟随功率文案显示 | 调整到功率文案末尾 |
| 功率与箭头间距 | 通栏卡片为 4px；双列卡片非相邻布局 | 通栏卡片 2px；双列卡片 1px | 按卡片类型设置间距 |
| 空闲数量分母 | 12px / #141517 | 12px / #141517 40% | 降低分母及分隔符颜色层级 |
| 功率文字行高 | 14px | 16px | 调整为 16px |
变更类型：顶部圆角收紧 · 删除评论 Tab · 等分布局重构 · 背景渐变调整
外层渐变：#FFFFFF 0% → #F4F6F8 4.235%
Tab 内渐变：#FFFFFF 0% → #F4F6F8 100%
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 顶部圆角 | 左上、右上 R24 | 左上、右上 R16 | 调整为 16px |
| Tab 数量 | 价格、终端、电站、评论、周边，共 5 项 | 价格、终端、电站、周边，共 4 项 | 删除“评论”Tab |
| 组件承载层级 | 圆角与渐变位于页面外层容器，Tab 菜单位于其内部 | Tab 使用独立容器并填充父级，圆角与渐变直接作用于 Tab | 按 8.0 组件层级重构 |
| 水平内边距 | 左右 12px | 左右 20px | 调整为 20px |
| Tab 排列方式 | 每项固定宽 40px，相邻间距 12px，整体居中 | 4 项使用 Flex: 1 等分可用宽度，不设置固定项宽 | 改为四等分自适应布局 |
| 背景渐变 | 页面外层：#FFFFFF 0% → #F4F6F8 4.235% | Tab 容器：#FFFFFF 0% → #F4F6F8 100% | 渐变改为覆盖完整 Tab 高度 |
变更类型：总卡片拆分 · 子模块从嵌套结构调整为页面同级结构
所有业务块均嵌套在“价格信息”父卡片内部，由父卡片统一承载。
取消“价格信息”总卡片，各业务块进入页面内容流并作为同级独立卡片排列。
超时占用费同样脱离充电价格，当前新版示例中不再位于该容器内。
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 外层结构 | 使用一个“价格信息”父卡片统一包裹全部内容 | 取消总父卡片，各业务模块直接进入页面内容流 | 删除总卡片嵌套层级 |
| 充电价格职责 | 价格卡片同时承载价格及其他关联业务入口 | 充电价格卡片只承载充电价格相关内容 | 收敛充电价格组件职责 |
| 卡券 / 套餐 | 作为价格信息卡片的内部子节点 | 抽出为页面同级独立卡片 | 移出充电价格容器 |
| 停车参考价 / 充电爱车 | 作为价格信息卡片的内部子节点 | 抽出为页面同级独立卡片 | 移出充电价格容器 |
| 超时占用费 | 作为价格信息卡片的内部子节点 | 不再隶属于充电价格模块 | 移至对应独立模块承载 |
| 模块间距层级 | 由价格信息父卡片的内部布局控制 | 由页面内容流统一控制同级卡片间距 | 改为页面级同级布局 |
变更类型：卡片 UI 重构 · 停车说明由不限行改为最多两行
停车说明完整展示，有几行显示几行；说明区及外层容器随内容同步增高。
停车说明最多展示两行，超出内容隐藏。
| 改动项 | 7.0 | 8.0 | 开发处理 |
|---|---|---|---|
| 卡片样式 | 灰色背景，圆角 8px | 白色独立卡片，圆角 12px | 背景与圆角按 8.0 重构 |
| 标题字号 | 13px / Semibold | 15px / Semibold | 标题字号调整为 15px |
| 停车 Icon | 使用 7.0 停车参考价 Icon | 替换为 8.0 新版停车 Icon，14×14px | 直接替换新版切图 |
| 右侧箭头 | 无右侧箭头 | 新增 8×8px 线性箭头 | 使用 8.0 箭头切图及尺寸 |
| 说明文案展示 | 不限制行数，有几行显示几行，容器随内容增高 | 最多展示两行，超出部分隐藏 | 与终端文案规则保持一致，使用两行截断 |