孕期小知识四张小卡精简:收起只露一句重点(宝宝=大小比喻,其余取首个分句),点开看全文,标题加小箭头 (v26100130)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -7,7 +7,7 @@
|
|||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<title>兜爸心选 · 孕育陪伴</title>
|
<title>兜爸心选 · 孕育陪伴</title>
|
||||||
<!-- V:26100129 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
<!-- V:26100130 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||||
<link rel="stylesheet" href="mama-box.css">
|
<link rel="stylesheet" href="mama-box.css">
|
||||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||||
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
||||||
|
|||||||
36
js/app.js
36
js/app.js
@@ -3,7 +3,7 @@
|
|||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||||
var VER = '26100129';
|
var VER = '26100130';
|
||||||
const $ = (s, c) => (c || document).querySelector(s);
|
const $ = (s, c) => (c || document).querySelector(s);
|
||||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||||
|
|
||||||
@@ -3784,10 +3784,11 @@
|
|||||||
$('#ptWhen').textContent = '本周第 ' + (today + 1) + ' 天';
|
$('#ptWhen').textContent = '本周第 ' + (today + 1) + ' 天';
|
||||||
$('#ptFloat').textContent = size.emoji;
|
$('#ptFloat').textContent = size.emoji;
|
||||||
$('#ptBabyIco').textContent = size.emoji;
|
$('#ptBabyIco').textContent = size.emoji;
|
||||||
$('#ptBaby').textContent = '像' + size.name + '那么大。' + (wk.baby || '');
|
/* 2026-10-01 用户反馈「四张小卡文字太多」:卡上只露一句重点,点开再看全文(全文存 data-full) */
|
||||||
$('#ptMom').textContent = wk.mom || '';
|
setTipCard('#ptBaby', '像' + size.name + '那么大', '像' + size.name + '那么大。' + (wk.baby || ''));
|
||||||
$('#ptEat').textContent = wk.eat || '';
|
setTipCard('#ptMom', tipGist(wk.mom), wk.mom);
|
||||||
$('#ptCare').textContent = wk.care || '';
|
setTipCard('#ptEat', tipGist(wk.eat), wk.eat);
|
||||||
|
setTipCard('#ptCare', tipGist(wk.care), wk.care);
|
||||||
/* 一周 7 个圆点:以前可回看,今天实心,以后锁着 */
|
/* 一周 7 个圆点:以前可回看,今天实心,以后锁着 */
|
||||||
const box = $('#ptDays');
|
const box = $('#ptDays');
|
||||||
box.textContent = '';
|
box.textContent = '';
|
||||||
@@ -3825,10 +3826,31 @@
|
|||||||
const body = $('#ptBody');
|
const body = $('#ptBody');
|
||||||
body.classList.remove('is-in'); void body.offsetWidth; body.classList.add('is-in'); // 重播进场动画
|
body.classList.remove('is-in'); void body.offsetWidth; body.classList.add('is-in'); // 重播进场动画
|
||||||
}
|
}
|
||||||
/* 四张小卡压成横滑后正文只露 3 行,点一下展开全文、再点收起 */
|
/* 一句重点 = 全文的第一个分句;太短(如「从这周末起」)就再带上下一句 */
|
||||||
|
function tipGist(txt) {
|
||||||
|
const parts = String(txt || '').split(/[,。;!]/).filter(Boolean);
|
||||||
|
let g = parts[0] || '';
|
||||||
|
if (g.length < 7 && parts[1]) g += ',' + parts[1];
|
||||||
|
return g;
|
||||||
|
}
|
||||||
|
function setTipCard(sel, gist, full) {
|
||||||
|
const p = $(sel);
|
||||||
|
if (!p) return;
|
||||||
|
p.dataset.gist = gist || '';
|
||||||
|
p.dataset.full = full || '';
|
||||||
|
const open = p.closest('.pt-card').classList.contains('is-open');
|
||||||
|
p.textContent = open ? p.dataset.full : p.dataset.gist;
|
||||||
|
}
|
||||||
|
/* 四张小卡只露一句重点,点一下展开全文、再点收回一句 */
|
||||||
(function () {
|
(function () {
|
||||||
const g = $('#ptGrid');
|
const g = $('#ptGrid');
|
||||||
if (g) g.addEventListener('click', e => { const c = e.target.closest('.pt-card'); if (c) c.classList.toggle('is-open'); });
|
if (g) g.addEventListener('click', e => {
|
||||||
|
const c = e.target.closest('.pt-card');
|
||||||
|
if (!c) return;
|
||||||
|
const open = c.classList.toggle('is-open');
|
||||||
|
const p = $('p', c);
|
||||||
|
if (p && p.dataset.full) p.textContent = open ? p.dataset.full : p.dataset.gist;
|
||||||
|
});
|
||||||
})();
|
})();
|
||||||
function revealTipsGrid() {
|
function revealTipsGrid() {
|
||||||
const g = $('#ptGrid');
|
const g = $('#ptGrid');
|
||||||
|
|||||||
@@ -2750,6 +2750,11 @@ a.skip:focus{left:16px;top:16px}
|
|||||||
.pt-card b{font-size:14px}
|
.pt-card b{font-size:14px}
|
||||||
.pt-card p{font-size:13px;line-height:1.6;margin-top:6px}
|
.pt-card p{font-size:13px;line-height:1.6;margin-top:6px}
|
||||||
.pt-foot{font-size:11.5px}
|
.pt-foot{font-size:11.5px}
|
||||||
|
/* 四张小卡精简(2026-10-01):收起时只一句重点(最多 2 行),标题右侧小箭头提示可点;展开后箭头朝下、显示全文 */
|
||||||
|
.pt-card{cursor:pointer;align-content:start}
|
||||||
|
.pt-card p{-webkit-line-clamp:2}
|
||||||
|
.pt-card b::after{content:"›";margin-left:4px;font-weight:700;opacity:.45;display:inline-block;transition:transform .2s}
|
||||||
|
.pt-card.is-open b::after{transform:rotate(90deg)}
|
||||||
|
|
||||||
/* ============ 孕期盲盒 · 价值感改造(2026-10-01):下周预告 / 待解锁任务 / 集齐奖励 / 宝宝周记 ============ */
|
/* ============ 孕期盲盒 · 价值感改造(2026-10-01):下周预告 / 待解锁任务 / 集齐奖励 / 宝宝周记 ============ */
|
||||||
/* 下周预告:卡片剪影(同一张插画压成纯色)+ 倒计时 */
|
/* 下周预告:卡片剪影(同一张插画压成纯色)+ 倒计时 */
|
||||||
|
|||||||
Reference in New Issue
Block a user