feat(此刻): 收进孕育工具卡底部做轻量条，删「她们在聊」和全站今日三项 (v26100109)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
48
index.html
48
index.html
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26100108 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26100109 缓存版本标记：改 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 第四节） -->
|
||||
@@ -285,38 +285,24 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 此刻（2026-10-01 需求文档 v1.0 第二节；同日两次改版）。数据 GET /api/mp/public/mama-box/pulse，渲染在 app.js pulseCard()。
|
||||
⚠️ 模拟数据是产品负责人 2026-10-01 拍板的例外（AGENTS.md §4.12），只限这一条。
|
||||
用户 2026-10-01：「把此刻跟上面的孕育工具结合到一起……此刻相当于上面那个卡片的一个轻量化的展示」
|
||||
→ 不再单独成卡，收进工具卡底部一条浅色带：一行人数 + 她们在做 / 和你比 + 今天别忘了 + 一行滚动动态。
|
||||
「她们在聊」按用户要求删除；全站版（访客）的「今日三项」小卡也去掉（和上面工具宫格重复）。
|
||||
show=false 或接口失败 → 整条保持 .hide，工具卡和以前一样。 -->
|
||||
<div class="pulse hide" id="pulse" role="region" aria-label="此刻，孕妈们在做什么">
|
||||
<div class="pl-head">
|
||||
<span class="pl-live"><i></i>此刻</span>
|
||||
<span class="pp-avs" id="ppAvs" aria-hidden="true"></span>
|
||||
<span class="pl-title" id="plTitle"></span>
|
||||
</div>
|
||||
<div class="pp-doing hide" id="ppDoing"></div>
|
||||
<div class="pl-todo hide" id="plTodo"><span class="tdo-h">今天别忘了</span><span class="tdo-list" id="plTodoList"></span></div>
|
||||
<div class="pl-feed hide" id="plFeed"><div class="pl-track" id="plTrack"></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 此刻，孕妈们在做什么（2026-10-01，需求文档 v1.0 第二节）。纯展示，所有人看到同一份。
|
||||
数据 GET /api/mp/public/mama-box/pulse（box_app 按后台 pulseMode 给模拟 / 真实 / 关闭），渲染在 app.js pulseCard()。
|
||||
⚠️ 模拟数据是产品负责人 2026-10-01 拍板的例外（AGENTS.md §4.12），只限这张卡。
|
||||
show=false 或接口失败 → 整块保持 .hide。 -->
|
||||
<section class="pulse hide" id="pulse" aria-label="此刻，孕妈们在做什么">
|
||||
<span class="pl-orb o1" aria-hidden="true"></span><span class="pl-orb o2" aria-hidden="true"></span>
|
||||
<div class="pl-head">
|
||||
<span class="pl-live"><i></i>此刻</span>
|
||||
<h2 class="pl-title" id="plTitle">孕妈们在做什么</h2>
|
||||
</div>
|
||||
<!-- 同孕周妈妈（2026-10-01「此刻」A+B 改版）：接口带 ?week= 时返回 peer 才出现，此时下面的全站统计让位。
|
||||
用户原话「要 A 的那些，同时加一些 B 这一块的内容融入进去……不要去太重叠」——
|
||||
A = 同孕周妈妈在做什么 / 在聊什么 + 和你自己比；B = 今日待办（产检倒数、本周盲盒），点击直达。
|
||||
视觉上用人物头像和聊天气泡，不用应用 logo，避免和上面的孕育工具区撞脸。 -->
|
||||
<div class="pl-peer hide" id="plPeer">
|
||||
<div class="pp-crowd">
|
||||
<span class="pp-avs" id="ppAvs" aria-hidden="true"></span>
|
||||
<span class="pp-ct"><span><b id="ppCount">0</b> 位妈妈和你同一周</span><small id="ppDue"></small></span>
|
||||
</div>
|
||||
<div class="pp-doing" id="ppDoing"></div>
|
||||
<div class="pl-todo hide" id="plTodo"><span class="tdo-h">今天别忘了</span><span class="tdo-list" id="plTodoList"></span></div>
|
||||
<div class="pp-talk hide" id="ppTalk"><span class="pp-sub">她们在聊</span><div id="ppTalkList"></div></div>
|
||||
</div>
|
||||
<div class="pl-total hide" id="plTotal">
|
||||
<span class="pl-avs" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
|
||||
<span class="pl-tt"><span id="plPre"></span><b id="plNum">0</b><span id="plSuf"></span></span>
|
||||
</div>
|
||||
<div class="pl-today hide" id="plToday"></div>
|
||||
<div class="pl-feed hide" id="plFeed"><div class="pl-track" id="plTrack"></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 宝宝消消乐 · 推广入口（2026-09-30）。用户原话：「做了一个消消乐小游戏（待产清单主题），
|
||||
放到首页展示并推广，宝妈们业余时间玩，名字叫宝宝消消乐」。
|
||||
|
||||
66
js/app.js
66
js/app.js
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26100108';
|
||||
var VER = '26100109';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -3105,7 +3105,8 @@
|
||||
· 今日三项可点：kick / weight 复用首页工具卡的跳转（MINI_APP_MAP），game 去消消乐。
|
||||
· 2026-10-01 A+B 改版：已建档时带 ?week= 拉，接口多给 peer → 卡片换成「和你一样孕 N 周的妈妈们」：
|
||||
同周人数 + 她们今天在做（百分比条，右侧对比「你今天还没数 ›」可直达）+ 今天别忘了（产检倒数 / 本周盲盒）
|
||||
+ 她们在聊（气泡）+ 同周动态。此时全站统计两块让位。无 peer（访客 / real 模式）→ 原版式。 */
|
||||
+ 同周动态。无 peer（访客 / real 模式）→ 一行总人数 + 动态。
|
||||
· 同日再改：收进孕育工具卡底部做轻量条，删「她们在聊」和全站「今日三项」小卡（见 index.html #pulse 注释）。 */
|
||||
const PULSE_ICO = {
|
||||
kick: '<svg viewBox="0 0 24 24"><ellipse cx="10" cy="15" rx="5" ry="6.5" fill="currentColor"/><circle cx="16.5" cy="6" r="2" fill="currentColor"/><circle cx="12.5" cy="4.6" r="1.6" fill="currentColor"/><circle cx="19.4" cy="9.6" r="1.6" fill="currentColor"/></svg>',
|
||||
weight: '<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="5" fill="none" stroke="currentColor" stroke-width="2.2"/><path d="M8 10a4 4 0 018 0z" fill="currentColor"/><path d="M12 10l1.6-2.4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>',
|
||||
@@ -3157,7 +3158,7 @@
|
||||
(function pulseCard() {
|
||||
const sec = $('#pulse');
|
||||
if (!sec) return;
|
||||
let seen = false, last = null, feed = [], fi = 0, ticking = null, peerMode = false, loadedWk = null;
|
||||
let seen = false, last = null, feed = [], fi = 0, ticking = null, peerMode = false, loadedWk = null, shownN = 0;
|
||||
const esc = s => String(s == null ? '' : s).replace(/[&<>"]/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"' })[c]);
|
||||
const tapMini = k => { const b = $('.mini-card[data-mini="' + k + '"]'); if (b) b.click(); };
|
||||
const TODAY_GO = {
|
||||
@@ -3183,7 +3184,7 @@
|
||||
const t = midnight(new Date()), d = new Date(t.getFullYear(), +m[1] - 1, +m[2]);
|
||||
if (d < t - 86400000 * 60) d.setFullYear(d.getFullYear() + 1);
|
||||
const n = Math.round((d - t) / 86400000);
|
||||
if (n >= 0 && n <= 14) out.push({ k: 'cal', t: n === 0 ? '今天产检' : n === 1 ? '明天产检' : '距下次产检 <b>' + n + '</b> 天' });
|
||||
if (n >= 0 && n <= 14) out.push({ k: 'cal', t: n === 0 ? '今天产检' : n === 1 ? '明天产检' : '产检还有 <b>' + n + '</b> 天' });
|
||||
}
|
||||
}
|
||||
if (BB && BB.enabled && !BB.notYet && !BB.needProfile && !BB.ended) {
|
||||
@@ -3214,28 +3215,29 @@
|
||||
tr.style.transform = '';
|
||||
}, 600);
|
||||
}
|
||||
function paintPeer(p) {
|
||||
$('#plTitle').textContent = '和你一样孕 ' + p.week + ' 周的妈妈们';
|
||||
/* 头像叠：同周版按孕周换一组，全站版固定一组；只在换组时重画 */
|
||||
function paintAvs(seed) {
|
||||
const avs = $('#ppAvs');
|
||||
if (!avs.firstChild) avs.innerHTML = [3, 11, 7, 14, 1].map(x => '<i>' + momAva(x + p.week) + '</i>').join('');
|
||||
if (seen) tweenNum($('#ppCount'), p.count, 1600);
|
||||
$('#ppDue').textContent = state.due ? '宝宝们都会在 ' + (state.due.getMonth() + 1) + ' 月前后出生' : '';
|
||||
if (avs.dataset.seed === String(seed)) return;
|
||||
avs.dataset.seed = seed;
|
||||
avs.innerHTML = [3, 11, 7].map(x => '<i>' + momAva(x + seed) + '</i>').join('');
|
||||
}
|
||||
function paintPeer(p) {
|
||||
paintAvs(p.week);
|
||||
$('#plTitle').innerHTML = '<b data-n="' + p.count + '">0</b> 位孕 ' + p.week + ' 周妈妈和你同一周';
|
||||
$('#ppDoing').innerHTML = (p.doing || []).map(d => {
|
||||
const me = SELF_TXT[d.key] ? selfDone(d.key) : null;
|
||||
const meH = me == null ? '' : me
|
||||
? '<span class="pp-me ok">' + SELF_TXT[d.key][1] + ' ✓</span>'
|
||||
: '<button class="pp-me todo" type="button" data-go="' + d.key + '">' + SELF_TXT[d.key][0] + ' ›</button>';
|
||||
return '<div class="pp-do k-' + esc(d.key) + '"><div class="pp-dl"><span class="pp-dt">她们 <b>' + (+d.pct || 0) + '%</b> ' +
|
||||
esc(d.label) + '</span>' + meH + '</div><div class="pp-bar"><i style="width:' + Math.min(100, +d.pct || 0) + '%"></i></div></div>';
|
||||
return '<div class="pp-do k-' + esc(d.key) + '"><span class="pp-dt">她们 <b>' + (+d.pct || 0) + '%</b> ' + esc(d.label) + '</span>' +
|
||||
'<span class="pp-bar"><i style="width:' + Math.min(100, +d.pct || 0) + '%"></i></span>' + meH + '</div>';
|
||||
}).join('');
|
||||
$('#ppDoing').classList.toggle('hide', !(p.doing || []).length);
|
||||
const td = todos();
|
||||
$('#plTodo').classList.toggle('hide', !td.length);
|
||||
$('#plTodoList').innerHTML = td.map(x => '<button class="tdo-chip' + (x.hot ? ' hot' : '') + '" type="button" data-go="' + x.k + '">' +
|
||||
pulseIco(x.k, 'tdo-ico') + '<span>' + x.t + '</span><i>›</i></button>').join('');
|
||||
const tk = p.talk || [];
|
||||
$('#ppTalk').classList.toggle('hide', !tk.length);
|
||||
$('#ppTalkList').innerHTML = tk.map((x, i) => '<div class="pp-bub' + (i % 2 ? ' r' : '') + '"><span class="pb-ava">' + momAva(strSeed(x.text)) +
|
||||
'</span><span class="pb-t">' + esc(x.text) + '</span><em>' + fmtN(x.n) + ' 人在聊</em></div>').join('');
|
||||
}
|
||||
function paint() {
|
||||
const r = last;
|
||||
@@ -3243,25 +3245,23 @@
|
||||
sec.classList.remove('hide');
|
||||
peerMode = !!r.peer;
|
||||
sec.classList.toggle('is-peer', peerMode);
|
||||
$('#plPeer').classList.toggle('hide', !peerMode);
|
||||
if (peerMode) paintPeer(r.peer);
|
||||
else $('#plTitle').textContent = '孕妈们在做什么';
|
||||
const tot = $('#plTotal');
|
||||
tot.classList.toggle('hide', !r.total || peerMode);
|
||||
if (r.total) {
|
||||
$('#plPre').textContent = r.total.prefix || '';
|
||||
$('#plSuf').textContent = r.total.suffix || '';
|
||||
if (seen) tweenNum($('#plNum'), r.total.value, 1800);
|
||||
else {
|
||||
/* 全站版（访客 / real 模式）：只留一行总人数 + 滚动动态 */
|
||||
paintAvs(0);
|
||||
$('#ppDoing').classList.add('hide');
|
||||
$('#plTodo').classList.add('hide');
|
||||
const t = r.total;
|
||||
/* 前缀「已有」省掉：一行放得下「10,037 位妈妈在这里迎接宝宝」，带上就会折出一个孤零零的「宝宝」 */
|
||||
$('#plTitle').innerHTML = t ? '<b data-n="' + t.value + '">0</b> ' + esc(t.suffix) : '孕妈们在做什么';
|
||||
}
|
||||
const td = $('#plToday'), items = peerMode ? [] : (r.today || []);
|
||||
td.classList.toggle('hide', !items.length);
|
||||
const keys = items.map(x => x.key).join(',');
|
||||
if (td.dataset.keys !== keys) {
|
||||
td.dataset.keys = keys;
|
||||
td.innerHTML = items.map(x => '<button class="pl-stat k-' + x.key + '" type="button" data-k="' + x.key + '">' +
|
||||
pulseIco(x.key, 'ps-ico') + '<b>0</b><span>' + esc(x.label) + '</span><i class="go">›</i></button>').join('');
|
||||
/* 标题每次重画会重建 <b>：从上次显示到的数接着涨，不要每分钟从 0 重数 */
|
||||
const nb = $('#plTitle b');
|
||||
if (nb) {
|
||||
nb.dataset.v = shownN;
|
||||
nb.textContent = fmtN(shownN);
|
||||
if (seen) { tweenNum(nb, +nb.dataset.n || 0, 1600); shownN = +nb.dataset.n || 0; }
|
||||
}
|
||||
if (seen) items.forEach(x => tweenNum(td.querySelector('[data-k="' + x.key + '"] b'), x.value, 1600));
|
||||
const nf = (peerMode ? r.peer.feed : r.feed) || [];
|
||||
const fe = $('#plFeed');
|
||||
fe.classList.toggle('hide', !nf.length);
|
||||
@@ -3279,8 +3279,8 @@
|
||||
}
|
||||
}
|
||||
sec.addEventListener('click', e => {
|
||||
const b = e.target.closest('.pl-stat,[data-go]');
|
||||
const k = b && (b.dataset.k || b.dataset.go);
|
||||
const b = e.target.closest('[data-go]');
|
||||
const k = b && b.dataset.go;
|
||||
if (k && TODAY_GO[k]) { haptic(); TODAY_GO[k](); }
|
||||
});
|
||||
const myWeek = () => (state.pregEmpty === false && !state.postpartum && state.week >= 4) ? state.week : null;
|
||||
|
||||
125
mama-box.css
125
mama-box.css
@@ -2376,59 +2376,29 @@ a.skip:focus{left:16px;top:16px}
|
||||
③ 匿名动态：一行，每 3 秒往上翻一条
|
||||
背景两团慢慢漂的柔光 + 左上「此刻」红点呼吸，表达「正在发生」。
|
||||
===================================================================== */
|
||||
.pulse{margin:16px -26px 0;padding:16px 26px 18px;border-radius:26px;position:relative;z-index:0;overflow:hidden;
|
||||
background:linear-gradient(160deg,#fff 0%,#fff 45%,#FFF6F0 100%)}
|
||||
/* 2026-10-01 再改：收进 .tool-dock 底部做轻量条（见 index.html #pulse 注释）。
|
||||
不再是独立白卡：浅暖底圆角带，左右不出血，和宫格同宽；字号整体比工具卡小一档，读起来是「附注」不是第二个模块。 */
|
||||
.pulse{margin-top:12px;padding:11px 12px 10px;border-radius:18px;background:#FFF6F0}
|
||||
.pulse.hide{display:none}
|
||||
.pl-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(18px);opacity:.55;pointer-events:none}
|
||||
.pl-orb.o1{width:150px;height:150px;right:-40px;top:-50px;background:#FFD9CB;animation:plDrift 9s ease-in-out infinite}
|
||||
.pl-orb.o2{width:120px;height:120px;left:-30px;bottom:-50px;background:#F1E2FF;animation:plDrift 11s ease-in-out infinite reverse}
|
||||
@keyframes plDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,14px)}}
|
||||
.pl-head{display:flex;align-items:center;gap:8px}
|
||||
.pl-live{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#fff;
|
||||
background:linear-gradient(135deg,#FF6B57,#F4593C);border-radius:999px;padding:3px 9px 3px 7px}
|
||||
.pl-live i{position:relative;width:6px;height:6px;border-radius:50%;background:#fff}
|
||||
.pl-head{display:flex;align-items:center;gap:7px;min-width:0}
|
||||
.pl-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:#fff;
|
||||
background:linear-gradient(135deg,#FF6B57,#F4593C);border-radius:999px;padding:2px 7px 2px 6px}
|
||||
.pl-live i{position:relative;width:5px;height:5px;border-radius:50%;background:#fff}
|
||||
.pl-live i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid #fff;animation:plPing 1.6s ease-out infinite}
|
||||
@keyframes plPing{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}
|
||||
.pl-title{font-size:16.5px;font-weight:800;letter-spacing:-.2px}
|
||||
.pl-total{display:flex;align-items:center;gap:10px;margin-top:14px}
|
||||
.pl-total.hide,.pl-today.hide,.pl-feed.hide{display:none}
|
||||
.pl-avs{display:flex;flex:0 0 auto}
|
||||
.pl-avs i{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-9px;box-shadow:0 2px 6px rgba(200,120,100,.18);
|
||||
background:#FFC9B6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='11' r='5' fill='%23fff'/%3E%3Cpath d='M5 26c1-6 5-9 9-9s8 3 9 9z' fill='%23fff'/%3E%3C/svg%3E") center/100% no-repeat}
|
||||
.pl-avs i:first-child{margin-left:0}
|
||||
.pl-avs i:nth-child(2){background-color:#C9B6FF}
|
||||
.pl-avs i:nth-child(3){background-color:#FFD98A}
|
||||
.pl-avs i:nth-child(4){background-color:#9ED8C0}
|
||||
.pl-tt{display:flex;flex-wrap:wrap;align-items:baseline;font-size:13px;color:var(--ink-2);line-height:1.3}
|
||||
#plSuf{flex-basis:100%;margin-top:1px;font-size:12.5px}
|
||||
.pl-tt b{display:inline-block;margin:0 3px;font-size:24px;font-weight:900;letter-spacing:-.5px;color:var(--brand);
|
||||
font-variant-numeric:tabular-nums;vertical-align:-2px}
|
||||
.pl-today{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
|
||||
.pl-stat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;border-radius:16px;
|
||||
padding:10px 10px 9px;text-align:left;font:inherit;overflow:hidden;transition:transform .16s}
|
||||
.pl-stat:active{transform:scale(.96)}
|
||||
.pl-stat .ps-ico{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;color:#fff;margin-bottom:4px}
|
||||
.pl-stat .ps-ico svg{width:14px;height:14px}
|
||||
.pl-stat b{font-size:18px;font-weight:900;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
|
||||
.pl-stat span{font-size:11px;line-height:1.35;color:var(--ink-2)}
|
||||
.pl-stat i.go{position:absolute;right:8px;top:10px;font-style:normal;font-size:13px;opacity:.45}
|
||||
.pl-stat.k-kick{background:#FFF0EA}.pl-stat.k-kick b{color:#E5583C}.pl-stat.k-kick .ps-ico{background:#F4795C}
|
||||
.pl-stat.k-weight{background:#EEF6EC}.pl-stat.k-weight b{color:#4E8A43}.pl-stat.k-weight .ps-ico{background:#6EAE5E}
|
||||
.pl-stat.k-game{background:#FFF0F5}.pl-stat.k-game b{color:#D9487A}.pl-stat.k-game .ps-ico{background:#F07AA0}
|
||||
.pl-feed{position:relative;margin-top:12px;height:46px;overflow:hidden;border-radius:14px;background:#FBF6F2;
|
||||
.pl-title{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.35}
|
||||
.pl-title b{font-size:15px;font-weight:900;letter-spacing:-.3px;color:var(--brand);font-variant-numeric:tabular-nums}
|
||||
.pl-feed.hide{display:none}
|
||||
.pl-feed{position:relative;margin-top:8px;height:40px;overflow:hidden;border-radius:12px;background:#fff;
|
||||
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
|
||||
mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
|
||||
.pl-track{will-change:transform}
|
||||
.pl-track.is-move{transition:transform .55s var(--ease)}
|
||||
.pl-row{display:flex;align-items:center;gap:9px;height:46px;padding:0 12px}
|
||||
.pl-row .pr-ico{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff}
|
||||
.pl-row .pr-ico svg{width:14px;height:14px}
|
||||
.pl-row .pr-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
|
||||
.pl-row .pr-who{font-size:10.5px;color:var(--muted)}
|
||||
.pl-row .pr-do{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.pl-row{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px}
|
||||
.pl-row .pr-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
|
||||
.pl-row .pr-who{font-size:10px;color:var(--muted)}
|
||||
.pl-row .pr-do{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.pl-row .pr-do em{font-style:normal;color:var(--brand)}
|
||||
.a-kick .pr-ico{background:#F4795C}.a-weight .pr-ico{background:#6EAE5E}.a-cal .pr-ico{background:#5B8FD6}
|
||||
.a-game .pr-ico{background:#F07AA0}.a-box .pr-ico{background:linear-gradient(135deg,#FFB547,#FF7A5C)}
|
||||
|
||||
/* =====================================================================
|
||||
孕期盲盒 · 详情页（2026-10-01）
|
||||
@@ -2638,7 +2608,7 @@ a.skip:focus{left:16px;top:16px}
|
||||
@keyframes bxHolo{from{background-position:120% 0}to{background-position:-120% 0}}
|
||||
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
.bb-banner .bb-gift svg,.bb-badge,.bb-shine,.pl-orb,.pl-live i::after,.bx-rays,.bx-sp,.bx-box,.bx-shadow,.bx-open,.bx-mini,
|
||||
.bb-banner .bb-gift svg,.bb-badge,.bb-shine,.pl-live i::after,.bx-rays,.bx-sp,.bx-box,.bx-shadow,.bx-open,.bx-mini,
|
||||
.bx-t.can,.bx-t.flash::after,.bx-glow,.cf-holo{animation:none!important}
|
||||
.bb-shine{display:none}
|
||||
.bx-card3d{transition-duration:.2s}
|
||||
@@ -2646,53 +2616,38 @@ a.skip:focus{left:16px;top:16px}
|
||||
.bx-t .fb{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#fff 0,#FFE6DA 70%)}
|
||||
.bx-keep,.bx-open{text-align:center}
|
||||
|
||||
/* 此刻卡 · A+B 改版（2026-10-01）：同孕周妈妈。用人物头像 + 聊天气泡表现「人」，刻意不用应用 logo / 工具格，
|
||||
和上面孕育工具区（方格 + logo）在视觉上拉开。配色沿用本卡的暖白底 + 品牌橙。 */
|
||||
.pl-row .pr-ava,.pp-avs i,.pp-bub .pb-ava{flex:0 0 auto;display:block;border-radius:50%;overflow:hidden;background:#FFE3D3}
|
||||
.pl-row .pr-ava{width:30px;height:30px;box-shadow:0 2px 6px rgba(160,90,60,.14)}
|
||||
.pr-ava svg,.pp-avs svg,.pb-ava svg{display:block;width:100%;height:100%}
|
||||
.pl-peer.hide,.pl-todo.hide,.pp-talk.hide{display:none}
|
||||
.pulse.is-peer .pl-title{font-size:16px}
|
||||
.pp-crowd{display:flex;align-items:center;gap:10px;margin-top:13px}
|
||||
.pp-avs{display:flex}
|
||||
.pp-avs i{width:30px;height:30px;margin-left:-10px;border:2px solid #fff;box-shadow:0 2px 6px rgba(160,90,60,.16)}
|
||||
/* 此刻 · 同孕周（A+B 改版，2026-10-01）：人物头像表现「人」，不用应用 logo，和上面工具卡（色块 + logo）拉开。 */
|
||||
.pl-row .pr-ava,.pp-avs i{flex:0 0 auto;display:block;border-radius:50%;overflow:hidden;background:#FFE3D3}
|
||||
.pl-row .pr-ava{width:26px;height:26px}
|
||||
.pr-ava svg,.pp-avs svg{display:block;width:100%;height:100%}
|
||||
.pp-avs{flex:0 0 auto;display:flex}
|
||||
.pp-avs:empty{display:none}
|
||||
.pp-avs i{width:22px;height:22px;margin-left:-7px;border:1.5px solid #FFF6F0}
|
||||
.pp-avs i:first-child{margin-left:0}
|
||||
.pp-ct{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.3}
|
||||
.pp-ct b{font-size:20px;font-weight:900;letter-spacing:-.4px;color:var(--brand);font-variant-numeric:tabular-nums;margin-right:2px}
|
||||
.pp-ct small{font-size:11.5px;color:var(--muted)}
|
||||
.pp-doing{display:flex;flex-direction:column;gap:10px;margin-top:14px}
|
||||
.pp-doing:empty{display:none}
|
||||
.pp-dl{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-2)}
|
||||
.pp-dt b{font-size:15px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
|
||||
.pp-me{flex:0 0 auto;font:inherit;font-size:11.5px;font-weight:700;border:0;border-radius:999px;padding:3px 10px;white-space:nowrap}
|
||||
.pp-me.todo{color:#fff;background:linear-gradient(135deg,#FF7A5C,#F4593C);box-shadow:0 3px 8px rgba(244,89,60,.25)}
|
||||
.pp-me.todo:active{transform:scale(.95)}
|
||||
.pp-me.ok{color:#4E8A43;background:#EAF5E6}
|
||||
.pp-bar{position:relative;height:7px;margin-top:6px;border-radius:99px;background:#F6ECE6;overflow:hidden}
|
||||
.pp-doing.hide,.pl-todo.hide{display:none}
|
||||
.pp-doing{display:flex;flex-direction:column;gap:7px;margin-top:10px}
|
||||
.pp-do{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
|
||||
.pp-dt{flex:0 0 auto;white-space:nowrap}
|
||||
.pp-dt b{font-size:13px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
|
||||
.pp-bar{flex:1;min-width:24px;position:relative;height:5px;border-radius:99px;background:#F3E3DA;overflow:hidden}
|
||||
.pp-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#FFC2A8,#FF8A66);
|
||||
transition:width 1.2s var(--ease)}
|
||||
.pp-do.k-weight .pp-bar i{background:linear-gradient(90deg,#CBB9FF,#9F8CF0)}
|
||||
.pl-todo{display:flex;align-items:center;gap:8px;margin-top:14px;padding:9px 10px;border-radius:14px;background:#FFF4EC;
|
||||
border:1px dashed #FFCDB8}
|
||||
.tdo-h{flex:0 0 auto;font-size:11.5px;font-weight:800;color:#C2593F;writing-mode:horizontal-tb}
|
||||
.tdo-list{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
|
||||
.tdo-chip{display:inline-flex;align-items:center;gap:4px;border:0;font:inherit;font-size:12px;font-weight:700;color:var(--ink);
|
||||
background:#fff;border-radius:999px;padding:4px 9px 4px 5px;box-shadow:0 1px 4px rgba(160,90,60,.1)}
|
||||
.pp-me{flex:0 0 auto;font:inherit;font-size:11px;font-weight:700;border:0;border-radius:999px;padding:2px 8px;white-space:nowrap}
|
||||
.pp-me.todo{color:#fff;background:linear-gradient(135deg,#FF7A5C,#F4593C)}
|
||||
.pp-me.todo:active{transform:scale(.95)}
|
||||
.pp-me.ok{color:#4E8A43;background:#EAF5E6}
|
||||
.pl-todo{display:flex;align-items:flex-start;gap:7px;margin-top:9px}
|
||||
.tdo-h{flex:0 0 auto;font-size:11px;font-weight:800;color:#C2593F;line-height:22px}
|
||||
.tdo-list{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
|
||||
.tdo-chip{display:inline-flex;align-items:center;gap:4px;border:0;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink);
|
||||
background:#fff;border-radius:999px;padding:3px 8px 3px 4px;white-space:nowrap}
|
||||
.tdo-chip:active{transform:scale(.95)}
|
||||
.tdo-chip b{color:var(--brand)}
|
||||
.tdo-chip i{font-style:normal;opacity:.4}
|
||||
.tdo-ico{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#5B8FD6}
|
||||
.tdo-ico svg{width:11px;height:11px}
|
||||
.tdo-ico{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#5B8FD6}
|
||||
.tdo-ico svg{width:10px;height:10px}
|
||||
.tdo-chip.hot .tdo-ico{background:linear-gradient(135deg,#FFB547,#FF7A5C)}
|
||||
.pp-talk{margin-top:14px}
|
||||
.pp-sub{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:8px}
|
||||
.pp-bub{display:flex;align-items:center;gap:7px;margin-top:7px}
|
||||
.pp-bub.r{flex-direction:row-reverse}
|
||||
.pp-bub .pb-ava{width:26px;height:26px}
|
||||
.pb-t{position:relative;max-width:62%;font-size:13px;font-weight:700;color:var(--ink);background:#FBF3EE;
|
||||
padding:7px 11px;border-radius:4px 14px 14px 14px}
|
||||
.pp-bub.r .pb-t{background:#F3EEFF;border-radius:14px 4px 14px 14px}
|
||||
.pp-bub em{font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap}
|
||||
|
||||
/* 孕期小知识 · 压缩版（2026-10-01：标题前带孕周；今日卡、7 天圆点、四张小卡都收紧，四卡改一行横滑） */
|
||||
.pt-head{margin-bottom:8px;align-items:center}
|
||||
|
||||
Reference in New Issue
Block a user