From 3f115bd37faddde4e56b286aa0f586b0004bf6ef Mon Sep 17 00:00:00 2001 From: Karlcarlo Date: Thu, 1 Oct 2026 16:22:55 +0000 Subject: [PATCH] =?UTF-8?q?=E4=BB=8A=E6=97=A5=E8=84=9A=E5=8D=B0=E6=94=B9?= =?UTF-8?q?=E7=89=88=EF=BC=88=E6=92=95=E9=A1=B5=E6=97=A5=E5=8E=86+?= =?UTF-8?q?=E5=B0=8F=E8=84=9A=E4=B8=AB=E6=97=B6=E9=97=B4=E7=BA=BF+?= =?UTF-8?q?=E5=AE=9D=E5=AE=9D=E4=BE=BF=E7=AD=BE=EF=BC=89=EF=BC=8C=E6=B6=88?= =?UTF-8?q?=E6=B6=88=E4=B9=90=E5=8D=A1=E5=8E=8B=E7=9F=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- index.html | 103 ++++++++++++++------------------------------------- js/app.js | 36 ++++++++++++++---- mama-box.css | 89 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 145 insertions(+), 83 deletions(-) diff --git a/index.html b/index.html index 5cd6a60..7ee7db8 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -380,83 +380,36 @@ ⚠️ .steps 仍是整卡可点的 role="button"，里面**不能**再出现 + +
+
+ +
+

宝宝的今日脚印

+

你记下的每一笔，都是它长大的样子

+
+
- -

把每次记录变成孩子一生的记忆

- - - -
+
今天正在获取今天的脚印…
- -
@@ -478,7 +431,7 @@ 新游戏 宝宝消消乐 - 奶瓶、尿不湿、小衣服……
三个一样就消掉，边玩边备齐待产包 + 三个一样就消掉，边玩边备齐待产包 开始玩 diff --git a/js/app.js b/js/app.js index e62a861..b80edae 100644 --- a/js/app.js +++ b/js/app.js @@ -3,7 +3,7 @@ (function () { 'use strict'; /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */ - var VER = '26100138'; + var VER = '26100139'; const $ = (s, c) => (c || document).querySelector(s); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); @@ -1373,6 +1373,7 @@ $('#dockTitle').textContent = babyWord('的孕育工具'); $('#abTag').textContent = babyWord('今天想说'); $('#tlTitle').textContent = babyWord('的今日脚印'); + const _sg = $('#fpSign'); if (_sg) _sg.textContent = '—— 爱你的' + (state.babyName || '宝宝'); /* 整条时间轴自己是个 role="button"，它的 aria-label 里也写着模块名。 只刷可见的 #tlTitle、把这句留在原地，读屏用户会一直听见上一个小名 —— 而这种不同步在屏幕上根本看不出来，只能靠这行和它的断言守着。 */ @@ -4033,6 +4034,12 @@ function fpApply(mode, r) { _fpMode = mode; _fpData = r || null; fpRender(); if (plHook) plHook(); } function fpRender() { const tl = document.querySelector('.today-line'), steps = $('#tlSteps'), guide = $('#tlGuide'); + const _cd = $('#fpCalD'); + if (_cd) { + const n = new Date(); + _cd.textContent = (n.getDate() < 10 ? '0' : '') + n.getDate(); + $('#fpCalM').textContent = (n.getMonth() + 1) + '月 · 周' + '日一二三四五六'[n.getDay()]; + } if (!tl || !steps) return; const mode = _fpMode, r = _fpData || {}; if (mode === 'hide') { tl.style.display = 'none'; return; } @@ -4085,7 +4092,9 @@ const b = document.createElement('button'); b.type = 'button'; b.className = 'tl-chip ripple'; - b.textContent = u.appName || app.name || ident; + const logo = (app && (app.logo || app.icon)) || ''; + if (logo) { const im = document.createElement('img'); im.src = logo; im.alt = ''; im.loading = 'lazy'; b.appendChild(im); } + b.append(u.appName || (app && app.name) || ident); b.addEventListener('click', () => jumpApp(href, (app && app.identifier) || ident || '')); box.appendChild(b); } else if (u.appName) { @@ -4097,8 +4106,8 @@ }); if (sub) { sub.textContent = box.childElementCount - ? '从下面这些记一笔，今天的脚印就会长出来' - : '去上面的工具记一笔，这里就会长出你今天的脚印'; + ? '挑一个记一笔，今天的第一只小脚丫就会印上来' + : '去上面的工具记一笔，今天的第一只小脚丫就会印上来'; } } @@ -4108,8 +4117,10 @@ const time = document.createElement('span'); time.className = 'st-time'; time.textContent = '今天'; const dot = document.createElement('span'); dot.className = 'st-dot'; const txt = document.createElement('span'); txt.className = 'st-txt'; txt.textContent = '正在获取今天的脚印…'; - const from = document.createElement('span'); from.className = 'st-from'; - d.append(time, dot, txt, from); + dot.innerHTML = FP_FOOT; + const card = document.createElement('span'); card.className = 'st-card'; + card.append(txt); + d.append(dot, card); return d; } @@ -4156,10 +4167,19 @@ txt.textContent = String(e.label || ''); } const from = document.createElement('span'); from.className = 'st-from'; - from.textContent = e.app ? '来源 · ' + e.app : ''; - d.append(time, dot, txt, from); + from.textContent = e.app || ''; + /* 2026-10-01 脚印改版：圆点里放一只小脚丫（左右交替靠 CSS :nth-child 翻转）， + 文案 + 时间 + 来源包进一张小卡 .st-card。SVG 是写死的常量，不含上游字段。 */ + dot.innerHTML = FP_FOOT; + const card = document.createElement('span'); card.className = 'st-card'; + const meta = document.createElement('span'); meta.className = 'st-meta'; + meta.append(time, from); + if (e.detail) { const dt = document.createElement('span'); dt.className = 'st-det'; dt.textContent = e.detail; meta.append(dt); } + card.append(txt, meta); + d.append(dot, card); return d; } + const FP_FOOT = ''; /* 无足迹占位行：同构的一行，读屏和眼睛都不会把空卡当成坏卡。 */ diff --git a/mama-box.css b/mama-box.css index 460cb43..bb72f4a 100644 --- a/mama-box.css +++ b/mama-box.css @@ -3076,3 +3076,92 @@ a.skip:focus{left:16px;top:16px} .seg-b{text-align:center;white-space:nowrap} .stp-b{width:48px;min-width:48px;display:grid;place-items:center;padding:0} .stp-ctl input{width:0} + +/* ================= 宝宝消消乐卡压矮（2026-10-01 用户：「高度可以降一降」）================= */ +.gp-card{padding:11px 12px 11px 16px;border-radius:20px} +.gp-text{padding-top:10px} +.gp-name{font-size:18px} +.gp-sub{margin-top:3px;font-size:11.5px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} +.gp-cta{margin-top:7px;padding:4px 12px;font-size:12px} +.gp-board{grid-template-columns:repeat(3,22px);gap:3px;padding:5px;border-radius:12px} +.gp-board i{width:22px;height:22px;border-radius:7px;font-size:13px} +.gp-card::before{width:120px;height:120px;bottom:-56px} + +/* ================= 今日脚印 2026-10-01 改版（.fp2）================= + 一张奶油色的「手账」：撕页日历 + 一左一右的小脚丫沿虚线往下走 + 宝宝写给妈妈的便签。 + ⚠️ 写在文件末尾，靠 .today-line.fp2 覆盖上面那套旧的时间轴列宽变量（--tl-*）布局。 */ +.today-line.fp2{padding:16px 16px 16px; + background-color:#fff; + background-image: + radial-gradient(160px 110px at 100% 0%, rgba(255,214,190,.45), rgba(255,214,190,0) 70%), + radial-gradient(140px 120px at 0% 100%, rgba(255,226,236,.55), rgba(255,226,236,0) 70%), + linear-gradient(180deg,#FFFCF8,#FFF6EF)} +.today-line.fp2::before{display:none} +.fp-head{display:flex;align-items:center;gap:12px} +.fp-cal{position:relative;flex:0 0 56px;height:60px;border-radius:14px;overflow:hidden;background:#fff; + box-shadow:0 6px 14px rgba(200,110,80,.16),inset 0 0 0 1px #F6E3DA;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px} +.fp-cal::before{content:"";position:absolute;left:0;right:0;top:0;height:17px;background:linear-gradient(135deg,#FF8E6E,#F4593C)} +.fc-ring{position:absolute;top:-3px;left:14px;right:14px;height:9px; + background:radial-gradient(circle,#fff 2.2px,transparent 2.6px) 0 50%/14px 9px repeat-x} +.fp-cal b{font-size:23px;font-weight:900;line-height:1;color:#3A2C27;letter-spacing:-.5px;font-variant-numeric:tabular-nums} +.fp-cal span{font-size:9.5px;font-weight:700;color:#A08C82;margin-top:3px;white-space:nowrap} +.fp-ht{flex:1;min-width:0} +.fp2 .tl-h-title{font-size:18px;font-weight:900;color:var(--ink);letter-spacing:-.3px} +.fp-poem{margin-top:4px;font-size:12px;color:#A57F70;font-family:var(--font-kid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.fp-all{flex:0 0 auto;align-self:flex-start;margin-top:4px;display:flex;align-items:center;gap:1px;font-size:12.5px;font-weight:700;color:var(--muted)} +.fp-all i{font-style:normal;font-size:15px;line-height:1} + +/* 脚印行：左边一只小脚丫（交替左右、交替颜色），沿一条虚线往下；右边一张小卡 */ +.fp2 .fp-steps{position:relative;margin-top:14px;padding:0} +.fp2 .fp-steps::before{content:"";position:absolute;left:13px;top:16px;bottom:16px;border-left:2px dashed #F3D6CA} +.fp2 .step{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px} +.fp2 .st-dot{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center; + background:#FFEDE6;color:#F4704F;box-shadow:0 0 0 3px #FFF8F3;z-index:1} +.fp2 .step:nth-child(odd) .st-dot svg{transform:scaleX(-1) rotate(-8deg)} +.fp2 .step:nth-child(even) .st-dot svg{transform:rotate(8deg) translateY(1px)} +.fp2 .step:nth-child(3n+2) .st-dot{background:#FDE8F0;color:#D9577A} +.fp2 .step:nth-child(3n) .st-dot{background:#FFF3D6;color:#E0A126} +.st-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.9); + box-shadow:0 3px 10px rgba(190,120,95,.08),inset 0 0 0 1px #F7EAE3} +.fp2 .st-txt{font-size:14.5px;font-weight:700;color:#3A2C27;white-space:normal;line-height:1.45} +.fp2 .st-txt b{font-size:17px;font-weight:900;color:var(--brand);margin:0 2px;font-variant-numeric:tabular-nums} +.st-meta{display:flex;align-items:center;gap:6px;min-width:0} +.fp2 .st-time{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#B09A8F} +.fp2 .st-from{margin:0;font-size:10.5px;font-weight:700;color:#C0704F;background:#FFF0E8;border-radius:99px;padding:1px 8px} +.fp2 .st-from:empty{display:none} +.st-det{font-size:11px;color:#B09A8F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} + +/* 还没脚印：一行小脚丫走过来 + 引导语（童趣字体）+ 带 logo 的应用芯片 */ +.fp2 .fp-guide{display:block;margin-top:14px;padding:14px 14px 16px;border-radius:18px;text-align:center; + background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1.5px #F6E1D8;border:0} +.fp2 .fp-guide::before,.fp2 .fp-guide::after{display:none} +.fg-walk{display:flex;justify-content:center;align-items:flex-end;gap:12px;height:30px;color:#F6B39D} +.fg-walk i{display:block;line-height:0} +.fg-walk i:nth-child(odd){transform:translateY(-8px) scaleX(-1) rotate(-12deg)} +.fg-walk i:nth-child(even){transform:rotate(12deg)} +.fg-walk .fw0{opacity:.3}.fg-walk .fw1{opacity:.45}.fg-walk .fw2{opacity:.6}.fg-walk .fw3{opacity:.8}.fg-walk .fw4{color:var(--brand);animation:fpStep 1.6s ease-in-out infinite} +@keyframes fpStep{0%,100%{transform:rotate(12deg)}50%{transform:rotate(12deg) translateY(-3px) scale(1.12)}} +.fp2 .tl-guide-t{display:block;margin-top:10px;font-family:var(--font-kid);font-size:16.5px;font-weight:700;line-height:1.55;color:#4A3530} +.fp2 .tl-guide-s{display:block;margin-top:4px;font-size:12px;color:#A08C82} +.fp2 .tl-guide-apps{justify-content:center;gap:7px;margin-top:12px} +.fp2 .tl-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 5px;border-radius:99px;border:0; + font-size:12.5px;font-weight:700;color:#4A3530;background:#fff;box-shadow:0 2px 8px rgba(190,110,85,.14),inset 0 0 0 1px #F6E1D8} +.fp2 .tl-chip img{width:20px;height:20px;border-radius:6px;object-fit:cover} +.fp2 .tl-chip.is-plain{padding-left:11px} +@media (prefers-reduced-motion:reduce){.fg-walk .fw4{animation:none}} + +/* 宝宝的便签：信纸横线 + 胶带 + 落款 */ +.fp2 .fp-note{position:relative;display:block;width:100%;margin-top:14px;padding:16px 16px 12px;text-align:left;border-radius:6px 18px 18px 18px; + overflow:visible;background:#FFFDF7;box-shadow:0 8px 20px rgba(200,120,90,.14),inset 0 0 0 1px #F5E4DA} +.fp2 .fp-note::after{content:"";position:absolute;left:50%;top:-8px;width:64px;height:16px;margin-left:-32px;transform:rotate(-3deg); + background:rgba(255,190,160,.55);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.04)} +.fn-top{display:flex;align-items:center;gap:7px} +.fp2 .ab-badge{flex:0 0 auto;margin:0;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:900;color:#fff; + background:linear-gradient(135deg,#FF8E6E,#F4593C);letter-spacing:.5px} +.fp2 .ab-tag{margin:0;font-size:12.5px;font-weight:800;color:#C0573C;opacity:1} +.fp2 .ab-say{display:block;margin-top:8px;font-family:var(--font-kid);font-size:16.5px;font-weight:700;line-height:30px;color:#4A3530; + background-image:repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(232,180,160,.38) 29px,rgba(232,180,160,.38) 30px)} +.fn-foot{display:flex;align-items:center;gap:8px;margin-top:6px} +.fn-sign{font-family:var(--font-kid);font-size:13px;color:#C0704F} +.fn-foot em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--brand)} +.today-line.fp2.no-ai .fp-note{display:none}