首页头部左侧改版：见面倒计时胶囊 + 大孕周 + 水果进度条 + 陪伴天数卡，替代孕周圆环
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
44
index.html
44
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:26100124 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26100125 缓存版本标记：改 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 第四节） -->
|
||||
@@ -99,35 +99,27 @@
|
||||
<p class="hero-slogan">每次记录都是一生记忆</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-main">
|
||||
<div class="week-ring">
|
||||
<svg viewBox="0 0 120 120" class="ring-svg">
|
||||
<circle class="ring-bg" cx="60" cy="60" r="56"/>
|
||||
<circle class="ring-fg" id="heroRing" cx="60" cy="60" r="56" data-ring="0.6"/>
|
||||
</svg>
|
||||
<div class="week-num"><b id="heroWeek">24</b><span>孕周</span></div>
|
||||
<!-- 2026-10-01 头部左侧改版（用户：「LOGO 下边、小孩左边那块太单一，好好设计一下」）。
|
||||
原来是「孕周圆环 + 一张天数玻璃卡」，信息只有两条、形状又都是圆/方块。现在四层，从情绪到数据：
|
||||
① .hi-due 见面倒计时小胶囊（♥ 跳动）—— 最有期待感的一句放最上面
|
||||
② .hi-week 超大孕周数字「31 周 +6天」—— 主角，替代圆环
|
||||
③ .hi-bar 孕程进度条，进度头上骑着「本周水果」（宝宝大小），右边写「像菠萝」
|
||||
④ .hd-card 原来的玻璃卡，「小名在妈妈肚子里 / 已经生活了 N 天」原样保留
|
||||
竖向账（橙区 250 不变）：hero-top 止于 42 → ①顶 54 高 22 → ②顶 82 高 50 → ③顶 140 高 16 → ④顶 166 高 52 → 底 218，
|
||||
离「宝宝来信」卡顶 234 留 16px（和旧版一样）。宽度不超过 x≈197（旧玻璃卡的右缘），不伸进宝宝插画。
|
||||
JS 只认 id：heroLeft / heroWeek / heroWeekU / heroPlus / heroBar / heroFruit / heroSize / heroWho / heroDays。 -->
|
||||
<div class="hero-pane">
|
||||
<span class="hi-due" id="heroDue"><svg class="hi-heart" viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M12 20.4S3.6 14.9 3.6 9.3a4.6 4.6 0 0 1 8.4-2.6 4.6 4.6 0 0 1 8.4 2.6c0 5.6-8.4 11.1-8.4 11.1z" fill="#fff"/></svg><span id="heroDueT">距离见面还有 <b id="heroLeft">--</b> 天</span></span>
|
||||
<div class="hi-week"><b id="heroWeek">--</b><span class="hi-unit"><em id="heroWeekU">周</em><span id="heroPlus"></span></span></div>
|
||||
<div class="hi-prog">
|
||||
<div class="hi-bar"><i class="hi-fill" id="heroBar"><span class="hi-knob" id="heroFruit" aria-hidden="true"></span></i></div>
|
||||
<span class="hi-size" id="heroSize"></span>
|
||||
</div>
|
||||
<div class="week-plus" id="heroPlus">+3天</div>
|
||||
</div>
|
||||
|
||||
<!-- 原来是一行干巴巴的白字浮在橙底上。改成一张毛玻璃小卡：
|
||||
上行小名，下行天数（数字放大当主角）。卡片是 inline-flex，
|
||||
宽度由内容撑开，两行排布让它窄到不会伸进右边气泡宝宝底下。 -->
|
||||
<div class="hero-days">
|
||||
<div class="hd-card">
|
||||
<span class="hd-who">
|
||||
<svg class="hd-heart" viewBox="0 0 24 24" width="12" height="12" aria-hidden="true">
|
||||
<path d="M12 20.4S3.6 14.9 3.6 9.3a4.6 4.6 0 0 1 8.4-2.6 4.6 4.6 0 0 1 8.4 2.6c0 5.6-8.4 11.1-8.4 11.1z" fill="rgba(255,255,255,.92)"/>
|
||||
</svg>
|
||||
<b id="heroWho">小汤圆</b><span class="hd-where">在妈妈肚子里</span>
|
||||
<b id="heroWho">宝宝</b><span class="hd-where">在妈妈肚子里</span>
|
||||
</span>
|
||||
<!-- ⚠️ 这句话是**拆成两行**放的，别合成一行。
|
||||
.hero-days 是 max-width:196px，.hd-tail 又是 white-space:nowrap，
|
||||
「在妈妈肚子里已经生活了 188 天」整句 ≈ 182px + 卡内边 26px = 208px，
|
||||
超出 196px 会溢出到插画上。
|
||||
拆开后：第一行 ♥+小名+「在妈妈肚子里」≈ 163px，
|
||||
第二行「已经生活了 188 天」≈ 133px，两行都放得下。 -->
|
||||
<span class="hd-tail">已经生活了 <b id="heroDays">171</b> 天</span>
|
||||
<span class="hd-tail">已经生活了 <b id="heroDays">--</b> 天</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
33
js/app.js
33
js/app.js
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26100124';
|
||||
var VER = '26100125';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -993,6 +993,19 @@
|
||||
el.dataset.ring = Math.max(0, Math.min(1, p)).toFixed(3);
|
||||
el.style.strokeDashoffset = '';
|
||||
}
|
||||
/* 首页头部 2026-10-01 改版：见面倒计时 / 孕程条（骑着本周水果）/ 大小一句话。三种状态都走这里，别各写各的。
|
||||
进度条先归 0 再隔一帧写目标值，才有「长出来」的动画（同 replayArBar 的道理）。 */
|
||||
function setHero(o) {
|
||||
const bar = $('#heroBar');
|
||||
if (!bar) return;
|
||||
$('#heroDueT').innerHTML = o.due;
|
||||
$('#heroFruit').textContent = o.emoji || '';
|
||||
$('#heroSize').textContent = o.size || '';
|
||||
$('#heroWeekU').textContent = o.unit == null ? '周' : o.unit;
|
||||
$('.hero-pane').classList.toggle('is-born', !!o.born);
|
||||
bar.style.width = '0%';
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => { bar.style.width = Math.max(0, Math.min(100, o.pct || 0)) + '%'; }));
|
||||
}
|
||||
|
||||
/* ---------- 页面里那些写死的示例日期 ----------
|
||||
时光轴、珍贵时刻、首页两张小卡、指南标题、「记一下」抬头、搜索热词，
|
||||
@@ -1082,11 +1095,8 @@
|
||||
});
|
||||
/* ② 首页 hero */
|
||||
const hw = $('#heroWeek');
|
||||
if (hw) {
|
||||
hw.textContent = '已出生';
|
||||
const lb = hw.nextElementSibling;
|
||||
if (lb) lb.textContent = '';
|
||||
}
|
||||
if (hw) hw.textContent = '已出生';
|
||||
setHero({ due: nm + '已经来到身边', emoji: '👶', size: '', unit: '', pct: 100, born: true });
|
||||
const hp = $('#heroPlus');
|
||||
if (hp) hp.textContent = (ageDays == null ? '' : ageDays + '天');
|
||||
const hd = $('#heroDays');
|
||||
@@ -1095,7 +1105,6 @@
|
||||
if (hwho) hwho.textContent = nm;
|
||||
const hwhere = document.querySelector('.hd-where');
|
||||
if (hwhere) hwhere.textContent = '来到这个世界';
|
||||
setRing($('#heroRing'), 1);
|
||||
/* ③ 档案页 */
|
||||
const arN = $('#arTitleName'); if (arN) arN.textContent = nm;
|
||||
const arL1 = $('#arLine1'); if (arL1) arL1.textContent = ageTxt;
|
||||
@@ -1142,7 +1151,7 @@
|
||||
$('#heroPlus').textContent = '';
|
||||
$('#heroDays').textContent = '--';
|
||||
$('#heroWho').textContent = nm;
|
||||
setRing($('#heroRing'), 0);
|
||||
setHero({ due: '填好预产期，开启倒计时', emoji: '🌱', size: '', pct: 0 });
|
||||
/* ③ 档案页 → 占位 */
|
||||
$('#arTitleName').textContent = nm;
|
||||
$('#arLine1').textContent = '完善孕期信息后开启';
|
||||
@@ -1231,7 +1240,13 @@
|
||||
$('#heroPlus').textContent = '+' + day + '天';
|
||||
$('#heroDays').textContent = days;
|
||||
$('#heroWho').textContent = name;
|
||||
setRing($('#heroRing'), pct / 100);
|
||||
{
|
||||
const sz = babySize(week);
|
||||
setHero({
|
||||
due: left > 0 ? '距离见面还有 <b>' + left + '</b> 天' : '宝宝随时会来见你',
|
||||
emoji: sz.emoji, size: '像' + sz.name.replace(/^一[个颗根只串把粒条棵颗]/, ''), pct: pct
|
||||
});
|
||||
}
|
||||
animateRings($('#screen-home'));
|
||||
|
||||
/* ③ 档案页顶部：页面名、孕周、大小图标、孕程条 */
|
||||
|
||||
34
mama-box.css
34
mama-box.css
@@ -360,6 +360,40 @@ a.skip:focus{left:16px;top:16px}
|
||||
.hd-tail{white-space:nowrap;font-size:12.5px;opacity:.88;line-height:20px}
|
||||
.hd-tail b{font-size:17px;font-weight:800;letter-spacing:-.3px;opacity:1;margin:0 1px}
|
||||
|
||||
/* ===== 头部左侧 2026-10-01 改版：倒计时胶囊 / 大孕周 / 水果进度条 / 玻璃卡（结构与竖向账见 index.html .hero-pane 注释）=====
|
||||
旧的 .hero-main / .week-ring / .hero-days 已不在页面上，相关规则保留无害。 */
|
||||
.hero-pane{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;
|
||||
width:172px;margin:12px 0 0 8px;text-shadow:0 1px 3px rgba(120,30,10,.28)}
|
||||
.hi-due{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px 0 8px;border-radius:999px;
|
||||
font-size:11.5px;font-weight:700;white-space:nowrap;
|
||||
background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.35)}
|
||||
.hi-due b{font-size:13.5px;font-weight:900;margin:0 1px;color:#FFF3C4}
|
||||
.hi-heart{flex:0 0 auto;display:block;animation:hiBeat 1.6s ease-in-out infinite}
|
||||
@keyframes hiBeat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.25)}30%{transform:scale(.95)}}
|
||||
.hi-week{display:flex;align-items:flex-end;height:50px;margin-top:6px}
|
||||
.hi-week b{font-size:54px;font-weight:900;line-height:46px;letter-spacing:-2px;font-variant-numeric:tabular-nums}
|
||||
.hi-unit{display:flex;flex-direction:column;justify-content:flex-end;margin:0 0 3px 5px;line-height:1}
|
||||
.hi-unit em{font-style:normal;font-size:17px;font-weight:800}
|
||||
.hi-unit span{margin-top:3px;font-size:12px;font-weight:700;opacity:.92}
|
||||
.hi-prog{display:flex;align-items:center;gap:8px;width:100%;height:16px;margin-top:8px}
|
||||
.hi-bar{position:relative;flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.28)}
|
||||
.hi-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;
|
||||
background:linear-gradient(90deg,rgba(255,255,255,.7),#fff);box-shadow:0 0 8px rgba(255,255,255,.55);
|
||||
transition:width 1.4s var(--ease)}
|
||||
.hi-knob{position:absolute;right:-9px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
|
||||
display:grid;place-items:center;font-size:12px;line-height:1;text-shadow:none;
|
||||
background:#fff;box-shadow:0 2px 6px rgba(150,50,30,.3);animation:hiBob 2.4s ease-in-out infinite}
|
||||
.hi-knob:empty{display:none}
|
||||
@keyframes hiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
|
||||
.hi-size{flex:0 0 auto;font-size:11.5px;font-weight:700;opacity:.95;white-space:nowrap}
|
||||
.hi-size:empty{display:none}
|
||||
.hero-pane .hd-card{margin-top:10px;padding:7px 12px 8px}
|
||||
.hero-pane .hd-who{font-size:12.5px}
|
||||
.hero-pane .hd-who b{font-size:13.5px;margin-right:1px}
|
||||
/* 产后：「已出生」三个字当主角太宽，收一号；单位留空 */
|
||||
.hero-pane.is-born .hi-week b{font-size:40px;letter-spacing:0}
|
||||
@media (prefers-reduced-motion:reduce){.hi-heart,.hi-knob{animation:none}.hi-fill{transition:none}}
|
||||
|
||||
/* 「宝宝来信」卡：设计稿 x150..648 → left 75 · 宽 249 · 高 80。
|
||||
气泡补全成整圆后下缘到 215.5，卡顶必须 ≥215.5 才不会再压住宝宝，
|
||||
故上移量由 34.5 改为 16（橙区 252 − 16 = 卡顶 236）。
|
||||
|
||||
Reference in New Issue
Block a user