feat(首页): 新增「宝宝消消乐」游戏推广入口 (v26093014)
- 工具托盘正下方一张糖果色大卡：「新游戏」角标 + 名字 + 玩法一句话 + 跳动的「开始玩」， 右侧 3×3 待产用品小棋盘循环演示三连消除，角上星星闪烁。 - 点击走 jumpApp() 跳 https://beian3.douba.top/myxx/index.html（游戏由「母婴消消」维护， 不需要身份参数，多带无害）；GAME_URL 为空时整块隐藏。 - 动效在 prefers-reduced-motion 下关闭；页面隐藏时棋盘动画暂停。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
20
index.html
20
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:26093013 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26093014 缓存版本标记：改 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 第四节） -->
|
||||
@@ -304,6 +304,24 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 宝宝消消乐 · 推广入口（2026-09-30）。用户原话：「做了一个消消乐小游戏（待产清单主题），
|
||||
放到首页展示并推广，宝妈们业余时间玩，名字叫宝宝消消乐」。
|
||||
放在工具托盘正下方：首屏滑一下就能看到。右侧 3×3 小棋盘是纯装饰动画
|
||||
（每隔几秒一行三个同样的待产用品闪一下「消掉」再换新），JS 在 app.js gamePromo()。
|
||||
游戏地址在 app.js 的 GAME_URL；为空时整块隐藏（.hide 默认）。点击走 jumpApp()，带身份跳转。 -->
|
||||
<section class="game-promo hide" id="gamePromo">
|
||||
<button class="gp-card ripple" id="gpCard" type="button" aria-label="开始玩宝宝消消乐">
|
||||
<span class="gp-new">新游戏</span>
|
||||
<span class="gp-text">
|
||||
<span class="gp-name">宝宝消消乐</span>
|
||||
<span class="gp-sub">奶瓶、尿不湿、小衣服……<br>三个一样就消掉，边玩边备齐待产包</span>
|
||||
<span class="gp-cta">开始玩 <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true"><path d="M8 5l8 7-8 7z" fill="currentColor"/></svg></span>
|
||||
</span>
|
||||
<span class="gp-board" id="gpBoard" aria-hidden="true"></span>
|
||||
<span class="gp-spark s1" aria-hidden="true">✦</span><span class="gp-spark s2" aria-hidden="true">✦</span><span class="gp-spark s3" aria-hidden="true">✦</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- 孕期小知识（2026-09-30）。用户原话：「按她填写的孕周，比如孕 20 周 5 天，给她列出几个小模块，
|
||||
设计一定要漂亮、匹配母婴用户，最好是动态的；小知识匹配每周的每一天」。
|
||||
内容：assets/data/preg-tips.json（孕 4–40 周，每周 宝宝/妈妈/饮食/注意 四句 + 每天一条小知识，共 7 条），
|
||||
|
||||
28
js/app.js
28
js/app.js
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26093013';
|
||||
var VER = '26093014';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -3109,6 +3109,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ================= 宝宝消消乐 · 推广入口（2026-09-30） =================
|
||||
GAME_URL 为空 → 入口不显示。小棋盘：每 2.6 秒随机一行/一列先亮一下，再「消掉」换一批新的掉下来。 */
|
||||
const GAME_URL = 'https://beian3.douba.top/myxx/index.html'; // 由「母婴消消」会话维护，部署在 47.120.70.60，不需要身份参数（多带无害）
|
||||
const GAME_ID = 'baobao-xiaoxiaole';
|
||||
(function gamePromo() {
|
||||
const sec = $('#gamePromo'), board = $('#gpBoard');
|
||||
if (!sec || !GAME_URL) return;
|
||||
sec.classList.remove('hide');
|
||||
$('#gpCard').addEventListener('click', () => jumpApp(GAME_URL, GAME_ID));
|
||||
const ITEMS = ['🍼', '🧸', '👶', '🧦', '🛁', '🧴', '👕', '🎀'];
|
||||
const rnd = () => ITEMS[Math.floor(Math.random() * ITEMS.length)];
|
||||
const cells = [];
|
||||
for (let i = 0; i < 9; i++) { const c = document.createElement('i'); c.textContent = rnd(); board.appendChild(c); cells.push(c); }
|
||||
if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
const LINES = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8]];
|
||||
setInterval(() => {
|
||||
if (document.hidden) return;
|
||||
const line = LINES[Math.floor(Math.random() * LINES.length)], e = rnd();
|
||||
line.forEach(k => { cells[k].textContent = e; cells[k].classList.add('is-hint'); });
|
||||
setTimeout(() => line.forEach(k => { cells[k].classList.remove('is-hint'); cells[k].classList.add('is-pop'); }), 700);
|
||||
setTimeout(() => line.forEach(k => {
|
||||
const c = cells[k]; c.textContent = rnd(); c.classList.remove('is-pop', 'is-in'); void c.offsetWidth; c.classList.add('is-in');
|
||||
}), 1100);
|
||||
}, 2600);
|
||||
})();
|
||||
|
||||
/* ================= 孕期小知识（2026-09-30） =================
|
||||
内容 assets/data/preg-tips.json：[{week, baby, mom, eat, care, days:[{t,d}×7]}]，孕 4–40 周。
|
||||
第几天 = state.day（0–6），和首页「孕 N 周 D 天」同一口径。
|
||||
|
||||
39
mama-box.css
39
mama-box.css
@@ -429,7 +429,7 @@ a.skip:focus{left:16px;top:16px}
|
||||
对齐的是内容，出血的是底色，这两件事要分开。
|
||||
⚠️ 三块的圆角、底色、左右内边距改成在这里一处定义。以后要调，改这一条，
|
||||
别再回到各自的规则里单独写，那正是上一稿乱掉的原因。 */
|
||||
.daily-check,.tool-dock,.preg-tips,.today-line,.tree-hole,.shelf{
|
||||
.daily-check,.tool-dock,.game-promo,.preg-tips,.today-line,.tree-hole,.shelf{
|
||||
margin:0 -26px;padding:16px 26px 18px;border-radius:26px;
|
||||
background-color:#fff;
|
||||
/* ⚠️ 这两条是一对，缺一不可，而且必须一起看：
|
||||
@@ -443,7 +443,7 @@ a.skip:focus{left:16px;top:16px}
|
||||
/* 块间距。给后两块，第一块的上间距另有规则（来信卡收放要用）。
|
||||
⚠️ 这是**块与块之间**的缝。某一块自己内部觉得挤，要调的是那块的 padding，
|
||||
不是这里 —— 改这里会把三块的关系一起改掉。 */
|
||||
.tool-dock,.preg-tips,.today-line,.tree-hole,.shelf{margin-top:16px}
|
||||
.tool-dock,.game-promo,.preg-tips,.today-line,.tree-hole,.shelf{margin-top:16px}
|
||||
|
||||
/* ===== 后两块的暖色渐变底（本批新增）=====
|
||||
用户原话：「在那个宝宝的今日脚印那块，稍微给背景它加一点渐变」
|
||||
@@ -566,6 +566,41 @@ a.skip:focus{left:16px;top:16px}
|
||||
.dc-tag.is-warn{color:var(--alert);background:#FDECE8}
|
||||
.dc-row .chev{flex:0 0 auto;font-size:16px;margin-left:-4px}
|
||||
|
||||
/* ============ 宝宝消消乐 · 推广入口（2026-09-30）============
|
||||
糖果色渐变大卡：左边名字 + 一句玩法 + 「开始玩」胶囊，右边 3×3 小棋盘循环演示「三连消除」，
|
||||
角上三颗星星闪烁。整张卡是一个按钮。动效在 prefers-reduced-motion 下关掉。 */
|
||||
.game-promo.hide{display:none}
|
||||
.gp-card{position:relative;display:flex;align-items:center;gap:10px;width:100%;overflow:hidden;
|
||||
border:0;border-radius:22px;padding:16px 14px 16px 18px;text-align:left;font:inherit;color:#fff;
|
||||
background:linear-gradient(125deg,#FF8FA3 0%,#FFB07C 55%,#FFD36E 100%);
|
||||
box-shadow:0 10px 24px rgba(255,130,120,.28)}
|
||||
.gp-card::before{content:"";position:absolute;left:-40px;bottom:-60px;width:160px;height:160px;border-radius:50%;
|
||||
background:rgba(255,255,255,.16)}
|
||||
.gp-card:active{transform:scale(.98)}
|
||||
.gp-new{position:absolute;left:0;top:0;font-size:10.5px;font-weight:800;color:#E4476A;background:#FFF3C4;
|
||||
border-radius:0 0 12px 0;padding:3px 10px 3px 12px;letter-spacing:.5px}
|
||||
.gp-text{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding-top:8px}
|
||||
.gp-name{font-size:21px;font-weight:900;letter-spacing:.5px;text-shadow:0 2px 0 rgba(214,86,86,.35)}
|
||||
.gp-sub{margin-top:5px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.95)}
|
||||
.gp-cta{margin-top:10px;display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:6px 14px;
|
||||
font-size:13px;font-weight:800;color:#E4476A;background:#fff;box-shadow:0 4px 10px rgba(200,70,70,.2);
|
||||
animation:gpBeat 2.2s ease-in-out infinite}
|
||||
@keyframes gpBeat{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.08)}90%{transform:scale(.97)}}
|
||||
.gp-board{position:relative;flex:0 0 auto;display:grid;grid-template-columns:repeat(3,30px);gap:4px;padding:6px;
|
||||
border-radius:14px;background:rgba(255,255,255,.35);transform:rotate(4deg)}
|
||||
.gp-board i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;
|
||||
font-style:normal;font-size:18px;line-height:1;box-shadow:0 2px 0 rgba(220,120,100,.25);
|
||||
transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s}
|
||||
.gp-board i.is-pop{transform:scale(1.3);opacity:0}
|
||||
.gp-board i.is-in{animation:gpDrop .45s cubic-bezier(.3,1.5,.5,1)}
|
||||
@keyframes gpDrop{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
|
||||
.gp-board i.is-hint{background:#FFF6D6;box-shadow:0 0 0 2px #FFD36E}
|
||||
.gp-spark{position:absolute;color:#fff;font-size:12px;animation:gpTw 1.8s ease-in-out infinite;opacity:0}
|
||||
.gp-spark.s1{right:12px;top:8px}.gp-spark.s2{right:120px;top:14px;animation-delay:.6s;font-size:9px}
|
||||
.gp-spark.s3{right:16px;bottom:10px;animation-delay:1.2s;font-size:10px}
|
||||
@keyframes gpTw{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
|
||||
@media (prefers-reduced-motion:reduce){.gp-cta,.gp-spark{animation:none}.gp-spark{opacity:.8}}
|
||||
|
||||
/* ============ 孕期小知识（2026-09-30）============
|
||||
外壳是公共白色通栏。里面三层：
|
||||
① .pt-today 今日小知识大卡：暖粉渐变 + 右上角一颗慢慢浮动的「宝宝大小」emoji（本周水果）；
|
||||
|
||||
Reference in New Issue
Block a user