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:
36
mama-box.css
36
mama-box.css
@@ -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:前面那枚小图标要和文字同行居中,
|
||||
|
||||
Reference in New Issue
Block a user