feat(首页): 新增「孕期小知识」和「妈妈的树洞」两个模块 (v26093013)
孕期小知识(工具区下方): - 按真实孕周 + 天数显示「今日小知识」大卡,右上角本周水果 emoji 缓慢浮动; 底部 7 个圆点 = 本周第 1–7 天,今天高亮呼吸、以前可回看、以后锁着(明天见)。 - 四张马卡龙小卡:宝宝这周(带大小比喻)/ 妈妈身体 / 吃点什么 / 这周留心,进入视口依次浮上来。 - 内容 assets/data/preg-tips.json:孕 4–40 周,每周 4 句 + 每天 1 条,共 259 条,按需 fetch。 - 只在 /pregnancy 确认真实孕周后显示(pregEmpty === false 且非产后),不拿默认孕周配内容。 妈妈的树洞(今日脚印下方): - 心事只存本机 localStorage(mmbox.treehole.v1,最多 200 条),不上传;按用户选定不做回应, 只有纸团飞进树洞 + 树冠晃动 + 「已收好」动画;可展开「我的心事」回看、删除。 - 出现明显轻生字眼时,在「已收好」下加一行 12356 心理援助热线(兜底);卡底常驻一行求助提示。 动效在 prefers-reduced-motion 下关闭。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
75
index.html
75
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:26093012 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26093013 缓存版本标记:改 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,37 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 孕期小知识(2026-09-30)。用户原话:「按她填写的孕周,比如孕 20 周 5 天,给她列出几个小模块,
|
||||
设计一定要漂亮、匹配母婴用户,最好是动态的;小知识匹配每周的每一天」。
|
||||
内容:assets/data/preg-tips.json(孕 4–40 周,每周 宝宝/妈妈/饮食/注意 四句 + 每天一条小知识,共 7 条),
|
||||
首次需要时才 fetch,不进首屏。渲染在 app.js renderTips()。
|
||||
⚠️ 默认 .hide:只有拿到**真实孕周**(state.pregEmpty === false 且非产后)才显示,
|
||||
内置默认孕周(DEFAULT_DUE 推出来的 27 周上下)是假的,不能拿它配知识。
|
||||
⚠️ 一周 7 个圆点 = 这一周的第 1–7 天。今天及以前可以点开回看;以后的几天锁着,
|
||||
写「明天见」—— 让每天回来看一条,而不是一口气翻完。 -->
|
||||
<section class="preg-tips hide" id="pregTips">
|
||||
<div class="pt-head">
|
||||
<h2 class="pt-title">孕期小知识</h2>
|
||||
<span class="pt-when" id="ptWhen"></span>
|
||||
</div>
|
||||
<div class="pt-today" id="ptToday">
|
||||
<span class="pt-float" id="ptFloat" aria-hidden="true"></span>
|
||||
<span class="pt-badge" id="ptBadge">今日小知识</span>
|
||||
<div class="pt-body" id="ptBody">
|
||||
<div class="pt-t" id="ptT"></div>
|
||||
<div class="pt-d" id="ptD"></div>
|
||||
</div>
|
||||
<div class="pt-days" id="ptDays" role="tablist" aria-label="本周每天的小知识"></div>
|
||||
</div>
|
||||
<div class="pt-grid" id="ptGrid">
|
||||
<div class="pt-card pc-baby"><span class="pt-ico" id="ptBabyIco" aria-hidden="true">👶</span><b>宝宝这周</b><p id="ptBaby"></p></div>
|
||||
<div class="pt-card pc-mom"><span class="pt-ico" aria-hidden="true">🤰</span><b>妈妈身体</b><p id="ptMom"></p></div>
|
||||
<div class="pt-card pc-eat"><span class="pt-ico" aria-hidden="true">🥗</span><b>吃点什么</b><p id="ptEat"></p></div>
|
||||
<div class="pt-card pc-care"><span class="pt-ico" aria-hidden="true">📋</span><b>这周留心</b><p id="ptCare"></p></div>
|
||||
</div>
|
||||
<p class="pt-foot">仅供参考,身体有任何不适请以医生意见为准</p>
|
||||
</section>
|
||||
|
||||
<!-- 模块二 · 今天的动线。
|
||||
上一版这里是两个各自独立的模块:「AI今日小结」一张渐变卡,
|
||||
下面「今日成长脚印」一张白卡装的时间轴。可 AI 那句话总结的
|
||||
@@ -397,6 +428,48 @@
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- 树洞(2026-09-30)。用户原话:「宝妈们有任何情绪上的问题,都可以在这个树洞里扔进去」。
|
||||
用户选定:**只存在她自己手机上**(localStorage 'mmbox.treehole.v1',不上传、后台也看不到),
|
||||
扔进去后**只有「已收好」的动画,不做回应**。
|
||||
⚠️ 唯一的例外是安全提示:内容里出现明显的轻生字眼时,收好之后在卡内显示一行援助热线
|
||||
(12356 全国心理援助热线),这不是「回应心事」,是兜底,别删。
|
||||
⚠️ 纸团飞进树洞的动画靠 Element.animate;不支持的老内核直接跳到「已收好」,不影响收存。 -->
|
||||
<section class="tree-hole" id="treeHole">
|
||||
<div class="th-head">
|
||||
<h2 class="th-title">妈妈的树洞</h2>
|
||||
<span class="th-lock"><svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M7 10V7.5a5 5 0 0 1 10 0V10" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><rect x="4.5" y="10" width="15" height="11" rx="3" fill="currentColor"/></svg>只存在你的手机里</span>
|
||||
</div>
|
||||
<div class="th-stage">
|
||||
<p class="th-lead">烦心、委屈、害怕、说不出口的话,<br>都可以扔进来。树洞替你收着,<br>谁也看不到。</p>
|
||||
<svg class="th-tree" id="thTree" viewBox="0 0 120 124" aria-hidden="true">
|
||||
<g class="th-crown">
|
||||
<circle cx="40" cy="42" r="26" fill="#BFE0B4"/>
|
||||
<circle cx="78" cy="38" r="28" fill="#A9D59E"/>
|
||||
<circle cx="60" cy="22" r="22" fill="#C9E7BF"/>
|
||||
<circle cx="94" cy="58" r="17" fill="#B4DBA9"/>
|
||||
<circle cx="26" cy="62" r="15" fill="#B4DBA9"/>
|
||||
<circle cx="46" cy="28" r="3.2" fill="#F7B8A6"/><circle cx="84" cy="24" r="2.8" fill="#F9C9B8"/>
|
||||
<circle cx="96" cy="50" r="2.6" fill="#F7B8A6"/><circle cx="30" cy="52" r="2.6" fill="#F9C9B8"/>
|
||||
<circle cx="66" cy="44" r="2.4" fill="#F7B8A6"/>
|
||||
</g>
|
||||
<path d="M50 124c3-18 3-34 1-52h20c-2 18-2 34 1 52z" fill="#D4A27C"/>
|
||||
<path d="M56 80c-6-6-14-8-20-7M66 80c5-6 12-8 18-7" stroke="#D4A27C" stroke-width="5" stroke-linecap="round" fill="none"/>
|
||||
<ellipse id="thHole" class="th-hole" cx="61" cy="98" rx="6.5" ry="9" fill="#7A5238"/>
|
||||
<ellipse cx="61" cy="99.5" rx="4" ry="6.2" fill="#5A3A26"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="th-form">
|
||||
<textarea id="thText" maxlength="500" rows="3" placeholder="今天想说点什么……"></textarea>
|
||||
<div class="th-row">
|
||||
<button class="th-mine" id="thMine" type="button">我的心事 <b id="thCount">0</b> ›</button>
|
||||
<button class="th-send" id="thSend" type="button">扔进树洞</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="th-done" id="thDone" aria-live="polite"></div>
|
||||
<ul class="th-list hide" id="thList"></ul>
|
||||
<p class="th-help">如果持续情绪低落、睡不好,或有伤害自己的念头,请告诉家人或医生,也可拨打心理援助热线 <a href="tel:12356">12356</a>。</p>
|
||||
</section>
|
||||
|
||||
<!-- 模块三 · 书架卡带。
|
||||
上一版是「一张横排大卡 + 下面两张小卡」的老三段,和上面两个模块
|
||||
一样都是往下堆。这里改成一条横向可滑的书架:三张等宽等高的**竖版**书
|
||||
|
||||
Reference in New Issue
Block a user