今日脚印改版（撕页日历+小脚丫时间线+宝宝便签），消消乐卡压矮
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
103
index.html
103
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:26100138 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26100139 缓存版本标记：改 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 第四节） -->
|
||||
@@ -380,83 +380,36 @@
|
||||
⚠️ .steps 仍是整卡可点的 role="button"，里面**不能**再出现 <button>。
|
||||
所以「查看全部 ›」挂在 .tl-head 上、AI 气泡是 .steps 的兄弟节点，
|
||||
两者都在 .steps 外面。 -->
|
||||
<section class="today-line">
|
||||
<div class="tl-head">
|
||||
<span class="tl-h-when">今天</span>
|
||||
<span class="tl-h-dot"></span>
|
||||
<h2 class="tl-h-title" id="tlTitle">宝宝的今日脚印</h2>
|
||||
<button class="tl-h-all" data-goto="archive">查看全部 ›</button>
|
||||
<!-- 今日脚印 2026-10-01 改版（用户：「对标其他模块，UI 要漂亮一些，内容文字也要有创意」）：
|
||||
· 头部左边一张撕页日历（日 / 月·周几），右边标题 + 一句小诗；
|
||||
· 每条记录前的圆点换成**一左一右交替的小脚丫**，沿虚线往下走 —— 「脚印」两个字画出来；
|
||||
· 每条记录是一张小卡：大字内容（数字加粗上色）+ 时间 + 来源小标签；
|
||||
· 没记录时（guide）是一行脚丫插画 + 接口给的引导语（童趣字体）+ 带 logo 的应用芯片；
|
||||
· AI 小结做成「宝宝写给妈妈的一张便签」：信纸横线 + 宝宝口吻 + 落款小名。
|
||||
⚠️ 「AI」角标必须保留（唯一的机器生成提示，见 syncBabyWords 那段注释）。
|
||||
JS 依赖的 id / class（.today-line / #tlSteps / .step 系列 / #tlGuide* / .ai-bubble / .ab-say / #abTag / #tlTitle）都沿用。 -->
|
||||
<section class="today-line fp2">
|
||||
<div class="fp-head">
|
||||
<div class="fp-cal" aria-hidden="true"><i class="fc-ring"></i><b id="fpCalD">--</b><span id="fpCalM">--</span></div>
|
||||
<div class="fp-ht">
|
||||
<h2 class="tl-h-title" id="tlTitle">宝宝的今日脚印</h2>
|
||||
<p class="fp-poem">你记下的每一笔，都是它长大的样子</p>
|
||||
</div>
|
||||
<button class="fp-all" data-goto="archive">全部<i>›</i></button>
|
||||
</div>
|
||||
<!-- 这句是首页 slogan 挪走之后接手的那一句（用户点名要放这儿）。
|
||||
⚠️ 全站现在只有这一处写着「把每次记录变成孩子一生的记忆」，
|
||||
顶上 slogan 已经换成「每次记录都是一生记忆」了，别再抄回去 ——
|
||||
两处贴着同一句话，等于把这句说废了。 -->
|
||||
<p class="tl-h-note">把每次记录变成孩子一生的记忆</p>
|
||||
<!-- 整张卡都能点。上面那颗「查看全部 ›」正好当成「这张能点」的提示
|
||||
（整卡可点最大的毛病就是看不出来能点）。 -->
|
||||
<!-- ⚠️ aria-label 里也有小名，所以它跟 #tlTitle 一起交给 syncBabyWords()
|
||||
刷。标题跟着小名走、读屏却一直念旧名字，是最难被发现的那种不同步 ——
|
||||
眼睛看不见它。 -->
|
||||
<!-- ⚠️ 这里原来躺着 4 条**写死的演示行**（胎动 12 次 / 体重 58.2kg / 产检提醒 / 睡前散步）。
|
||||
它们只在「接口读不到」时露出来 —— 也就是说，上游一抖动，页面就开始编数据。
|
||||
2026-09-22 按产品口径删掉，换成一条中性占位；四种显示模式由下方 JS 的 fpApply() 决定：
|
||||
· 有档案 + 拿到事件 → 渲染真实事件（覆盖 #tlSteps）
|
||||
· 有档案 + 今天没记 → 「还没有足迹」
|
||||
· 有档案 + 接口读不到 → **整块不显示**（不编数据）
|
||||
· 无档案（上游查无此人）→ 显示 #tlGuide 引导占位
|
||||
首次渲染时 `#tlSteps` 里是这条「正在获取…」，不是假数据；
|
||||
JS 的 pendingFootprintStep() 会建一份**同构**的行，两处改文案要一起改。 -->
|
||||
<div class="steps ripple" id="tlSteps" data-goto="archive" role="button" tabindex="0"
|
||||
aria-label="宝宝的今日脚印，查看完整档案">
|
||||
<div class="steps fp-steps ripple" id="tlSteps" data-goto="archive" role="button" tabindex="0" aria-label="宝宝的今日脚印，查看完整档案">
|
||||
<div class="step"><span class="st-time">今天</span><span class="st-dot"></span><span class="st-txt">正在获取今天的脚印…</span><span class="st-from"></span></div>
|
||||
</div>
|
||||
<!-- 引导占位（fpApply('guide') 才显示，此时 #tlSteps 收起）：
|
||||
文案与应用**都来自接口** —— lead 是上游自己的引导语（如「宝妈，先从这几件事记起吧。」），
|
||||
unused[] 是今天没用过的应用，能对上 App 表的会渲染成可点芯片（见 js 的 renderGuide）。
|
||||
⚠️ 版式**沿用下面 AI 气泡那套语言**（左列 + 圆点 + 带尖角的气泡），只是底色用白 ——
|
||||
用户反馈原来那张横跨整块的白卡「放在这有点突兀」；现在它与时间轴共用同一条竖线。
|
||||
左边的空 .ab-badge 只是**占位**，宽度 = --tl-time，好让圆点落在竖线上（与 AI 行同列）。 -->
|
||||
<div class="tl-guide" id="tlGuide" style="display:none">
|
||||
<span class="ab-badge"></span>
|
||||
<span class="ab-dot"></span>
|
||||
<span class="ab-body">
|
||||
<span class="tl-guide-bubble">
|
||||
<span class="tl-guide-t" id="tlGuideTitle">还没有你的脚印</span>
|
||||
<span class="tl-guide-s" id="tlGuideSub">去上面的工具记一笔，这里就会长出你今天的脚印</span>
|
||||
<span class="tl-guide-apps" id="tlGuideApps"></span>
|
||||
</span>
|
||||
</span>
|
||||
<div class="tl-guide fp-guide" id="tlGuide" style="display:none">
|
||||
<span class="fg-walk" aria-hidden="true"><i class="fw0"><svg viewBox="0 0 16 22" width="12" height="16" aria-hidden="true"><ellipse cx="8.4" cy="13.6" rx="4.6" ry="6.6" fill="currentColor"/><circle cx="3.6" cy="4.6" r="1.7" fill="currentColor"/><circle cx="6.6" cy="2.6" r="1.6" fill="currentColor"/><circle cx="9.8" cy="2.4" r="1.5" fill="currentColor"/><circle cx="12.6" cy="3.8" r="1.3" fill="currentColor"/></svg></i><i class="fw1"><svg viewBox="0 0 16 22" width="12" height="16" aria-hidden="true"><ellipse cx="8.4" cy="13.6" rx="4.6" ry="6.6" fill="currentColor"/><circle cx="3.6" cy="4.6" r="1.7" fill="currentColor"/><circle cx="6.6" cy="2.6" r="1.6" fill="currentColor"/><circle cx="9.8" cy="2.4" r="1.5" fill="currentColor"/><circle cx="12.6" cy="3.8" r="1.3" fill="currentColor"/></svg></i><i class="fw2"><svg viewBox="0 0 16 22" width="12" height="16" aria-hidden="true"><ellipse cx="8.4" cy="13.6" rx="4.6" ry="6.6" fill="currentColor"/><circle cx="3.6" cy="4.6" r="1.7" fill="currentColor"/><circle cx="6.6" cy="2.6" r="1.6" fill="currentColor"/><circle cx="9.8" cy="2.4" r="1.5" fill="currentColor"/><circle cx="12.6" cy="3.8" r="1.3" fill="currentColor"/></svg></i><i class="fw3"><svg viewBox="0 0 16 22" width="12" height="16" aria-hidden="true"><ellipse cx="8.4" cy="13.6" rx="4.6" ry="6.6" fill="currentColor"/><circle cx="3.6" cy="4.6" r="1.7" fill="currentColor"/><circle cx="6.6" cy="2.6" r="1.6" fill="currentColor"/><circle cx="9.8" cy="2.4" r="1.5" fill="currentColor"/><circle cx="12.6" cy="3.8" r="1.3" fill="currentColor"/></svg></i><i class="fw4"><svg viewBox="0 0 16 22" width="12" height="16" aria-hidden="true"><ellipse cx="8.4" cy="13.6" rx="4.6" ry="6.6" fill="currentColor"/><circle cx="3.6" cy="4.6" r="1.7" fill="currentColor"/><circle cx="6.6" cy="2.6" r="1.6" fill="currentColor"/><circle cx="9.8" cy="2.4" r="1.5" fill="currentColor"/><circle cx="12.6" cy="3.8" r="1.3" fill="currentColor"/></svg></i></span>
|
||||
<span class="tl-guide-t" id="tlGuideTitle">还没有你的脚印</span>
|
||||
<span class="tl-guide-s" id="tlGuideSub">去上面的工具记一笔，这里就会长出你今天的脚印</span>
|
||||
<span class="tl-guide-apps" id="tlGuideApps"></span>
|
||||
</div>
|
||||
<!-- 这一天的收尾节点。三个直接子元素刻意和 .step 一样排
|
||||
（42px 的左格 + 圆点 + 剩下的），点才落得进同一条竖线里。
|
||||
模块名「AI今日小结」降级成气泡里的一枚小标签，
|
||||
说明和「往期小结 ›」并成气泡底下的一行落款 ——
|
||||
320px 视口下这三段挤在一行是塞不下的，所以标签得进气泡。 -->
|
||||
<button class="ai-bubble ripple" data-open="detailAI">
|
||||
<span class="ab-badge">AI</span>
|
||||
<span class="ab-dot"></span>
|
||||
<span class="ab-body">
|
||||
<span class="ab-bubble">
|
||||
<b class="ab-tag" id="abTag">宝宝今天想说</b>
|
||||
<!-- 这句是 app.js 里 AI_LOGS[0].txt 的手写副本（这里要 <b> 和 <br> 排版，
|
||||
没法直接共用那个字符串）。那边改口吻，这里必须跟着改，
|
||||
否则首页气泡说「小家伙」、点进去小结说「我」，像两个人在写。
|
||||
✅ 2026-09-23 已接真源：句子的数据来自 box_app 的 /footprint/today
|
||||
（上游数胎动平台的用户面接口 /user/daily/footprint 的 `digest.text`），
|
||||
由 fpRender() 写入；`digest.warn` 为真时整句标红（.ai-warn）。
|
||||
⚠️ 但 AI 小结面板（详情页 renderAI → AI_LOGS）里那份仍是**演示文案**，
|
||||
与这里是两套数据 —— 面板要一并用真数据，得先有 mood/stats/建议的字段。 -->
|
||||
<!-- ⚠️ 文案由 js 的 fpRender() 从接口 `digest.text` 写入（今日脚印接口给的真文案）。
|
||||
原来这里写死「妈妈，今天你数到我动了 3 次…」，任何用户都看到 —— 已删。
|
||||
接口没给 digest（今天没活动 / 读不到）时整颗气泡由 .no-ai 收起，不留空壳。 -->
|
||||
<span class="ab-say"></span>
|
||||
</span>
|
||||
<!-- 「AI自动汇总你每日记录」按用户要求删了，这行现在只剩右边的入口。
|
||||
✅ 位置不用额外处理：.ab-foot em 本来就写着 margin-left:auto，
|
||||
左边那截没了它照样贴右。（原来那条 .ab-foot i 的样式已成
|
||||
死规则，一并删了。） -->
|
||||
<span class="ab-foot"><em>往期小结 ›</em></span>
|
||||
</span>
|
||||
<button class="ai-bubble fp-note ripple" data-open="detailAI">
|
||||
<span class="fn-top"><span class="ab-badge">AI</span><b class="ab-tag" id="abTag">宝宝今天想说</b></span>
|
||||
<span class="ab-say"></span>
|
||||
<span class="fn-foot"><span class="fn-sign" id="fpSign">—— 宝宝</span><em>往期小结 ›</em></span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
@@ -478,7 +431,7 @@
|
||||
<span class="gp-new">新游戏</span>
|
||||
<span class="gp-text">
|
||||
<span class="gp-name">宝宝消消乐</span>
|
||||
<span class="gp-sub">奶瓶、尿不湿、小衣服……<br>三个一样就消掉，边玩边备齐待产包</span>
|
||||
<span class="gp-sub">三个一样就消掉，边玩边备齐待产包</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>
|
||||
|
||||
Reference in New Issue
Block a user