feat(首页): 孕期盲盒横幅 + 盲盒页(开盒动画/翻卡/卡册/概率公示)+「此刻,孕妈们在做什么」卡 (v26100101)
- 横幅:顶部大图下方,按 /blindbox 状态切换文案(可开 / 补开 / 下周倒计时 / 填预产期引导),礼盒晃动 + 扫光 - 盲盒页:开盒舞台(光芒旋转、礼盒悬浮,开启时越晃越烈→盖子飞起→白光+彩纸→3D 翻卡),闪卡镭射光; 卡册按孕早/中/晚期分组,补发标「补」,错过的周可补开;规则与概率说明由接口下发 - 此刻卡:大数字进入视口时数上去、每分钟平滑刷新;今日三项可点进工具;匿名动态每 3 秒上翻 - 新增 14 张周卡插画(其余孕周先用本周水果占位) - AGENTS.md §4.12 登记模拟数据例外(决策人/日期/期限 2026-12-31) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
91
index.html
91
index.html
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26093025 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26100101 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<link rel="stylesheet" href="mama-box.css">
|
||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
||||
@@ -182,6 +182,19 @@
|
||||
宫格右下角那张 .mini-card.more 是**内容**位(顺带把第三列剩下的
|
||||
44px 填平,而且是个够手指点的大靶子)。两个都指向 data-sheet="open",
|
||||
删掉任意一个另一个都还走得通。 -->
|
||||
<!-- 孕期盲盒 · 首页细横幅(2026-10-01,需求文档 v1.0 三-7)。
|
||||
放在顶部大图正下方(需求:顶部大图 → 盲盒横幅 → 孕育工具 → 此刻 → 消消乐)。
|
||||
文案/状态全由 app.js renderBanner() 按 /blindbox 返回写入;访客态(无 openid)、孕 4 周前、接口失败 → 保持 .hide。
|
||||
⚠️ 它是 #homeBody 的第一个孩子,吃的是 .home-body>:first-child 那条上间距;
|
||||
隐藏时由 CSS「.bb-banner.hide + .tool-dock」把间距还给工具托盘。 -->
|
||||
<button class="bb-banner hide" id="bbBanner" type="button">
|
||||
<span class="bb-gift" id="bbGift" aria-hidden="true"></span>
|
||||
<span class="bb-badge hide" id="bbBadge" aria-hidden="true"></span>
|
||||
<span class="bb-txt"><b class="bb-t" id="bbTitle"></b><span class="bb-s" id="bbSub"></span></span>
|
||||
<span class="bb-cta" id="bbCta"></span>
|
||||
<i class="bb-shine" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<section class="tool-dock">
|
||||
<!-- 大字水印。aria-hidden:读屏念到这块该直接进标题,
|
||||
不该先听见两声「妈妈」。样式和理由都在 css/style.css 的 .wm 上。 -->
|
||||
@@ -274,6 +287,24 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 此刻,孕妈们在做什么(2026-10-01,需求文档 v1.0 第二节)。纯展示,所有人看到同一份。
|
||||
数据 GET /api/mp/public/mama-box/pulse(box_app 按后台 pulseMode 给模拟 / 真实 / 关闭),渲染在 app.js pulseCard()。
|
||||
⚠️ 模拟数据是产品负责人 2026-10-01 拍板的例外(AGENTS.md §4.12),只限这张卡。
|
||||
show=false 或接口失败 → 整块保持 .hide。 -->
|
||||
<section class="pulse hide" id="pulse" aria-label="此刻,孕妈们在做什么">
|
||||
<span class="pl-orb o1" aria-hidden="true"></span><span class="pl-orb o2" aria-hidden="true"></span>
|
||||
<div class="pl-head">
|
||||
<span class="pl-live"><i></i>此刻</span>
|
||||
<h2 class="pl-title">孕妈们在做什么</h2>
|
||||
</div>
|
||||
<div class="pl-total hide" id="plTotal">
|
||||
<span class="pl-avs" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
|
||||
<span class="pl-tt"><span id="plPre"></span><b id="plNum">0</b><span id="plSuf"></span></span>
|
||||
</div>
|
||||
<div class="pl-today hide" id="plToday"></div>
|
||||
<div class="pl-feed hide" id="plFeed"><div class="pl-track" id="plTrack"></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 宝宝消消乐 · 推广入口(2026-09-30)。用户原话:「做了一个消消乐小游戏(待产清单主题),
|
||||
放到首页展示并推广,宝妈们业余时间玩,名字叫宝宝消消乐」。
|
||||
放在工具托盘正下方:首屏滑一下就能看到。右侧 3×3 小棋盘是纯装饰动画
|
||||
@@ -1412,6 +1443,64 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= 孕期盲盒(2026-10-01,需求文档 v1.0 第三节) =================
|
||||
上半是「开盒舞台」,下半是卡册(按孕早/中/晚期分三组)+ 规则与概率说明(合规:公示每档概率)。
|
||||
.bx-reveal 是开盒后的翻卡层,盖在本页之上。全部渲染在 app.js 的 blindBox 段。 -->
|
||||
<section class="detail bx" id="detailBox">
|
||||
<div class="detail-bar">
|
||||
<button class="dt-back" data-detail="close">‹</button>
|
||||
<span class="dt-title">孕期盲盒</span>
|
||||
<button class="dt-plain bx-rule-btn" id="bxRuleBtn" type="button">规则</button>
|
||||
</div>
|
||||
<div class="detail-body bx-body">
|
||||
<div class="bx-stage" id="bxStage">
|
||||
<span class="bx-rays" aria-hidden="true"></span>
|
||||
<span class="bx-sp s1" aria-hidden="true">✦</span><span class="bx-sp s2" aria-hidden="true">✦</span><span class="bx-sp s3" aria-hidden="true">✦</span><span class="bx-sp s4" aria-hidden="true">✦</span>
|
||||
<div class="bx-week" id="bxWeek"></div>
|
||||
<div class="bx-hint" id="bxHint"></div>
|
||||
<button class="bx-box" id="bxBox" type="button" aria-label="开启盲盒"></button>
|
||||
<button class="bx-mini hide" id="bxMini" type="button" aria-label="查看这张宝宝卡"></button>
|
||||
<span class="bx-shadow" aria-hidden="true"></span>
|
||||
<button class="bx-open" id="bxOpen" type="button"></button>
|
||||
<div class="bx-misc" id="bxMisc"></div>
|
||||
</div>
|
||||
<div class="bx-pend hide" id="bxPend">
|
||||
<div class="bx-pend-t">还有 <b id="bxPendN"></b> 个盲盒等你打开 <em>错过的周会一直保留到孕 40 周</em></div>
|
||||
<div class="bx-chips" id="bxChips"></div>
|
||||
</div>
|
||||
<section class="bx-album">
|
||||
<div class="bx-ah">
|
||||
<h3>我的宝宝卡册</h3>
|
||||
<span class="bx-cnt"><b id="bxGot">0</b>/<span id="bxAll">37</span></span>
|
||||
</div>
|
||||
<div class="bx-prog"><i id="bxBar"></i></div>
|
||||
<p class="bx-anote" id="bxAnote"></p>
|
||||
<div id="bxGroups"></div>
|
||||
</section>
|
||||
<details class="bx-rules" id="bxRules">
|
||||
<summary>规则与概率说明</summary>
|
||||
<div class="bx-rules-b" id="bxRulesBody"></div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="bx-reveal" id="bxReveal" aria-hidden="true">
|
||||
<span class="bx-glow" aria-hidden="true"></span>
|
||||
<span class="bx-flash" aria-hidden="true"></span>
|
||||
<div class="bx-confetti" id="bxConfetti" aria-hidden="true"></div>
|
||||
<div class="bx-rv-in">
|
||||
<div class="bx-tag" id="bxTag"></div>
|
||||
<div class="bx-persp">
|
||||
<div class="bx-card3d" id="bxCard3d">
|
||||
<div class="bx-face bx-back" id="bxBack"></div>
|
||||
<div class="bx-face bx-front" id="bxFront"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="bx-dev" id="bxDev"></p>
|
||||
<div class="bx-reward" id="bxReward"></div>
|
||||
<button class="bx-keep" id="bxKeep" type="button"></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= 记一下 底部弹层 ================= -->
|
||||
<div class="scrim" id="scrim"></div>
|
||||
<section class="sheet" id="sheet">
|
||||
|
||||
Reference in New Issue
Block a user