|
|
@@ -0,0 +1,80 @@
|
|
|
+<h2>5 项分享功能改造 — 整体地图</h2>
|
|
|
+<p class="subtitle">先看全局，再逐项细化。下面 5 个位置对应你的 5 条需求</p>
|
|
|
+
|
|
|
+<div class="options">
|
|
|
+ <div class="option" data-choice="1">
|
|
|
+ <div class="letter">1</div>
|
|
|
+ <div class="content">
|
|
|
+ <h3>商品详情 · 增加分享海报</h3>
|
|
|
+ <p>当前无任何分享功能（pages/discover-detail/product-detail）</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="option" data-choice="2">
|
|
|
+ <div class="letter">2</div>
|
|
|
+ <div class="content">
|
|
|
+ <h3>文章详情 · 改用微信原生分享 + 邀请码</h3>
|
|
|
+ <p>当前有两个按钮：分享(微信原生) + 海报(canvas)</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="option" data-choice="3">
|
|
|
+ <div class="letter">3</div>
|
|
|
+ <div class="content">
|
|
|
+ <h3>文章海报弹窗 · 重新设计</h3>
|
|
|
+ <p>当前：全屏遮罩 + 保存/取消；目标：不覆盖全屏、可点周边关闭、带简介+邀请语、重新配色</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="option" data-choice="4">
|
|
|
+ <div class="letter">4</div>
|
|
|
+ <div class="content">
|
|
|
+ <h3>家庭邀请卡海报 · 缩小 + 加文案</h3>
|
|
|
+ <p>当前 500x750 canvas，"XXX邀请你来XXX家"（需家庭名）</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="option" data-choice="5">
|
|
|
+ <div class="letter">5</div>
|
|
|
+ <div class="content">
|
|
|
+ <h3>财富中心 · 分享给好友</h3>
|
|
|
+ <p>当前已有 onShareAppMessage（原生转发），需确认入口/形式</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="section">
|
|
|
+ <h3>现有海报长这样（作为对比基线）</h3>
|
|
|
+ <div class="split">
|
|
|
+ <div class="mockup">
|
|
|
+ <div class="mockup-header">家庭邀请卡 SharePoster 500x750</div>
|
|
|
+ <div class="mockup-body" style="text-align:center;padding:16px">
|
|
|
+ <div style="display:inline-block;width:220px;height:330px;border-radius:8px;background:linear-gradient(180deg,#F97316,#EA580C,#D94F0A);position:relative;color:#fff;font-size:11px">
|
|
|
+ <div style="padding-top:10px">浠艾福</div>
|
|
|
+ <div style="opacity:.8;font-size:9px">给全家的一站式幸福提案</div>
|
|
|
+ <div style="background:#FFFCF5;border-radius:8px;margin:26px 10px 0;padding:14px 0;color:#1C1917">
|
|
|
+ <div style="width:56px;height:56px;border-radius:50%;background:#FDE68A;margin:0 auto 6px;display:flex;align-items:center;justify-content:center">👤</div>
|
|
|
+ <div style="font-size:12px">昵称</div>
|
|
|
+ <div style="color:#A8A29E;font-size:9px;margin-top:6px">我的邀请码</div>
|
|
|
+ <div style="color:#F97316;font-size:20px;font-weight:700">ABC123</div>
|
|
|
+ <div style="color:#D6D3D1;font-size:8px;margin-top:8px">长按识别二维码 · 一起加入浠艾福</div>
|
|
|
+ <div style="width:80px;height:80px;background:repeating-conic-gradient(#1C1917 0 25%,#fff 0 50%) 50%/16px 16px;border-radius:6px;margin:8px auto 0"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mockup">
|
|
|
+ <div class="mockup-header">文章海报 ContentSharePoster 500x800</div>
|
|
|
+ <div class="mockup-body" style="text-align:center;padding:16px">
|
|
|
+ <div style="display:inline-block;width:220px;height:352px;border-radius:8px;background:linear-gradient(180deg,#F97316,#EA580C,#D94F0A);position:relative;color:#fff;font-size:11px">
|
|
|
+ <div style="padding-top:10px">浠艾福</div>
|
|
|
+ <div style="opacity:.8;font-size:9px">给全家的一站式幸福提案</div>
|
|
|
+ <div style="background:#FFFCF5;border-radius:8px;margin:26px 10px 0;padding:10px;color:#1C1917;text-align:left">
|
|
|
+ <div style="background:#FEF3C7;border-radius:6px;height:80px;display:flex;align-items:center;justify-content:center;color:#F97316;font-size:10px">封面图</div>
|
|
|
+ <div style="color:#F97316;font-size:9px;margin-top:8px">好文推荐</div>
|
|
|
+ <div style="font-size:11px;margin-top:4px">文章标题标题标题…</div>
|
|
|
+ <div style="color:#A8A29E;font-size:8px;text-align:center;margin-top:10px">长按识别二维码 · 查看详情</div>
|
|
|
+ <div style="width:70px;height:70px;background:repeating-conic-gradient(#1C1917 0 25%,#fff 0 50%) 50%/14px 14px;border-radius:6px;margin:8px auto 0"></div>
|
|
|
+ <div style="color:#F97316;font-size:11px;text-align:center;margin-top:8px">扫码查看详情</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
iwt