H5 商城 · 移动端体验
瀚选移动版完整演示：TabBar 底导、PullToRefresh 下拉刷新、SwipeAction 左滑删除、 ActionSheet 筛选、Picker 选规格、Fab 悬浮客服、SafeArea 安全区适配。 所有浮层约束在手机屏幕内，不跑出外壳。
猜你喜欢
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(230%2065%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2252%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚声 Air 主动降噪耳机
瀚声 HanSound
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(230%2064%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2246%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚本 X9 轻薄笔记本
瀚本 HanBook
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(230%2059%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2219%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚腕 Fit 运动手表
瀚腕 HanWatch
瀚拍 Pro 影像旗舰手机
瀚拍 HanPhone
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(46%2061%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2229%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚庐 自动炒菜料理机
瀚庐 HanHome
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(46%2065%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚庐 护眼立式落地灯
瀚庐 HanHome
瀚庐 A 类抗菌四季被
瀚庐 HanHome
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(350%2067%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2259%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚研 烟酰胺修护精华
瀚研 HanLab
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(350%2059%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2221%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚研 丝绒雾面口红
瀚研 HanLab
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(170%2068%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2263%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚野 速开露营帐篷
瀚野 HanField
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(170%2064%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2245%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚野 全地形越野跑鞋
瀚野 HanField
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(170%2062%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2236%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚野 保温运动水壶
瀚野 HanField
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(114%2068%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚味 每日坚果礼盒
瀚味 HanTaste
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(114%2066%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2257%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚味 精品挂耳咖啡
瀚味 HanTaste
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(286%2060%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2227%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚衣 三防冲锋衣
瀚衣 HanWear
%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(286%2067%25%2034%25)%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2214%22%20r%3D%2227%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2262%22%20cy%3D%2266%22%20r%3D%2216%22%20fill%3D%22rgba(0%2C0%2C0%2C0.08)%22%2F%3E%0A%20%20%3Crect%20x%3D%2229%22%20y%3D%2229%22%20width%3D%2222%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22rgba(255%2C255%2C255%2C0.22)%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E)
瀚衣 通勤双肩背包
瀚衣 HanWear
p-hs-air
曜石黑 · 降噪 Pro 版
¥899
p-ho-bottle
薄荷绿 · 900ml
¥119
瀚选用户
VIP 会员 · 积分 3,280
¥4,299
¥539
¥268
iPhone 16 Pro · 首页 / 分类 / 购物车 / 我的
Mobile 组件族覆盖清单
- IPhone设备外壳，children 填充屏幕
- SafeArea顶部刘海 + 底部横条适配
- TabBarfixed={false} 随文档流贴屏底
- PullToRefresh首页商品列表下拉刷新
- ActionSheet分类页筛选排序弹单
- Picker规格/颜色滚轮选择
- SwipeAction分类商品行 + 购物车行左滑操作
- Fab右下角悬浮客服 speed-dial
浮层定位方案：屏幕容器设 relative，
Fab 用 absolute 覆盖层，
TabBar 用 fixed={false}，
ActionSheet 基于 Base UI Dialog Portal 挂根节点不影响屏内布局。