孕期小知识详情页加「本周每日小知识」(今天在上,倒排到第 1 天,后几天锁着);首页今日小知识大卡也可点进详情页,圆点仍为切换 (v26100132)
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="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26100131 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26100132 缓存版本标记:改 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 第四节) -->
|
||||
@@ -1185,6 +1185,10 @@
|
||||
<span class="dt-title" id="ptDtTitle">孕期小知识</span>
|
||||
</div>
|
||||
<div class="detail-body pt-page">
|
||||
<!-- 本周每日小知识:第 1 天到今天,今天在最上面;以后的几天锁着(与首页 7 个圆点同一口径) -->
|
||||
<h3 class="pt-sub">本周每日小知识</h3>
|
||||
<div class="pt-list" id="ptList"></div>
|
||||
<h3 class="pt-sub">这一周</h3>
|
||||
<div class="pt-grid" id="ptGrid">
|
||||
<div class="pt-card pc-baby" data-pt="baby"><span class="pt-ico" id="ptBabyIco" aria-hidden="true">👶</span><b>宝宝这周</b><p id="ptBaby"></p></div>
|
||||
<div class="pt-card pc-mom" data-pt="mom"><span class="pt-ico" aria-hidden="true">🤰</span><b>妈妈身体</b><p id="ptMom"></p></div>
|
||||
|
||||
26
js/app.js
26
js/app.js
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26100131';
|
||||
var VER = '26100132';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -3809,6 +3809,27 @@
|
||||
});
|
||||
box.appendChild(b);
|
||||
}
|
||||
/* 详情页「本周每日小知识」:今天在上,往前倒着排到第 1 天;后面几天只露一行「明天见」 */
|
||||
const list = $('#ptList');
|
||||
list.textContent = '';
|
||||
for (let i = today; i >= 0; i--) {
|
||||
const d = wk.days[i] || {};
|
||||
const it = document.createElement('div');
|
||||
it.className = 'pt-li' + (i === today ? ' is-today' : '');
|
||||
const tag = document.createElement('span');
|
||||
tag.className = 'pt-li-tag';
|
||||
tag.textContent = i === today ? '今天 · 第 ' + (i + 1) + ' 天' : '第 ' + (i + 1) + ' 天';
|
||||
const t = document.createElement('div'); t.className = 'pt-li-t'; t.textContent = d.t || '';
|
||||
const p = document.createElement('div'); p.className = 'pt-li-d'; p.textContent = d.d || '';
|
||||
it.appendChild(tag); it.appendChild(t); it.appendChild(p);
|
||||
list.appendChild(it);
|
||||
}
|
||||
if (today < 6) {
|
||||
const lk = document.createElement('div');
|
||||
lk.className = 'pt-li is-lock';
|
||||
lk.textContent = '第 ' + (today + 2) + (today < 5 ? '–7' : '') + ' 天 · 明天见,每天解锁一条';
|
||||
list.appendChild(lk);
|
||||
}
|
||||
tipSel = -1;
|
||||
showTip(wk, today, today);
|
||||
sec.classList.remove('hide');
|
||||
@@ -3843,6 +3864,9 @@
|
||||
(function () {
|
||||
const ch = $('#ptChips');
|
||||
if (ch) ch.addEventListener('click', e => { const b = e.target.closest('.pt-chip'); if (b) openTips(b.dataset.pt); });
|
||||
/* 首页今日小知识大卡也能点进详情页;底下 7 个圆点仍是切换回看,不跳页 */
|
||||
const td = $('#ptToday');
|
||||
if (td) td.addEventListener('click', e => { if (!e.target.closest('#ptDays')) openTips(); });
|
||||
})();
|
||||
function revealTipsGrid() {
|
||||
const g = $('#ptGrid');
|
||||
|
||||
12
mama-box.css
12
mama-box.css
@@ -2768,6 +2768,18 @@ a.skip:focus{left:16px;top:16px}
|
||||
.pt-page .pt-ico{width:30px;height:30px;font-size:17px;vertical-align:middle}
|
||||
.pt-page .pt-card p{margin-top:8px;font-size:14.5px;line-height:1.75;display:block;-webkit-line-clamp:unset}
|
||||
.pt-page .pt-foot{margin-top:16px;text-align:center}
|
||||
/* 详情页 · 本周每日小知识列表 */
|
||||
#ptToday{cursor:pointer}
|
||||
.pt-sub{margin:22px 2px 10px;font-size:16px;font-weight:800;color:var(--ink)}
|
||||
.pt-page .pt-sub:first-child{margin-top:4px}
|
||||
.pt-list{display:grid;gap:10px}
|
||||
.pt-li{border-radius:18px;padding:13px 16px 14px;background:#fff;box-shadow:var(--sh)}
|
||||
.pt-li.is-today{background:linear-gradient(135deg,#FFE9E1 0%,#FFF1E6 55%,#FFF7EE 100%);box-shadow:none}
|
||||
.pt-li-tag{display:inline-block;font-size:11.5px;font-weight:800;color:var(--brand);background:#FFF0EA;border-radius:999px;padding:2px 9px}
|
||||
.pt-li.is-today .pt-li-tag{color:#fff;background:linear-gradient(135deg,#FF8A5C,#F4593C)}
|
||||
.pt-li-t{margin-top:7px;font-size:16px;font-weight:800;color:#5A2E22}
|
||||
.pt-li-d{margin-top:4px;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
|
||||
.pt-li.is-lock{padding:11px 16px;font-size:13px;color:var(--ink-3,#A99);background:transparent;border:1px dashed #EBD9D0;box-shadow:none;text-align:center}
|
||||
.pt-card.is-hit{animation:ptHit 1.2s ease}
|
||||
@keyframes ptHit{0%,100%{box-shadow:0 0 0 0 rgba(244,89,60,0)}30%{box-shadow:0 0 0 3px rgba(244,89,60,.35)}}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user