---
url: /mobile/case-shop.md
---
# 案例：商品详情与结算

商详页是转化动线的起点：视觉说服（首图）→ 决策信息（价格、规格、服务）→
拇指收势处的双按钮。桌面电商页的「左图右信息 + 侧栏结算」在 375px 上重排为
**上下叙事流 + 吸底操作栏**，结算确认收进底部动作面板——本案例可交互走通
「选规格 → 立即购买 → 面板内确认支付方式 → 提交」完整闭环。

## 整页演示

## 拆解：桌面 → 移动做了什么

| 桌面版式 | 本案例的移动表达 |
| --- | --- |
| 左图右信息两栏 | 视觉区整宽置顶（16:9 级），信息纵向接续 |
| 规格侧栏 + 下拉框 | 芯片点选（`EvTag` solid 表选中），能点选不下拉 |
| 数量输入框 | 图标步进器：`minus / plus` 两端夹数值，下限 1 |
| 服务条款页脚 | 一行三个「图标 + 短语」承诺条，打消下单顾虑 |
| 侧栏结算按钮组 | 吸底操作栏：次级（加入购物袋）与主级（立即购买）并排 |
| 结算页跳转 | `EvActionSheet` 自定义内容：地址 + 支付方式单选 + 合计 + 提交，不离开当前页 |

## 搭建清单

1. 视觉区：真机放商品图（`aspect-ratio: 4 / 3`），促销角标用 `EvTag tone="lime"`，
   对应官网语境的「限量促销黄绿」。
2. 价格行：现价用危险色 + `--ev-display-weight` 大字重，划线原价紧随其后，
   销量等信息靠右侧弱化。
3. 规格芯片：`EvTag` 的 `variant` 在 `solid / outline` 间切换即选中态，无需自造组件。
4. 吸底操作栏：图标按钮（客服、收藏）用 `EvIconButton`，购物袋角标挂在收藏位
   示意库存动线；真机记得补 `env(safe-area-inset-bottom)`（见[安全区](/mobile/#视口与安全区)）。
5. 结算面板：`EvActionSheet` 默认插槽放自定义内容，支付方式选中态用单选圆点
   （`check` 图标反白）；提交后以 `EvAlert` 轻反馈收尾，不用阻塞弹窗。