feat(首页): 新增「孕期每日小打卡」——按钮带状态小标签 (v26093012)

- 首页正文最上面加一块「孕期每日小打卡」:数胎动 / 称体重 / 产检三行,
  每行右侧一枚状态标签,点整行进对应应用(复用 data-mini + MINI_APP_MAP + jumpApp)。
- 标签来自工具卡同一个接口(applyRemoteCards → renderDaily),不另打请求:
  今日已记 N 次 / 今天还没记;今日已称 / 今天还没称(按接口 day 判今天);
  距 NT 还有 7 天 / 今天糖耐检查 / 待补记 / 看产检安排。
  抬头右端「今日已完成 x/2」(只数胎动、体重两件每日事)。
- 接口没回、访客态保留中性提示,不写数字;产后态整块收起。
- 首块间距规则改为 .home-body>:first-child,工具托盘并入块间 16px。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-09-30 13:10:04 +00:00
parent 62b23af323
commit 9ea9f3c50f
3 changed files with 112 additions and 6 deletions

View File

@@ -406,11 +406,13 @@ a.skip:focus{left:16px;top:16px}
/* ⚠️ 这两条原来挂在 .sec-title 上。首页不再有 .sec-title 了,选择器必须跟着换到
新的第一块 .tool-dock —— 忘了换不会报错,只会静默失效(来信卡收起来时
头图底下那 64px 的洞补不回来),所以 smoke 里专门钉了一条。 */
.home-body>.tool-dock:first-child{margin-top:21px}
/* 2026-09-30:第一块换成了 .daily-check(孕期每日小打卡),这两条改成「谁是第一块就给谁」,
.tool-dock 退成第二块,间距并进下面 .today-line,.shelf 那条 16px。 */
.home-body>:first-child{margin-top:21px}
/* 来信卡收起来时,它原本占的 64px 流高(margin-top:-16 + height:80)没了,
只剩这 21px 顶着一大片橙色头图,太挤。补到 30px。
走类名而不是 :has(),老一点的移动端浏览器上 :has() 不一定有。 */
.home-body.no-letter>.tool-dock:first-child{margin-top:30px}
.home-body.no-letter>:first-child{margin-top:30px}
.page-body{padding:0 18px;margin-top:-46px;position:relative;z-index:5}
.page-body.no-top{margin-top:8px}
@@ -427,7 +429,7 @@ a.skip:focus{left:16px;top:16px}
对齐的是内容,出血的是底色,这两件事要分开。
⚠️ 三块的圆角、底色、左右内边距改成在这里一处定义。以后要调,改这一条,
别再回到各自的规则里单独写,那正是上一稿乱掉的原因。 */
.tool-dock,.today-line,.shelf{
.daily-check,.tool-dock,.today-line,.shelf{
margin:0 -26px;padding:16px 26px 18px;border-radius:26px;
background-color:#fff;
/* ⚠️ 这两条是一对,缺一不可,而且必须一起看:
@@ -441,7 +443,7 @@ a.skip:focus{left:16px;top:16px}
/* 块间距。给后两块,第一块的上间距另有规则(来信卡收放要用)。
⚠️ 这是**块与块之间**的缝。某一块自己内部觉得挤,要调的是那块的 padding,
不是这里 —— 改这里会把三块的关系一起改掉。 */
.today-line,.shelf{margin-top:16px}
.tool-dock,.today-line,.shelf{margin-top:16px}
/* ===== 后两块的暖色渐变底(本批新增)=====
用户原话:「在那个宝宝的今日脚印那块,稍微给背景它加一点渐变」
@@ -538,6 +540,32 @@ a.skip:focus{left:16px;top:16px}
底一变白,chip 的白底就没意义了,统一回灰字最干净。 */
.dock-note,.sh-note,.tl-h-note{font-size:12px;color:var(--muted);line-height:1.5}
/* ============ 模块零 · 孕期每日小打卡(2026-09-30)============
外壳走上面那条公共白色通栏(.daily-check 已并进去)。内部是三行「图标 · 名称 · 状态标签 · ›」,
整行是按钮。标签三种状态:默认(浅橙,动作提示/未完成)、.is-done(绿,已打卡带 ✓)、
.is-warn(红,待补记 / 今天就是产检日)。
⚠️ 行高按手指靶子给到 46px;最窄 320 屏下标签最长是「距糖耐还有 12 天」≈ 100px,
名称列固定不收缩、标签可省略,挤不爆。 */
.daily-check{padding-top:14px;padding-bottom:8px}
.dc-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dc-title{font-size:16.5px;font-weight:800;letter-spacing:-.2px}
.dc-done{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:600;color:var(--muted)}
.dc-done.is-all{color:var(--green)}
.dc-done.hide{display:none}
.dc-row{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0;
background:none;border:0;text-align:left;color:inherit;font:inherit}
.dc-row+.dc-row{border-top:1px solid var(--line)}
.dc-row:active{opacity:.6}
.dc-ico{flex:0 0 auto;width:30px;height:30px;object-fit:contain}
.dc-name{flex:0 0 auto;font-size:14.5px;font-weight:700}
.dc-tag{margin-left:auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
color:var(--brand-dk);background:#FFF0EA}
.dc-tag.is-done{color:var(--green);background:#EEF5EA}
.dc-tag.is-done::before{content:"✓ "}
.dc-tag.is-warn{color:var(--alert);background:#FDECE8}
.dc-row .chev{flex:0 0 auto;font-size:16px;margin-left:-4px}
/* ============ 模块一 · 工具 ============ */
.dock-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
/* 说明行仍是 inline-flex:前面那枚小图标要和文字同行居中,