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

本周孕育指南改为孕周专属福利（资料免费送福利券样式）

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 16:26:53 +00:00
parent 3f115bd37f
commit 49cc7973d2
3 changed files with 62 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
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:26100139 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100140 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -450,12 +450,19 @@
⚠️ data-wk="n" 是从原来那条 h2 里搬过来的。app.js 用
$$('[data-wk]') 全局扫，属性一丢孕周就永远显示「—」。 -->
<section class="shelf">
<div class="shelf-bar">
<h2 class="sh-title">本周孕育指南 · 孕<span data-wk="n">—</span>周</h2>
<section class="shelf gift2">
<!-- 2026-10-01 改版：用户要「资料免费送、是一种福利、针对这个孕周」的感觉。
抬头改成礼盒 + 「孕N周专属福利」，三张书卡改成「福利券」：左上孕周专属角标、
封面右上「免费」印章、中间一道撕券虚线、底行「免费领 ›」。
⚠️ data-wk 照旧（app.js $$('[data-wk]') 全局扫，角标里那两个也会被填上）。 -->
<div class="shelf-bar gb-bar">
<span class="gb-gift" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24"><rect x="3" y="9" width="18" height="12" rx="2.5" fill="#FF7A5C"/><rect x="2" y="7" width="20" height="4.5" rx="2" fill="#FF9474"/><rect x="10.6" y="7" width="2.8" height="14" fill="#FFD36E"/><path d="M12 7c-1.6-3.6-5.6-4-5.6-1.6C6.4 7 9.6 7 12 7zm0 0c1.6-3.6 5.6-4 5.6-1.6C17.6 7 14.4 7 12 7z" fill="#FFD36E"/></svg></span>
<div class="gb-ht">
<h2 class="sh-title">孕<span data-wk="n">—</span>周专属福利</h2>
<p class="sh-note">这周用得上的孕育资料，<b>全部免费送</b></p>
</div>
<button class="sh-all" data-open="detailResList">全部 ›</button>
</div>
<p class="sh-note">适配孕周的专属孕育参考资料</p>
<!-- 三张卡的内部结构是**逐行对齐**的：封面 / 标题 / 简介 / 底行，一个不缺。
上一稿只有第一张有简介、也只有第一张有「立即领取」，另两张少两截，
于是三张卡的标题落在不同高度、底行也不齐 —— 这就是看着乱的原因。
@@ -483,22 +490,25 @@
要改成读接口，得先把这个口径捋清再动。 -->
<div class="shelf-rail">
<button class="shelf-book sb-book ripple" data-open="detailRes" data-res="book">
<span class="sb-tag">孕<span data-wk="n">—</span>周专属</span><span class="sb-stamp" aria-hidden="true">免费<br>送</span>
<img class="sb-cover" src="assets/img/9f3fa8edf4aa.png" alt="" aria-hidden="true">
<span class="sb-title">《糖耐检查全攻略》</span>
<span class="sb-desc">孕24-28周必看 · 附检查前饮食清单</span>
<span class="sb-row"><span class="sb-faces" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span><i class="sb-got">12.8 万妈妈已领取</i><span class="pill-free">免费</span></span>
<span class="sb-row"><span class="sb-faces" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span><i class="sb-got">12.8 万妈妈已领取</i><span class="pill-free">免费领</span></span>
</button>
<button class="shelf-book sb-food ripple" data-open="detailRes" data-res="food">
<span class="sb-tag">孕<span data-wk="n">—</span>周专属</span><span class="sb-stamp" aria-hidden="true">免费<br>送</span>
<img class="sb-cover" src="assets/img/3657b1f76026.png" alt="" aria-hidden="true">
<span class="sb-title">孕期营养全书</span>
<span class="sb-desc">按孕周编排的一日三餐参考</span>
<span class="sb-row"><span class="sb-faces" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span><i class="sb-got">20.4 万妈妈已领取</i><span class="pill-free">免费</span></span>
<span class="sb-row"><span class="sb-faces" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span><i class="sb-got">20.4 万妈妈已领取</i><span class="pill-free">免费领</span></span>
</button>
<button class="shelf-book sb-music ripple" data-open="detailRes" data-res="music">
<span class="sb-tag">孕<span data-wk="n">—</span>周专属</span><span class="sb-stamp" aria-hidden="true">免费<br>送</span>
<img class="sb-cover" src="assets/img/67405412c52c.png" alt="" aria-hidden="true">
<span class="sb-title">胎教音乐合集</span>
<span class="sb-desc">30 首适合孕中期的舒缓曲目</span>
<span class="sb-row"><span class="sb-faces" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span><i class="sb-got">9.6 万妈妈已领取</i><span class="pill-free">免费</span></span>
<span class="sb-row"><span class="sb-faces" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span><i class="sb-got">9.6 万妈妈已领取</i><span class="pill-free">免费领</span></span>
</button>
</div>
<!-- ⚠️ 这句话现在是**静态文案**（2026-09-19 9.19 需求：兑换码闸门取消，
@@ -514,7 +524,7 @@
· 没上架的**并非拿不到** —— 扫码加小助手可以直接索要（见顾问二维码弹窗）。
所以「128 份等你来领」是邀请口径（含找小助手要的），跟「列表当前 8 条」
是两件事，**数字不一样是对的**，别再"修"。 -->
<p class="unlock"><b>128</b> 份孕育资料等你来领 · <a data-open="detailResList">查看全部 ›</a></p>
<p class="unlock"><i class="ul-gift" aria-hidden="true"></i>福利库还有 <b>128</b> 份资料等你领 · <a data-open="detailResList">查看全部 ›</a></p>
</section>
</div>

2
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100139';
var VER = '26100140';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

42
mama-box.css
View File

@@ -3165,3 +3165,45 @@ a.skip:focus{left:16px;top:16px}
.fn-sign{font-family:var(--font-kid);font-size:13px;color:#C0704F}
.fn-foot em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--brand)}
.today-line.fp2.no-ai .fp-note{display:none}
/* ================= 本周孕育指南 → 孕周专属福利（.shelf.gift2，2026-10-01）=================
礼盒抬头 + 三张「福利券」：孕周角标、免费印章、撕券虚线（两侧半圆缺口）、底行免费领。 */
.shelf.gift2{background-image:
radial-gradient(170px 110px at 100% 0%, rgba(255,200,170,.38), rgba(255,200,170,0) 70%),
linear-gradient(180deg,#FFFDFB,#FFF7F1)}
.gb-bar{align-items:center;gap:10px;margin-bottom:12px}
.gb-gift{flex:0 0 42px;height:42px;border-radius:14px;display:grid;place-items:center;
background:linear-gradient(145deg,#FFF1E6,#FFE1D2);box-shadow:inset 0 0 0 1px #FBD9C8}
.gb-gift svg{animation:gbWiggle 3.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes gbWiggle{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-9deg)}90%{transform:rotate(8deg)}94%{transform:rotate(-4deg)}}
.gb-ht{flex:1;min-width:0}
.gift2 .sh-title{font-size:18px;font-weight:900;color:var(--ink)}
.gift2 .sh-title [data-wk]{color:#F4593C}
.gift2 .sh-note{margin:3px 0 0;font-size:12.5px;color:#A08C82}
.gift2 .sh-note b{color:#E8344E;font-weight:800}
.gift2 .sh-all{align-self:flex-start;margin-top:4px}
.gift2 .shelf-book{position:relative;overflow:hidden;padding:14px 14px 12px}
.sb-tag{position:absolute;left:0;top:0;z-index:1;padding:4px 10px 4px 12px;border-radius:20px 0 14px 0;
font-size:11px;font-weight:800;color:#fff;letter-spacing:.3px;background:linear-gradient(135deg,#FF8E6E,#F4593C)}
.sb-stamp{position:absolute;right:12px;top:12px;z-index:1;width:44px;height:44px;border-radius:50%;
display:grid;place-items:center;text-align:center;font-size:11px;font-weight:900;line-height:1.15;color:#E8344E;
border:2px solid rgba(232,52,78,.75);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),inset 0 0 0 3.5px rgba(232,52,78,.35);
background:rgba(255,255,255,.55);transform:rotate(14deg)}
.gift2 .sb-cover{margin-top:10px}
/* 撕券线：虚线 + 左右两个半圆缺口（缺口颜色取外壳底色，近白） */
.gift2 .sb-row{position:relative;margin-top:auto;padding-top:11px;border-top:1.5px dashed rgba(170,110,80,.28)}
.gift2 .sb-row::before,.gift2 .sb-row::after{content:"";position:absolute;top:-8px;width:15px;height:15px;border-radius:50%;background:#FFFAF6}
.gift2 .sb-row::before{left:-22px}
.gift2 .sb-row::after{right:-22px}
.gift2 .sb-desc{margin-bottom:12px}
.gift2 .sb-row .pill-free{margin-left:auto;padding:5px 11px;border-radius:99px;font-size:12px;font-weight:800;
color:#fff;background:linear-gradient(135deg,#FF7A5C,#E8344E);box-shadow:0 4px 10px rgba(232,52,78,.22)}
.gift2 .unlock{display:block;text-align:center;margin:14px 0 2px;padding:9px 12px;border-radius:14px;
background:#FFF1E8;color:#8A6A5E;font-size:12.5px}
.gift2 .unlock b{color:#E8344E;font-size:15px;font-weight:900;margin:0 1px}
.ul-gift{display:inline-block;vertical-align:-3px;margin-right:5px;width:16px;height:16px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='12' rx='2.5' fill='%23FF7A5C'/%3E%3Crect x='2' y='7' width='20' height='4.5' rx='2' fill='%23FF9474'/%3E%3Crect x='10.6' y='7' width='2.8' height='14' fill='%23FFD36E'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.gb-gift svg{animation:none}}
.gift2 .sb-faces i:nth-child(n+4){display:none}
.gift2 .sb-row .pill-free{padding:5px 10px}
.gift2 .unlock a{white-space:nowrap}