首页头部左侧改版:见面倒计时胶囊 + 大孕周 + 水果进度条 + 陪伴天数卡,替代孕周圆环
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
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'));
|
||||
|
||||
/* ③ 档案页顶部:页面名、孕周、大小图标、孕程条 */
|
||||
|
||||
Reference in New Issue
Block a user