案例：商品详情与结算

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

整页演示

商品详情 · 转化闭环

视觉区 + 价格决策行 + 规格芯片 + 数量步进器 + 服务承诺 + 吸底操作栏；立即购买打开结算动作面板，面板内选支付方式并提交。

9:41

商品详情

限时 8 折

¥ 199¥ 249已售 1.2 万

Evoke 轻量通勤双肩包

防泼水面料 · 16L 容量 · 15.6 寸笔电仓，为通勤与短途出行设计。

颜色

雾蓝月白炭黑

尺码

SMLXL

数量1

正品保障48 小时送达七天无理由

²

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

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

搭建清单

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