jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页宫格换正式应用图标；其他妈妈也在搜6问各配专题页（花费计算器/测一测/营养/补剂/职场维权）+热度设计 v26103111

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-10-31 13:22:15 +00:00
parent a56ce8c366
commit a3cccb109b
36 changed files with 3384 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26103110 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26103111 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<link rel="stylesheet" href="night.css">
<!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -204,44 +204,45 @@
<button class="dock-all" data-sheet="open">所有工具 ›</button>
</div>
<p class="dock-note"><svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M11 2.6l1.9 5.2 5.2 1.9-5.2 1.9L11 16.8l-1.9-5.2L3.9 9.7l5.2-1.9L11 2.6z" fill="currentColor"/><path d="M18.4 14.6l.8 2.1 2.2.8-2.2.8-.8 2.1-.8-2.1-2.2-.8 2.2-.8.8-2.1z" fill="currentColor" opacity=".6"/></svg>妈妈每记录一次，宝宝就多一段成长记忆</p>
<!-- 图标：2026-10-31 改用 App 表里各应用的正式 logo（app.js applyToolLogos），「全部工具」没有应用 logo，保留渐变底白图形。 -->
<!-- 2026-10-31 用户定：工具区改成育儿首页那种「图标宫格」——4 列 × 2 行，每格 彩色圆角图标 + 名字 + 状态胶囊。
7 个孕期工具 + 「全部工具」出口。data-mini 与各 id（#kickTodayHome / #weightVal / #calNext）照旧，
卡片接口回填、孕周没到换替补（swapHomeCards）、点击跳转都沿用原逻辑，只换皮。
图标就是原来五张卡上的白色 LOGO 图形，铺在各工具同色系的渐变底上。样式在下面 <style>（不进 mama-box.css）。 -->
<div class="tg-grid">
<button class="tg kick ripple" data-mini="kick">
<i class="tg-ic"><img src="assets/img/6add0c9e5856.svg" alt="" aria-hidden="true"></i>
<i class="tg-ic lg"><img src="/taidong/logo/logo-foot.svg" alt="" aria-hidden="true"></i>
<span class="tg-n">数胎动</span>
<!-- 默认中性占位，不写演示数字（真实值由卡片接口写入） -->
<span class="tg-s">今天 <b id="kickTodayHome">--</b> 次</span>
</button>
<button class="tg weight ripple" data-mini="weight">
<i class="tg-ic"><img src="assets/img/fc0ab3d2e21a.svg" alt="" aria-hidden="true"></i>
<i class="tg-ic lg"><img src="/upload/picture/a6d7e61edee2ff0395cf00587a7c4036.svg" alt="" aria-hidden="true"></i>
<span class="tg-n">孕期体重</span>
<span class="tg-s" id="weightVal">--</span>
</button>
<button class="tg cal ripple" data-mini="cal">
<i class="tg-ic"><img src="assets/img/a693b92f3239.svg" alt="" aria-hidden="true"></i>
<i class="tg-ic lg"><img src="/chanjian-rili/logo/logo-7-dots.svg" alt="" aria-hidden="true"></i>
<span class="tg-n">孕检日历</span>
<span class="tg-s" id="calNext">—</span>
</button>
<button class="tg fweight ripple" data-mini="fweight">
<i class="tg-ic"><img src="assets/img/3c4cf0da356c.svg" alt="" aria-hidden="true"></i>
<i class="tg-ic lg"><img src="/upload/picture/715333a69fb67d8812ab093f342fa00f.png" alt="" aria-hidden="true"></i>
<span class="tg-n">胎儿估重</span>
<span class="tg-s">去测算</span>
</button>
<button class="tg curve ripple" data-mini="curve">
<i class="tg-ic"><img src="assets/img/ad7487f2e445.svg" alt="" aria-hidden="true"></i>
<i class="tg-ic lg"><img src="/upload/picture/1c02d720e4d23b09c996e859703b8b5e.svg" alt="" aria-hidden="true"></i>
<span class="tg-n">数宫缩</span>
<span class="tg-s" data-wk="cn">—</span>
</button>
<button class="tg bp ripple" data-mini="bp">
<i class="tg-ic"><svg viewBox="2 2 20 20" aria-hidden="true" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19.5s-7.5-4.6-7.5-10A4.2 4.2 0 0112 7a4.2 4.2 0 017.5 2.5c0 5.4-7.5 10-7.5 10z"/><path d="M6 12h3l1.5-2.5 2 4 1.5-1.5H18"/></svg></i>
<i class="tg-ic lg"><img src="/upload/picture/816227e3933211145bb8fc774ee32e82.svg" alt="" aria-hidden="true"></i>
<span class="tg-n">孕期血压</span>
<span class="tg-s">量一量</span>
</button>
<button class="tg glu ripple" data-mini="glu">
<i class="tg-ic"><svg viewBox="2 2 20 20" aria-hidden="true" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5s-5.5 6.2-5.5 10.2a5.5 5.5 0 0011 0C17.5 9.7 12 3.5 12 3.5z"/><path d="M9.8 14.2a2.3 2.3 0 002.2 2.1"/></svg></i>
<i class="tg-ic lg"><img src="/upload/picture/fde3c920fae453f2642731e4135b88f5.png" alt="" aria-hidden="true"></i>
<span class="tg-n">孕期血糖</span>
<span class="tg-s">记一笔</span>
</button>
@@ -295,7 +296,9 @@
.tg{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:2px 0;border:0;background:none;font:inherit;color:inherit;overflow:visible}
.tg-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;box-shadow:0 6px 14px var(--tg-sh,rgba(230,110,80,.25)),inset 0 1px 0 rgba(255,255,255,.35);background:var(--tg-bg)}
.tg-ic img,.tg-ic svg{width:27px;height:27px;object-fit:contain}
.tg.weight .tg-ic img{width:30px;height:30px}
/* 2026-10-31 用户：图标统一用正式上线的应用图标（App 表 logo，后台换了 JS 会跟着换；这里的 src 只是首屏占位） */
.tg-ic.lg{display:block;width:50px;height:50px;padding:0;background:none;box-shadow:none;border-radius:0}
.tg-ic.lg img{display:block;margin:0;position:static;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(120,80,70,.18))}
.tg-n{font-size:13px;font-weight:600;color:#3B2A2A;white-space:nowrap}
.tg-s{max-width:100%;padding:1px 8px;border-radius:99px;font-size:11px;line-height:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--tg-pl);color:var(--tg-tx)}
.tg-s b{font-weight:800}
@@ -423,13 +426,23 @@
.ms-avs img:first-child{margin-left:0}
.ms-cnt{font-size:12px;color:#9A8380}
.ms-list{display:flex;flex-direction:column}
.ms-it{display:flex;align-items:center;gap:10px;width:100%;padding:12px 2px;border:0;border-bottom:1px dashed #F1DDD6;background:none;font:inherit;color:inherit;text-align:left;text-decoration:none}
.ms-it{display:flex;align-items:center;gap:10px;width:100%;padding:11px 2px;border:0;border-bottom:1px dashed #F1DDD6;background:none;font:inherit;color:inherit;text-align:left;text-decoration:none}
.ms-it:last-child{border-bottom:0}
.ms-no{flex:none;width:20px;font-size:16px;font-weight:900;font-style:italic;color:#C9B4AF;text-align:center}
.ms-it:nth-child(1) .ms-no{color:#F2533A}
.ms-it:nth-child(2) .ms-no{color:#F7843F}
.ms-it:nth-child(3) .ms-no{color:#F5AE3A}
.ms-q{flex:1;min-width:0;font-size:15.5px;line-height:1.4;font-weight:600;color:#2F2424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ms-q{min-width:0;font-size:15.5px;line-height:1.4;font-weight:600;color:#2F2424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-h{display:flex;align-items:center;gap:3px;font-size:11.5px;color:#B39C97}
.ms-h svg{width:13px;height:13px;color:#F2694A}
.ms-h b{font-weight:500}
.ms-it:nth-child(-n+3) .ms-h{color:#E8613F}
.ms-it:nth-child(-n+3) .ms-h b{font-weight:700}
.ms-bd{flex:none;min-width:20px;padding:0 5px;border-radius:6px 6px 6px 2px;font-size:11px;line-height:18px;font-weight:800;text-align:center;background:#FFE7DF;color:#E8492F}
.ms-bd.bao{background:linear-gradient(135deg,#FF7A45,#F2394A);color:#fff;box-shadow:0 3px 8px rgba(242,57,74,.28)}
.ms-bd.new{background:#E6F5EC;color:#2F8A5E}
.ms-it:nth-child(-n+3) .ms-no{font-size:18px}
.ms-tag{flex:none;padding:0 6px;border-radius:6px;font-size:10.5px;line-height:17px;font-weight:700;background:#FFF1DC;color:#C77A1E}
.ms-tag.hot{background:#FFE4DE;color:#E8492F}
.ms-tag.new{background:#E6F5EC;color:#2F8A5E}
@@ -1373,18 +1386,6 @@
.qa-it.open .qa-a{display:block}
.qa-it.hit{animation:qaHit 1.2s ease}
@keyframes qaHit{0%,40%{box-shadow:0 0 0 2px #F4593C}100%{box-shadow:0 2px 8px rgba(190,120,100,.07)}}
.qa-go{display:inline-block;margin-top:8px;font-weight:700;color:#E0573A;text-decoration:none}
.qz-lead{margin:0 0 8px;color:#6E5A57}
.qz-h{margin:2px 0 8px;font-weight:700;color:#2F2424}
.qz-o{display:block;width:100%;margin:0 0 7px;padding:9px 12px;border:1px solid #F1DDD6;border-radius:12px;background:#fff;font:inherit;font-size:14px;color:#3B2A2A;text-align:left}
.qz-o:active{background:#FFEDE6;border-color:#F4593C}
.qz-r{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 2px;text-align:center}
.qz-r span{font-size:12px;color:#8A7471}
.qz-r b{font-size:20px;font-weight:900;color:#E0573A}
.qz-r p{margin:2px 0 6px;font-size:14px;color:#4A3B39}
.qz-again{padding:6px 14px;border:0;border-radius:99px;background:#F4593C;color:#fff;font:inherit;font-size:13px;font-weight:700}
html.night .qz-o{background:#2F2737;border-color:rgba(255,255,255,.12);color:#EFE3EA}
html.night .qz-h{color:#F1E6EE}
.qa-more{display:block;margin:16px auto 4px;padding:8px 16px;border-radius:99px;border:1px solid #F1DDD6;background:#fff;font:inherit;font-size:13px;color:#E0573A}
html.night .qa-hero b,html.night .qa-tx,html.night .qa-topic b{color:#F1E6EE}
html.night .qa-it,html.night .qa-cat,html.night .qa-more{background:#2F2737;border-color:rgba(255,255,255,.1);box-shadow:none}
@@ -2211,7 +2212,7 @@
<!-- 2026-10-05 首页头图：宝宝时不时动一动小手小脚（独立文件，删掉这一行即下线） -->
<script src="js/baby-limbs.js?v=26101201"></script>
<script src="js/coach.js?v=26101211"></script>
<script src="js/birth-flow.js?v=26103110"></script>
<script src="js/birth-flow.js?v=26103111"></script>
<!-- 禁止下拉回弹（2026-10-11 统一规则，与孕期体重同一段）：竖向拖动时从手指下往上找还能朝该方向滚的容器，找不到才拦；横滑、双指、可滚列表不受影响 -->
<script>