feat(首页): 删掉孕期每日小打卡；工具卡图标只留 LOGO 里的图形并改矢量 (v26093021)
- 删除首页「孕期每日小打卡」模块：HTML、.daily-check/.dc-* 样式、renderDaily 及产后收起逻辑、 三张专用图标。工具区重新成为首页第一块（首块间距规则本就按 :first-child 走）。 - 五张工具卡图标去掉 LOGO 外面的圆角方块 / 圆环底，只留里面的图形，全部改成 SVG： 数胎动小脚丫、胎儿估重表盘、数宫缩波形直接取自工具页原 SVG； 孕期体重（原图 128px webp）、孕检日历（原图 100px png）原图太小放大发糊，照原图配色重画为矢量。 - 图标位置微调，避开「记录」按钮和标题。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
52
mama-box.css
52
mama-box.css
@@ -391,8 +391,8 @@ a.skip:focus{left:16px;top:16px}
|
||||
/* ⚠️ 这两条原来挂在 .sec-title 上。首页不再有 .sec-title 了，选择器必须跟着换到
|
||||
新的第一块 .tool-dock —— 忘了换不会报错，只会静默失效（来信卡收起来时
|
||||
头图底下那 64px 的洞补不回来），所以 smoke 里专门钉了一条。 */
|
||||
/* 2026-09-30：第一块换成了 .daily-check（孕期每日小打卡），这两条改成「谁是第一块就给谁」，
|
||||
.tool-dock 退成第二块，间距并进下面 .today-line,.shelf 那条 16px。 */
|
||||
/* 这两条写成「谁是第一块就给谁」：2026-09-30 曾在工具区前加过「孕期每日小打卡」，
|
||||
同日按用户要求删掉，第一块又回到 .tool-dock。 */
|
||||
.home-body>:first-child{margin-top:21px}
|
||||
/* 来信卡收起来时，它原本占的 64px 流高（margin-top:-16 + height:80）没了，
|
||||
只剩这 21px 顶着一大片橙色头图，太挤。补到 30px。
|
||||
@@ -414,7 +414,7 @@ a.skip:focus{left:16px;top:16px}
|
||||
对齐的是内容，出血的是底色，这两件事要分开。
|
||||
⚠️ 三块的圆角、底色、左右内边距改成在这里一处定义。以后要调，改这一条，
|
||||
别再回到各自的规则里单独写，那正是上一稿乱掉的原因。 */
|
||||
.daily-check,.tool-dock,.game-promo,.preg-tips,.today-line,.tree-hole,.shelf{
|
||||
.tool-dock,.game-promo,.preg-tips,.today-line,.tree-hole,.shelf{
|
||||
margin:0 -26px;padding:16px 26px 18px;border-radius:26px;
|
||||
background-color:#fff;
|
||||
/* ⚠️ 这两条是一对，缺一不可，而且必须一起看：
|
||||
@@ -525,32 +525,6 @@ 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}
|
||||
|
||||
/* ============ 宝宝消消乐 · 推广入口（2026-09-30）============
|
||||
糖果色渐变大卡：左边名字 + 一句玩法 + 「开始玩」胶囊，右边 3×3 小棋盘循环演示「三连消除」，
|
||||
角上三颗星星闪烁。整张卡是一个按钮。动效在 prefers-reduced-motion 下关掉。 */
|
||||
@@ -779,9 +753,12 @@ a.skip:focus{left:16px;top:16px}
|
||||
投影值照抄 .mc-art 的原值不动：打光要跟邻居一致。 */
|
||||
.mini-card.fweight .mc-art{width:38px;right:11px;bottom:10px;
|
||||
filter:drop-shadow(0 5px 10px rgba(160,90,70,.18))}
|
||||
/* 2026-09-30 工具卡改版：白字 + 各工具自己的 LOGO（从点进去那个工具页左上角的 LOGO 原样取出，
|
||||
assets/img/*.png 透明底；数胎动 .brand-logo、孕期体重 img.brand-logo、孕检日历 .hero-brand i、
|
||||
胎儿估重 .lg、数宫缩 svg.brand-logo。工具页换 LOGO 时这里要重新取）。
|
||||
/* 2026-09-30 工具卡改版：白字 + 各工具 LOGO 里的图形（取自点进去那个工具页左上角的 LOGO：
|
||||
数胎动 .brand-logo、孕期体重 img.brand-logo、孕检日历 .hero-brand i、胎儿估重 .lg、数宫缩 svg.brand-logo）。
|
||||
用户要求只留 LOGO 里面的图形、不要外面的圆角方块 / 圆环底，并且要高清：
|
||||
数胎动 / 胎儿估重 / 数宫缩的原 LOGO 本身是 SVG，直接删掉底板那一层；
|
||||
孕期体重（128px webp）和孕检日历（100px png）原图是小位图、放大就糊，照原图配色重画成矢量。
|
||||
都在 assets/img/*.svg，工具页换 LOGO 时这里要重新取。
|
||||
卡底色取点进去那个工具页的主色系、饱和度再深一档（各工具页 theme-color / 主色见每行注释），
|
||||
这样从卡片点进去颜色是连着的。
|
||||
只换皮：上面那笔高度账（158+10+64 / 88+10+80+10+44）和版式一个数没动，
|
||||
@@ -797,14 +774,13 @@ a.skip:focus{left:16px;top:16px}
|
||||
.mini-card.fweight{background:linear-gradient(160deg,#86A5DA,#5472B4)} /* 胎儿估重页：浅蓝底 #E2ECF9、藏青 #3E5488 */
|
||||
.mini-card.curve{background:linear-gradient(160deg,#A08DD8,#7560B6)} /* 数宫缩页：淡紫底 #E7E1F3、紫 #7E68BC */
|
||||
.bento .mc-btn{background:#fff;color:#C95A36;box-shadow:0 3px 8px rgba(120,50,20,.2)}
|
||||
/* LOGO 是满幅的圆角方块 / 圆，不能再像插画那样出血到卡边外：一律离右下角 10px 左右。
|
||||
数胎动的 LOGO 跟卡同是橙色，靠投影把它从底色上托出来（五张统一挂同一档投影）。 */
|
||||
.bento .mini-card:not(.more) .mc-art{filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
|
||||
.mini-card.kick .mc-art{width:44px;right:10px;bottom:12px}
|
||||
/* 图形统一离右下角 10px 左右，挂一档浅投影，让白色图形在渐变底上立得住。 */
|
||||
.bento .mini-card:not(.more) .mc-art{filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))}
|
||||
.mini-card.kick .mc-art{width:36px;right:10px;bottom:8px}
|
||||
.bento .mc-btn{position:relative;z-index:1}
|
||||
.mc-art.big{width:60px;margin:0 auto 8px}
|
||||
.mc-art.big{width:64px;margin:0 auto 8px}
|
||||
.mini-card.cal .mc-art,.mini-card.curve .mc-art{width:30px;right:10px;bottom:9px}
|
||||
.mini-card.fweight .mc-art{width:34px;right:10px;bottom:15px}
|
||||
.mini-card.fweight .mc-art{width:30px;right:12px;bottom:17px}
|
||||
/* 告警（胎动偏低 / 宫缩达阈值 / 产检过期）：糖果色底上 --alert 红看不清，换成亮黄字 */
|
||||
.bento .mini-card.is-warn .mc-sub,.bento .mini-card.is-warn .mc-sub b,
|
||||
.bento .mini-card.is-warn .mc-big,.bento .mini-card.is-warn .mc-big small,
|
||||
|
||||
Reference in New Issue
Block a user