feat(首页头图): 点星座小牌弹出星座宝宝——幸运色、性格、可能喜欢的职业，交界可切换 (v26100425)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 08:44:28 +00:00
parent d01a617ec5
commit 038207d585
4 changed files with 140 additions and 4 deletions
--- 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）。
--- 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 = '<i><svg viewBox="0 0 12 12" width="8" height="8"><path d="M6 .6c.4 2.9 1.5 4 4.4 4.4v.1C7.5 5.5 6.4 6.6 6 9.4h-.1C5.5 6.6 4.4 5.5 1.6 5.1V5C4.4 4.6 5.5 3.5 5.9.6z" fill="currentColor"/></svg></i>' +
      '<b>' + pair.map(x => x[2]).join('·') + '宝宝</b>';
+    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); }