diff --git a/index.html b/index.html
index 57b64f6..2ebd756 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
兜爸心选 · 孕育陪伴
-
+
@@ -67,7 +67,7 @@
.hero-fx 是阳光光束 + 水波焦散的画布,叠在宝宝之上、文字之下。 -->
-
+
@@ -1768,6 +1768,35 @@
+
+
+
diff --git a/js/app.js b/js/app.js
index 48f14ed..b3d4107 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
- var VER = '26100424';
+ var VER = '26100425';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -839,6 +839,74 @@
}));
modalScrim.addEventListener('click', closeModal);
+ /* ================= 星座宝宝弹窗(2026-10-04) =================
+ 用户:「点开『巨蟹宝宝』之后弹窗:宝宝幸运色(珍珠白、湖水蓝……)、宝宝的性格(说几句好话)、宝宝适合的职业」。
+ 头图小牌在 js/hero-fx.js,点了派发 mb-zodiac {names:['巨蟹'] 或交界时 ['巨蟹','狮子']},这里填内容并打开。
+ 文案只往好处说、不下结论(「可能会喜欢」),底部写明是星座小趣味。 */
+ const ZODIAC = {
+ 水瓶: ['1.20 – 2.18', '冰川蓝', '#7FB8D6', '像晴天里的冰川,清透又有灵气', ['聪明', '有主见', '点子多'],
+ '这个时候出生的宝宝,小脑袋里总装着新奇的想法,对世界充满好奇。待人真诚友善,长大后会有很多好朋友,也常常是那个让大家眼前一亮的人。',
+ ['科学家', '发明家', '程序员', '产品设计师', '天文学家']],
+ 双鱼: ['2.19 – 3.20', '薰衣草紫', '#A88BC9', '温柔又梦幻,像一首轻轻的摇篮曲', ['温柔', '有想象力', '善解人意'],
+ '这个时候出生的宝宝,心思细腻、特别会体贴人,常常能察觉到你的小情绪。想象力丰富,喜欢画画、听故事,是天生的小艺术家。',
+ ['画家', '音乐人', '作家', '心理咨询师', '医生']],
+ 白羊: ['3.21 – 4.19', '珊瑚红', '#F2685A', '像初升的太阳,热乎乎、亮堂堂', ['活泼', '勇敢', '热情'],
+ '这个时候出生的宝宝,天生活泼开朗、精力满满,想到就去做,什么都愿意试一试。笑起来特别有感染力,走到哪儿都能把快乐带到哪儿。',
+ ['运动员', '飞行员', '创业者', '主持人', '外科医生']],
+ 金牛: ['4.20 – 5.20', '抹茶绿', '#9BBF7A', '像春天的草地,安心又治愈', ['踏实', '温和', '有耐心'],
+ '这个时候出生的宝宝,性格温和、做事稳稳当当,是让爸爸妈妈特别省心的小可爱。很会享受生活里的美好,对好吃的、好看的东西格外敏感。',
+ ['美食家', '建筑师', '珠宝设计师', '园艺设计师', '金融分析师']],
+ 双子: ['5.21 – 6.21', '柠檬黄', '#F4D35E', '像一颗跳跳糖,明快又俏皮', ['机灵', '好奇', '会表达'],
+ '这个时候出生的宝宝,反应快、小嘴甜,学说话往往比别的宝宝早。对什么都好奇,十万个为什么能问个不停,和谁都能很快玩到一起。',
+ ['记者', '主持人', '翻译', '作家', '新媒体创作者']],
+ 巨蟹: ['6.22 – 7.22', '珍珠白', '#F3EDE3', '像月光一样柔和,温润有光泽', ['温柔', '贴心', '重感情'],
+ '这个时候出生的宝宝,特别恋家、黏爸爸妈妈,是暖暖的小棉袄。心地柔软、懂得照顾别人,长大后会是家人和朋友最安心的依靠。',
+ ['医生', '教师', '营养师', '室内设计师', '幼教老师']],
+ 狮子: ['7.23 – 8.22', '琥珀金', '#E8A33D', '像夏天的阳光,明亮又大方', ['阳光', '自信', '大方'],
+ '这个时候出生的宝宝,天生自带光芒,笑容灿烂、落落大方,从小就不怕生。有主见、讲义气,常常是小伙伴里的「孩子王」。',
+ ['演员', '导演', '企业家', '律师', '主持人']],
+ 处女: ['8.23 – 9.22', '奶油杏', '#F1D3B3', '像刚出炉的面包,温暖又干净', ['细心', '认真', '聪明'],
+ '这个时候出生的宝宝,观察力特别好,一点点小变化都逃不过他的眼睛。做事认真有条理,学东西又快又扎实,是让人放心的小学霸。',
+ ['医生', '科研人员', '编辑', '药剂师', '会计师']],
+ 天秤: ['9.23 – 10.23', '樱花粉', '#F4B6C2', '像四月的樱花,温柔又优雅', ['优雅', '友善', '审美好'],
+ '这个时候出生的宝宝,长得秀气、性格随和,特别讨人喜欢。天生懂礼貌、爱和平,审美也好,小小年纪就知道什么是好看。',
+ ['设计师', '外交官', '律师', '策展人', '时尚买手']],
+ 天蝎: ['10.24 – 11.22', '玫瑰酒红', '#B0485C', '像一颗红宝石,深邃又有力量', ['专注', '坚韧', '重情义'],
+ '这个时候出生的宝宝,眼神里有一股专注劲儿,认定的事情会坚持到底。外表安静、内心热烈,对家人朋友特别真心,是最靠得住的那个人。',
+ ['心理学家', '科研人员', '外科医生', '投资人', '侦探小说家']],
+ 射手: ['11.23 – 12.21', '落日橙', '#F29B4B', '像旅途中的落日,自由又温暖', ['乐观', '爱自由', '幽默'],
+ '这个时候出生的宝宝,天性乐观、笑点很低,是家里的开心果。喜欢跑跑跳跳、到处探索,对远方充满向往,长大后会去看很大的世界。',
+ ['旅行家', '探险家', '大学老师', '体育教练', '外交官']],
+ 摩羯: ['12.22 – 1.19', '松石绿', '#3E9A88', '像山间的松林,沉稳又有力量', ['踏实', '有责任心', '目标感强'],
+ '这个时候出生的宝宝,小小年纪就很懂事,做事有始有终、不轻易放弃。安静里藏着大大的志向,一步一个脚印,未来一定会很了不起。',
+ ['工程师', '建筑师', '科学家', '管理者', '法官']]
+ };
+ (function () {
+ const M = $('#modalZodiac'); if (!M) return;
+ function fill(n) {
+ const z = ZODIAC[n]; if (!z) return;
+ M.style.setProperty('--zc', z[2]);
+ $('#zdName').textContent = n + '宝宝';
+ $('#zdRange').textContent = z[0] + ' · 按预产期推算';
+ $('#zdColor').textContent = z[1]; $('#zdColorTip').textContent = z[3];
+ const T = $('#zdTraits'); T.innerHTML = ''; z[4].forEach(t => T.appendChild(el('span', '', t)));
+ $('#zdPara').textContent = z[5];
+ const J = $('#zdJobs'); J.innerHTML = ''; z[6].forEach(t => J.appendChild(el('span', '', t)));
+ }
+ window.addEventListener('mb-zodiac', e => {
+ const names = (e.detail && e.detail.names || []).filter(n => ZODIAC[n]); if (!names.length) return;
+ const sw = $('#zdSwitch'); sw.innerHTML = '';
+ sw.hidden = names.length < 2;
+ if (names.length > 1) names.forEach((n, i) => {
+ const b = el('button', i ? '' : 'on', n + '宝宝'); b.type = 'button';
+ b.addEventListener('click', () => { $$('button', sw).forEach(x => x.classList.toggle('on', x === b)); fill(n); });
+ sw.appendChild(b);
+ });
+ fill(names[0]);
+ openModal('modalZodiac');
+ });
+ })();
+
/* ================= 意见反馈(2026-10-04) =================
用户:「在我的页面里加一个客服反馈,功能上的反馈、功能上的建议」。
入口:「我的」常用服务 #meFeedback;「帮助与反馈」里的「提交反馈或建议」行(data-fb)。
diff --git a/js/hero-fx.js b/js/hero-fx.js
index e21f5fa..0f0b759 100644
--- a/js/hero-fx.js
+++ b/js/hero-fx.js
@@ -78,6 +78,9 @@
const zEl = document.createElement('span');
zEl.className = 'hero-zod'; zEl.setAttribute('aria-hidden', 'true');
box.appendChild(zEl);
+ zEl.setAttribute('role', 'button'); zEl.removeAttribute('aria-hidden');
+ let zNames = [];
+ zEl.addEventListener('click', e => { e.stopPropagation(); if (zNames.length) window.dispatchEvent(new CustomEvent('mb-zodiac', { detail: { names: zNames } })); });
function renderZod(d) {
const due = d && !d.empty && !d.postpartum && d.due;
if (!due) { zEl.classList.remove('is-on'); return; }
@@ -86,6 +89,8 @@
// 图标用自绘四角星:星座符号(♋ 之类)在部分安卓上没有字形,会显示成方框
zEl.innerHTML = '' +
'' + pair.map(x => x[2]).join('·') + '宝宝';
+ zNames = pair.map(x => x[2]);
+ zEl.setAttribute('aria-label', zNames.join('·') + '宝宝,点开看看');
zEl.classList.add('is-on');
}
function onPreg(d) { show(stageOf(force != null ? +force : (d && d.week))); renderZod(d); }
diff --git a/mama-box.css b/mama-box.css
index 4ea102c..c25e0f8 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -4533,7 +4533,7 @@ a.skip:focus{left:16px;top:16px}
/* ============ 2026-10-04 头图星座牌(js/hero-fx.js renderZod) ============
挂在 .hero-baby 右下角的空角里,随孕囊一起浮。小、轻、像一枚贴在羊水外的玻璃标签:
磨砂半透明底 + 发丝细边;左边一枚奶油色小圆里一颗自绘四角星(不用 ♋ 一类符号:部分安卓没字形会成方框),右边 11px 字、字距拉开。 */
-.hero-zod{position:absolute;right:-2%;bottom:3%;z-index:4;display:inline-flex;align-items:center;gap:5px;
+.hero-zod{position:absolute;right:-2%;bottom:3%;z-index:4;pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
height:20px;padding:0 9px 0 3px;border-radius:999px;white-space:nowrap;
background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.10));border:.5px solid rgba(255,255,255,.55);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(120,35,20,.16);
@@ -4543,3 +4543,37 @@ a.skip:focus{left:16px;top:16px}
font-style:normal}
.hero-zod svg{display:block;margin-top:.5px}
.hero-zod b{font-size:10.5px;font-weight:600;letter-spacing:1.2px;color:#FFF7EE;text-shadow:0 1px 2px rgba(120,35,20,.25)}
+
+.hero-zod::before{content:"";position:absolute;inset:-10px -6px} /* 牌子只有 20px 高,点击区放大一圈 */
+.hero-zod:active{transform:scale(.96)}
+
+/* ============ 2026-10-04 星座宝宝弹窗 #modalZodiac ============
+ 米白底;顶部一团幸运色的柔光(--zc,JS 按星座写);三段用细线分隔,字号克制(标题 20、正文 13.5)。 */
+.zd-modal{--zc:#E8A33D;overflow:hidden;padding-top:26px;max-height:88vh;overflow-y:auto}
+.zd-glow{position:absolute;left:50%;top:-120px;width:340px;height:220px;margin-left:-170px;border-radius:50%;
+ background:radial-gradient(closest-side,var(--zc),transparent);opacity:.32;filter:blur(8px);pointer-events:none}
+.zd-modal .modal-x{position:absolute;right:16px;top:16px;z-index:2}
+.zd-head{position:relative;text-align:center}
+.zd-star{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--zc);color:color-mix(in srgb,var(--zc) 55%,#7A5240);
+ box-shadow:0 4px 14px rgba(150,80,50,.14)}
+.zd-head h3{margin:8px 0 2px;font-size:20px;font-weight:800;letter-spacing:2px;color:var(--ink)}
+.zd-range{margin:0;font-size:11.5px;letter-spacing:.5px;color:var(--muted)}
+.zd-switch[hidden]{display:none}
+.zd-switch{display:inline-flex;gap:4px;margin-top:10px;padding:3px;border-radius:999px;background:rgba(255,255,255,.75);border:.5px solid #EFE3DA}
+.zd-switch button{height:24px;padding:0 12px;border:0;border-radius:999px;background:none;font-size:12px;color:var(--muted)}
+.zd-switch button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(120,70,50,.12)}
+.zd-sec{position:relative;margin-top:16px;padding-top:14px;border-top:.5px solid #EADDD3}
+.zd-label{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:1.5px;color:#B49A8A}
+.zd-color{display:flex;align-items:center;gap:14px}
+.zd-color .zd-label{margin-bottom:3px}
+.zd-sw{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--zc);
+ box-shadow:inset 0 -6px 12px rgba(0,0,0,.08),inset 0 4px 8px rgba(255,255,255,.45),0 0 0 4px #fff,0 4px 14px rgba(120,70,50,.16)}
+.zd-color b{display:block;font-size:16px;font-weight:800;letter-spacing:1px;color:var(--ink)}
+.zd-color p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
+.zd-tags{display:flex;gap:6px;margin-bottom:8px}
+.zd-tags span{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink-2);
+ background:color-mix(in srgb,var(--zc) 16%,#fff);border:.5px solid color-mix(in srgb,var(--zc) 35%,#fff)}
+.zd-para{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
+.zd-jobs{display:flex;flex-wrap:wrap;gap:7px}
+.zd-jobs span{padding:6px 12px;border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink-2);box-shadow:0 1px 3px rgba(120,70,50,.08)}
+.zd-foot{margin:18px 0 2px;text-align:center;font-size:11px;color:#BCAEA4}