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

其他妈妈也在搜：孕4-40周每周18条问答，首页露6条+全部问题页；孕期数据去花哨背景、文字实色 v26103108

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-10-31 12:45:07 +00:00
parent e3c92d1f8c
commit b70236a354
39 changed files with 219 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
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:26103107 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26103108 缓存版本标记：改 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） -->
@@ -312,45 +312,33 @@
html.night .tg-n{color:#F1E6EE}
html.night .tg-s{background:rgba(255,255,255,.1);color:#E9D6E2}
/* —— 我的孕期数据：彩色光斑底 + 毛玻璃格 —— */
.vt{position:relative;margin-top:18px;padding:14px 12px 12px;border-radius:22px;overflow:hidden;isolation:isolate;
background:radial-gradient(120px 110px at 8% 6%,rgba(255,160,130,.55),transparent 70%),
radial-gradient(150px 120px at 96% 18%,rgba(196,166,255,.5),transparent 70%),
radial-gradient(160px 120px at 20% 100%,rgba(120,214,198,.45),transparent 70%),
radial-gradient(150px 120px at 88% 96%,rgba(255,150,190,.45),transparent 70%),
linear-gradient(160deg,#FFF4EF,#FBF3FF);
border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 26px rgba(214,140,120,.14)}
/* 2026-10-31 用户：背景太乱太花 → 整块只留一层很淡的暖色底，格子去掉光晕和毛玻璃，字一律实色 */
.vt{position:relative;margin-top:18px;padding:14px 12px 12px;border-radius:22px;background:linear-gradient(180deg,#FFF1EA,#FFF8F4);border:1px solid #F8E3DA}
.vt.hide,.vt-it.hide{display:none}
.vt-h{display:flex;align-items:baseline;gap:8px;margin:0 4px 11px}
.vt-h b{font-size:15.5px;color:#3B2A2A}
.vt-h span{font-size:11.5px;color:#9C8580}
.vt-h span{font-size:11.5px;color:#7A6663}
.vt-row{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.vt-it{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:11px 12px 11px;border-radius:18px;min-width:0;text-align:left;font:inherit;color:inherit;overflow:hidden;
background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
border:1px solid rgba(255,255,255,.85);box-shadow:0 6px 16px rgba(170,110,120,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.vt-it::before{content:"";position:absolute;right:-26px;top:-26px;width:84px;height:84px;border-radius:50%;background:var(--vt-c);opacity:.16;filter:blur(6px);z-index:-1}
.vt-it{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:11px 12px 11px;border-radius:16px;min-width:0;text-align:left;font:inherit;color:inherit;background:#fff;border:0;box-shadow:0 2px 8px rgba(190,120,100,.06)}
.vt-it.span2{grid-column:span 2}
.vt-top{display:flex;align-items:center;gap:6px;width:100%}
.vt-ic{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:var(--vt-c);background:rgba(255,255,255,.75)}
.vt-ic{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:var(--vt-c);background:#FFF3EE}
.vt-ic svg{width:18px;height:18px}
.vt-l{font-size:13px;color:#5E4B48;font-weight:700;white-space:nowrap}
.vt-u{margin-left:auto;font-size:10.5px;color:#A8938F}
.vt-l{font-size:13.5px;color:#2F2424;font-weight:700;white-space:nowrap}
.vt-u{margin-left:auto;font-size:11px;color:#7A6663}
.vt-v{margin-top:2px;white-space:nowrap}
.vt-v b{font-size:25px;line-height:1.15;font-weight:800;letter-spacing:-.5px;color:#3B2A2A;font-variant-numeric:tabular-nums}
.vt-it.empty .vt-v b{color:rgba(120,90,90,.25)}
.vt-f{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
.vt-s{flex:none;font-size:11px;line-height:1.4;padding:1px 8px;border-radius:99px;background:rgba(255,255,255,.75);color:var(--vt-c);font-weight:700;white-space:nowrap}
.vt-s{flex:none;font-size:11px;line-height:1.4;padding:1px 8px;border-radius:99px;background:#FFF3EE;color:var(--vt-c);font-weight:700;white-space:nowrap}
.vt-s:empty{display:none}
.vt-it.empty .vt-s{background:none;padding:1px 0;color:var(--vt-c)}
.vt-s.ok{background:rgba(47,138,94,.12);color:#2F8A5E}
.vt-s.hi{background:rgba(210,69,59,.12);color:#D2453B}
.vt-s.lo{background:rgba(199,122,30,.14);color:#C77A1E}
.vt-d{font-size:10.5px;color:#9C8885;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vt-d{font-size:11px;color:#6E5A57;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vt-d:empty{display:none}
.vt-it.demo .vt-v b{color:rgba(90,60,60,.45)}
.vt-it.empty .vt-s.dm{padding:1px 8px;background:#FFF1D6;color:#B8862B}
.vt-it.demo .vt-d{color:var(--vt-c);font-weight:700}
html.night .vt-it.demo .vt-v b{color:rgba(255,255,255,.4)}
html.night .vt-it.empty .vt-s.dm{background:rgba(255,200,100,.16);color:#F0C67A}
.vt-k{--vt-c:#E9673F}
.vt-w{--vt-c:#E5606A}
@@ -358,12 +346,11 @@
.vt-g{--vt-c:#22968A}
.vt-c{--vt-c:#7A5BC8}
.vt-e{--vt-c:#4E74C4}
html.night .vt{background:radial-gradient(130px 110px at 8% 6%,rgba(255,140,110,.22),transparent 70%),radial-gradient(150px 120px at 96% 18%,rgba(170,140,255,.22),transparent 70%),radial-gradient(160px 120px at 20% 100%,rgba(90,190,175,.2),transparent 70%),#2A2231;border-color:rgba(255,255,255,.08);box-shadow:none}
html.night .vt{background:#2A2231;border-color:rgba(255,255,255,.08)}
html.night .vt-it{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);box-shadow:none}
html.night .vt-ic,html.night .vt-s{background:rgba(255,255,255,.1)}
html.night .vt-h b,html.night .vt-v b{color:#F3E8F0}
html.night .vt-l{color:#CDBBC8}
html.night .vt-it.empty .vt-v b{color:rgba(255,255,255,.2)}
</style>
<!-- 此刻（2026-10-01 需求文档 v1.0 第二节；同日两次改版）。数据 GET /api/mp/public/mama-box/pulse，渲染在 app.js pulseCard()。
⚠️ 模拟数据是产品负责人 2026-10-01 拍板的例外（AGENTS.md §4.12），只限这一条。
@@ -427,6 +414,7 @@
</div>
<div class="ms-who"><span class="ms-avs" id="msAvs" aria-hidden="true"></span><span class="ms-cnt" id="msCnt"></span></div>
<div class="ms-list" id="msList"></div>
<button type="button" class="ms-all ripple hide" id="msAll"></button>
<style>
.ms-head{display:flex;align-items:center;gap:8px}
.ms-title{margin:0;font-size:21px;font-weight:900;font-style:italic;letter-spacing:.5px;color:#2A1E1E}
@@ -449,6 +437,9 @@
.ms-tag.hot{background:#FFE4DE;color:#E8492F}
.ms-tag.new{background:#E6F5EC;color:#2F8A5E}
.ms-go{flex:none;font-style:normal;font-size:18px;color:#D9C2BC}
.ms-all{display:block;width:100%;text-align:center;margin:6px 0 2px;padding:10px;border:0;border-radius:14px;background:#FFF1EA;font:inherit;font-size:13.5px;font-weight:700;color:#E0573A}
.ms-all.hide{display:none}
html.night .ms-all{background:rgba(255,255,255,.07);color:#F3A58F}
html.night .ms-title{color:#F3E8F0}
html.night .ms-title span{background:linear-gradient(transparent 58%,rgba(255,214,90,.45) 58%,rgba(255,214,90,.45) 92%,transparent 92%)}
html.night .ms-q{color:#EFE3EA}
@@ -1330,6 +1321,69 @@
</div>
</section>
<!-- ================= 其他妈妈也在搜 · 全部问题（2026-10-31）=================
首页 #pregTips 只露 6 条，其余在这里：按孕周取 assets/data/qa/<周>.json（孕 4–40 周，每周 18 条问答），
分类筛选 + 点开看答案；从首页点某一条进来，自动展开并滚到那一条。渲染在 app.js openQA()。 -->
<section class="detail" id="detailQA">
<div class="detail-bar">
<button class="dt-back" data-detail="close">‹</button>
<span class="dt-title" id="qaTitle">其他妈妈也在搜</span>
</div>
<div class="detail-body qa-page">
<div class="qa-hero">
<b id="qaHeroT">这周孕妈都在问</b>
<span id="qaHeroD"></span>
</div>
<div class="qa-cats" id="qaCats" role="tablist"></div>
<a class="qa-topic hide" id="qaTopic" href="topic/wen/">
<img src="topic/wen/img/hero.webp" alt="" loading="lazy">
<span><em>孕期专题</em><b>妊娠纹怎么防？现在该抹什么</b></span><i>›</i>
</a>
<div class="qa-list" id="qaList"></div>
<button type="button" class="qa-more" id="qaTips">看看本周每日小知识 ›</button>
<p class="pt-foot">仅供参考，身体有任何不适请以医生意见为准</p>
</div>
<style>
.qa-page{padding:6px 16px 40px}
.qa-hero{display:flex;flex-direction:column;gap:3px;margin:6px 2px 12px}
.qa-hero b{font-size:20px;font-weight:900;color:#2A1E1E}
.qa-hero span{font-size:12.5px;color:#7A6663}
.qa-cats{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -16px;padding-left:18px;padding-right:18px;scrollbar-width:none}
.qa-cats::-webkit-scrollbar{display:none}
.qa-cat{flex:none;padding:5px 12px;border-radius:99px;border:1px solid #F1DDD6;background:#fff;font:inherit;font-size:13px;color:#5E4B48}
.qa-cat small{margin-left:3px;font-size:11px;color:#A8938F}
.qa-cat.on{background:#F4593C;border-color:#F4593C;color:#fff;font-weight:700}
.qa-cat.on small{color:rgba(255,255,255,.8)}
.qa-topic{display:flex;align-items:center;gap:12px;margin:4px 0 10px;padding:8px 12px 8px 8px;border-radius:16px;background:linear-gradient(110deg,#FFEDE6,#FFF8F4);text-decoration:none;color:inherit}
.qa-topic.hide{display:none}
.qa-topic img{flex:none;width:54px;height:54px;border-radius:12px;object-fit:cover}
.qa-topic span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.qa-topic em{font-style:normal;font-size:11px;color:#F4593C;font-weight:700}
.qa-topic b{font-size:14.5px;color:#2F2424}
.qa-topic i{font-style:normal;font-size:20px;color:#E4A595}
.qa-list{display:flex;flex-direction:column;gap:8px}
.qa-it{border-radius:16px;background:#fff;box-shadow:0 2px 8px rgba(190,120,100,.07);overflow:hidden}
.qa-it.hide{display:none}
.qa-q{display:flex;align-items:center;gap:10px;width:100%;padding:13px 12px;border:0;background:none;font:inherit;color:inherit;text-align:left}
.qa-no{flex:none;width:20px;font-size:15px;font-weight:900;font-style:italic;color:#C9B4AF;text-align:center}
.qa-it.top .qa-no{color:#F2533A}
.qa-tx{flex:1;min-width:0;font-size:15px;line-height:1.45;font-weight:600;color:#2F2424}
.qa-tag{flex:none;padding:0 6px;border-radius:6px;font-size:10.5px;line-height:17px;font-weight:700;background:#F6EEEB;color:#8A7471}
.qa-tag.hot{background:#FFE4DE;color:#E8492F}
.qa-ch{flex:none;font-style:normal;font-size:16px;color:#D9C2BC;transition:transform .2s}
.qa-it.open .qa-ch{transform:rotate(90deg)}
.qa-a{display:none;margin:0 12px 13px 42px;padding:10px 12px;border-radius:12px;background:#FFF6F2;font-size:14px;line-height:1.75;color:#4A3B39}
.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-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}
html.night .qa-a{background:rgba(255,255,255,.06);color:#E3D6DE}
html.night .qa-topic{background:linear-gradient(110deg,#3a2a2a,#2c2222)}
</style>
</section>
<!-- ================= AI 小结 内容页 ================= -->
<section class="detail" id="detailAI">
<div class="detail-bar">
@@ -2148,7 +2202,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=26103107"></script>
<script src="js/birth-flow.js?v=26103108"></script>
<!-- 禁止下拉回弹（2026-10-11 统一规则，与孕期体重同一段）：竖向拖动时从手指下往上找还能朝该方向滚的容器，找不到才拦；横滑、双指、可滚列表不受影响 -->
<script>