68 lines
3.9 KiB
HTML
68 lines
3.9 KiB
HTML
<h2>游客端迁移范围确认</h2>
|
||
<p class="subtitle">原型中的游客端不只有截图首页，还串联了商品、预订、订单、退款和凭证。请选择这次要落地的交互深度。</p>
|
||
|
||
<div class="cards">
|
||
<div class="card" data-choice="full-client-flow" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="padding:18px;background:linear-gradient(145deg,#052e2b,#0f766e);color:white">
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;font-weight:700">
|
||
<span style="padding:8px 12px;background:#fff;color:#064e3b;border-radius:999px">景区首页</span>
|
||
<span>→</span>
|
||
<span style="padding:8px 12px;background:#ffffff20;border-radius:999px">商品详情</span>
|
||
<span>→</span>
|
||
<span style="padding:8px 12px;background:#ffffff20;border-radius:999px">预订选择</span>
|
||
<span>→</span>
|
||
<span style="padding:8px 12px;background:#ffffff20;border-radius:999px">填写游客</span>
|
||
<span>→</span>
|
||
<span style="padding:8px 12px;background:#fb923c;border-radius:999px">支付结果</span>
|
||
</div>
|
||
<div style="height:18px;border-left:2px dashed #ffffff80;margin-left:30px"></div>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;font-weight:700">
|
||
<span style="padding:8px 12px;background:#ffffff20;border-radius:999px">我的订单</span>
|
||
<span>→</span>
|
||
<span style="padding:8px 12px;background:#ffffff20;border-radius:999px">订单详情</span>
|
||
<span>→</span>
|
||
<span style="padding:8px 12px;background:#ffffff20;border-radius:999px">我的凭证</span>
|
||
<span style="opacity:.65">／</span>
|
||
<span style="padding:8px 12px;background:#ffffff20;border-radius:999px">申请退款</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>A · 完整游客端链路（推荐）</h3>
|
||
<p>迁移所有游客可点击进入的状态页，用本地默认数据模拟下单、支付、订单、退款与凭证。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="purchase-flow" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="padding:18px;background:#eff6ff">
|
||
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center;font-size:12px;color:#1e3a8a">
|
||
<div style="padding:14px 6px;background:#fff;border-radius:12px">首页</div>
|
||
<div style="padding:14px 6px;background:#fff;border-radius:12px">详情</div>
|
||
<div style="padding:14px 6px;background:#fff;border-radius:12px">日期</div>
|
||
<div style="padding:14px 6px;background:#fff;border-radius:12px">游客</div>
|
||
<div style="padding:14px 6px;background:#dbeafe;border-radius:12px">支付</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>B · 仅购买链路</h3>
|
||
<p>做到支付完成；不实现我的订单、订单详情、退款和凭证页面。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="browse-only" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="padding:18px;background:#fff7ed">
|
||
<div style="display:flex;gap:12px;align-items:stretch">
|
||
<img src="https://one-feel-bucket.oss-cn-guangzhou.aliyuncs.com/oneFeel/2082673896938569729.jpg" style="width:42%;height:112px;object-fit:cover;border-radius:14px">
|
||
<div style="flex:1;background:white;border-radius:14px;padding:14px">
|
||
<div style="font-weight:800;color:#172033">成人门票＋观光车</div>
|
||
<div style="margin-top:12px;color:#2563eb;font-size:12px">官方 可订明日 随时退</div>
|
||
<div style="margin-top:18px;color:#ea580c;font-size:22px;font-weight:900">¥160</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>C · 仅浏览展示</h3>
|
||
<p>只迁移截图首页和商品详情，选购按钮不继续进入预订流程。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|