jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(星座宝宝): 12 个自绘星座符号；弹窗按火土风水四象重做——头带配色、星图、元素纹样 (v26100426)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-04 08:53:54 +00:00
parent 038207d585
commit 4d412f0e60
5 changed files with 131 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title> <title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100425 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 --> <!-- V:26100426 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css"> <link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） --> <!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -1771,18 +1771,24 @@
<!-- 星座宝宝（2026-10-04）：点头图孕囊旁的「xx宝宝」小牌打开（js/hero-fx.js 派发 mb-zodiac → app.js 填内容 + openModal）。 <!-- 星座宝宝（2026-10-04）：点头图孕囊旁的「xx宝宝」小牌打开（js/hero-fx.js 派发 mb-zodiac → app.js 填内容 + openModal）。
幸运色 → 性格 → 适合的职业；预产期落在星座交界时顶部给两个可切换的小标签。内容是星座小趣味，底部写明。 --> 幸运色 → 性格 → 适合的职业；预产期落在星座交界时顶部给两个可切换的小标签。内容是星座小趣味，底部写明。 -->
<section class="modal zd-modal" id="modalZodiac" data-autofocus="off" role="dialog" aria-modal="true" aria-labelledby="zdName"> <section class="modal zd-modal" id="modalZodiac" data-autofocus="off" role="dialog" aria-modal="true" aria-labelledby="zdName">
<div class="zd-glow" id="zdGlow" aria-hidden="true"></div> <!-- 2026-10-04 二版（用户：「弹出的页面重新设计，要有针对星座的设计感，背景色按火象、水象这些」）：
<button class="modal-x" data-modal="close" aria-label="关闭"> 顶部一条按四象配色的头带（火 / 土 / 风 / 水），右上角淡淡画出这个星座的星图（星星会闪），
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg> 正中玻璃圆里是星座符号；头带底边是元素纹样（火焰 / 山脊 / 云 / 水波），最下一层用正文底色填，头带「长」进正文。
</button> 素材在 js/zodiac-art.js。 -->
<div class="zd-head"> <div class="zd-band" id="zdBand">
<span class="zd-star" aria-hidden="true"><svg viewBox="0 0 12 12" width="14" height="14"><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></span> <svg class="zd-sky" id="zdSky" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
<button class="modal-x" data-modal="close" aria-label="关闭">
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
</button>
<span class="zd-glyph" id="zdGlyph" aria-hidden="true"></span>
<h3 id="zdName"></h3> <h3 id="zdName"></h3>
<p class="zd-range" id="zdRange"></p> <p class="zd-range"><span class="zd-el" id="zdEl"></span><span id="zdRange"></span></p>
<div class="zd-switch" id="zdSwitch" hidden></div> <div class="zd-switch" id="zdSwitch" hidden></div>
<svg class="zd-motif" id="zdMotif" viewBox="0 0 375 56" preserveAspectRatio="none" aria-hidden="true"></svg>
</div> </div>
<p class="zd-words" id="zdWords"></p>
<div class="zd-sec zd-color"> <div class="zd-sec zd-color">
<i class="zd-sw" id="zdSw" aria-hidden="true"></i> <i class="zd-sw" aria-hidden="true"></i>
<div><span class="zd-label">宝宝幸运色</span><b id="zdColor"></b><p id="zdColorTip"></p></div> <div><span class="zd-label">宝宝幸运色</span><b id="zdColor"></b><p id="zdColorTip"></p></div>
</div> </div>
<div class="zd-sec"> <div class="zd-sec">
@@ -2028,6 +2034,7 @@
加载失败/离线时 window.wx 为 undefined，goMall() 会降级为 toast 提示， 加载失败/离线时 window.wx 为 undefined，goMall() 会降级为 toast 提示，
不影响应用其余功能。 --> 不影响应用其余功能。 -->
<script src="js/zodiac-art.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<!-- 2026-10-03 首页彩蛋：宝宝在肚皮底下动（独立文件，删掉这一行即整体下线；开关在「隐私权限」） --> <!-- 2026-10-03 首页彩蛋：宝宝在肚皮底下动（独立文件，删掉这一行即整体下线；开关在「隐私权限」） -->
<script src="js/bump.js"></script> <script src="js/bump.js"></script>

18
js/app.js
View File

@@ -3,7 +3,7 @@
(function () { (function () {
'use strict'; 'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */ /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100425'; var VER = '26100426';
const $ = (s, c) => (c || document).querySelector(s); const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -885,20 +885,34 @@
const M = $('#modalZodiac'); if (!M) return; const M = $('#modalZodiac'); if (!M) return;
function fill(n) { function fill(n) {
const z = ZODIAC[n]; if (!z) return; const z = ZODIAC[n]; if (!z) return;
const el_ = (window.ZODIAC_ELEMENT || {})[n] || 'fire', th = (window.ZODIAC_THEME || {})[el_] || {};
M.className = M.className.replace(/\bel-\w+/g, '').trim() + ' el-' + el_;
M.style.setProperty('--zc', z[2]); M.style.setProperty('--zc', z[2]);
if (th.band) { M.style.setProperty('--zb', th.band); M.style.setProperty('--zbody', th.body); M.style.setProperty('--zi', th.ink); }
$('#zdGlyph').innerHTML = window.zodiacIcon ? window.zodiacIcon(n, 30, 1.7) : '';
$('#zdName').textContent = n + '宝宝'; $('#zdName').textContent = n + '宝宝';
$('#zdEl').textContent = th.name || '';
$('#zdRange').textContent = z[0] + ' · 按预产期推算'; $('#zdRange').textContent = z[0] + ' · 按预产期推算';
$('#zdWords').textContent = th.words || '';
// 星图
const st = (window.ZODIAC_STARS || {})[n], sky = $('#zdSky');
sky.innerHTML = st ? st[1].map(([a, b]) => '<line x1="' + st[0][a][0] * 100 + '" y1="' + st[0][a][1] * 100 + '" x2="' + st[0][b][0] * 100 + '" y2="' + st[0][b][1] * 100 + '"/>').join('') +
st[0].map((p, i) => '<circle cx="' + p[0] * 100 + '" cy="' + p[1] * 100 + '" r="' + (1 + p[2] * 1.6).toFixed(2) + '" style="animation-delay:' + (i * .45 % 3).toFixed(2) + 's"/>').join('') : '';
const mo = (window.ZODIAC_MOTIF || {})[el_];
$('#zdMotif').innerHTML = mo ? mo.map(d => '<path d="' + d + '"/>').join('') : '';
$('#zdColor').textContent = z[1]; $('#zdColorTip').textContent = z[3]; $('#zdColor').textContent = z[1]; $('#zdColorTip').textContent = z[3];
const T = $('#zdTraits'); T.innerHTML = ''; z[4].forEach(t => T.appendChild(el('span', '', t))); const T = $('#zdTraits'); T.innerHTML = ''; z[4].forEach(t => T.appendChild(el('span', '', t)));
$('#zdPara').textContent = z[5]; $('#zdPara').textContent = z[5];
const J = $('#zdJobs'); J.innerHTML = ''; z[6].forEach(t => J.appendChild(el('span', '', t))); const J = $('#zdJobs'); J.innerHTML = ''; z[6].forEach(t => J.appendChild(el('span', '', t)));
M.scrollTop = 0;
} }
window.addEventListener('mb-zodiac', e => { window.addEventListener('mb-zodiac', e => {
const names = (e.detail && e.detail.names || []).filter(n => ZODIAC[n]); if (!names.length) return; const names = (e.detail && e.detail.names || []).filter(n => ZODIAC[n]); if (!names.length) return;
const sw = $('#zdSwitch'); sw.innerHTML = ''; const sw = $('#zdSwitch'); sw.innerHTML = '';
sw.hidden = names.length < 2; sw.hidden = names.length < 2;
if (names.length > 1) names.forEach((n, i) => { if (names.length > 1) names.forEach((n, i) => {
const b = el('button', i ? '' : 'on', n + '宝宝'); b.type = 'button'; const b = el('button', i ? '' : 'on'); b.type = 'button';
b.innerHTML = (window.zodiacIcon ? window.zodiacIcon(n, 12, 2.2) : '') + '<span>' + n + '宝宝</span>';
b.addEventListener('click', () => { $$('button', sw).forEach(x => x.classList.toggle('on', x === b)); fill(n); }); b.addEventListener('click', () => { $$('button', sw).forEach(x => x.classList.toggle('on', x === b)); fill(n); });
sw.appendChild(b); sw.appendChild(b);
}); });

4
js/hero-fx.js
View File

@@ -86,8 +86,8 @@
if (!due) { zEl.classList.remove('is-on'); return; } if (!due) { zEl.classList.remove('is-on'); return; }
const z = zodiacOf(due[0], due[1], due[2]); const z = zodiacOf(due[0], due[1], due[2]);
const pair = z.alt ? (z.prevAlt ? [z.alt, z.main] : [z.main, z.alt]) : [z.main]; const pair = z.alt ? (z.prevAlt ? [z.alt, z.main] : [z.main, z.alt]) : [z.main];
// 图标用自绘四角星：星座符号（♋ 之类）在部分安卓上没有字形，会显示成方框 // 图标：对应星座的自绘符号（js/zodiac-art.js；不用 ♋ 一类字符，部分安卓没有字形会成方框）
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>' + zEl.innerHTML = '<i>' + (window.zodiacIcon ? window.zodiacIcon(pair[0][2], 10, 2.6) : '') + '</i>' +
'<b>' + pair.map(x => x[2]).join('·') + '宝宝</b>'; '<b>' + pair.map(x => x[2]).join('·') + '宝宝</b>';
zNames = pair.map(x => x[2]); zNames = pair.map(x => x[2]);
zEl.setAttribute('aria-label', zNames.join('·') + '宝宝，点开看看'); zEl.setAttribute('aria-label', zNames.join('·') + '宝宝，点开看看');

62
js/zodiac-art.js Normal file
View File

@@ -0,0 +1,62 @@
/* 2026-10-04 星座宝宝的美术素材：12 个星座符号（自绘，部分安卓没有 ♋ 这类字形）、星图、四象配色与纹样。
首页小牌（js/hero-fx.js）和星座弹窗（js/app.js）共用，所以单独成文件、在 app.js 之前加载。 */
/* 星座符号（24×24，描边绘制，stroke=currentColor） */
window.ZODIAC_ICON = {
白羊: 'M12 20.5V9.5M12 9.5C12 5.5 9.8 3.6 7.6 3.6 5.6 3.6 4 5.1 4 7.1c0 1.8 1.3 3.1 3 3.1M12 9.5c0-4 2.2-5.9 4.4-5.9 2 0 3.6 1.5 3.6 3.5 0 1.8-1.3 3.1-3 3.1',
金牛: 'M4 4.2c1.2 3.4 4.2 5.4 8 5.4s6.8-2 8-5.4M12 9.6a5.2 5.2 0 1 0 0 10.4 5.2 5.2 0 0 0 0-10.4z',
双子: 'M4.5 4.2c4.6 1.6 10.4 1.6 15 0M4.5 19.8c4.6-1.6 10.4-1.6 15 0M9 5.4v13.2M15 5.4v13.2',
巨蟹: 'M5 8.6a2.4 2.4 0 1 0 4.8 0 2.4 2.4 0 0 0-4.8 0zM7.4 6.2C10.4 4.2 16 4.2 20 7.6M19 15.4a2.4 2.4 0 1 0-4.8 0 2.4 2.4 0 0 0 4.8 0zM16.6 17.8C13.6 19.8 8 19.8 4 16.4',
狮子: 'M5 15.6a3 3 0 1 0 6 0 3 3 0 0 0-6 0zM11 15.6C11 11 9.4 9.2 9.4 7.2a3.6 3.6 0 0 1 7.2 0c0 3.4-2.6 5.8-2.6 9.6 0 2 1.3 3.3 3 3.3 1.3 0 2.3-.7 2.9-1.7',
处女: 'M3.6 6.6c1.3 0 2.1.8 2.1 2.1V17M5.7 8.7c0-1.3.9-2.1 2.1-2.1s2.1.8 2.1 2.1V17M9.9 8.7c0-1.3.9-2.1 2.1-2.1s2.1.8 2.1 2.1v6.6c0 2.3 1.3 3.7 3.2 4.1M14.1 13c.9-2.3 2.7-3.3 4.1-2.6 1.6.8 1.1 3.7-1.1 5.8-1.2 1.1-2.6 1.9-3.4 2.2',
天秤: 'M4 19.2h16M4 15.4h4.4a3.8 3.8 0 1 1 7.2 0H20',
天蝎: 'M3.4 6.6c1.3 0 2.1.8 2.1 2.1V17M5.5 8.7c0-1.3.9-2.1 2.1-2.1s2.1.8 2.1 2.1V17M9.7 8.7c0-1.3.9-2.1 2.1-2.1s2.1.8 2.1 2.1v7.4c0 1.5.9 2.4 2.4 2.4h3.9M18.3 16.3l2.2 2.2-2.2 2.2',
射手: 'M5 19L19 5M12.2 5H19v6.8M7.6 11.4l5 5',
摩羯: 'M3.6 6.6c1.3 0 2.1.8 2.1 2.1V17M5.7 9c0-1.5 1-2.4 2.3-2.4S10.4 7.5 10.4 9v7c0 2 1.2 3.4 3 3.4M10.4 13.2c.9-1.9 2.4-2.9 4.2-2.9a3.1 3.1 0 1 1 0 6.2c-1.9 0-3.1-1.1-3.7-2.4',
水瓶: 'M3 10.4l3-2.6 3 2.6 3-2.6 3 2.6 3-2.6 3 2.6M3 16.2l3-2.6 3 2.6 3-2.6 3 2.6 3-2.6 3 2.6',
双鱼: 'M6.2 4c3.2 3.4 3.2 12.6 0 16M17.8 4c-3.2 3.4-3.2 12.6 0 16M4.6 12h14.8'
};
/* 星图（星座的真实连线，示意位置，0~1 归一化）：[星点[x,y,亮度0~1], 连线[i,j]] —— 弹窗顶部右上角淡淡地画出来 */
window.ZODIAC_STARS = {
白羊: [[[.1,.62,.6],[.46,.42,1],[.7,.4,.8],[.84,.54,.5]], [[0,1],[1,2],[2,3]]],
金牛: [[[.5,.62,1],[.42,.52,.6],[.36,.44,.5],[.56,.5,.6],[.62,.42,.5],[.12,.16,.8],[.88,.22,.7],[.72,.78,.4]], [[0,1],[1,2],[2,5],[0,3],[3,4],[4,6],[0,7]]],
双子: [[[.3,.14,1],[.56,.12,.9],[.27,.48,.6],[.55,.48,.6],[.2,.86,.5],[.62,.86,.5],[.12,.62,.4]], [[0,2],[2,4],[1,3],[3,5],[2,3],[2,6]]],
巨蟹: [[[.5,.46,.7],[.46,.16,.6],[.24,.82,.8],[.78,.78,.6]], [[0,1],[0,2],[0,3]]],
狮子: [[[.2,.64,1],[.22,.44,.6],[.3,.28,.7],[.44,.22,.6],[.5,.34,.5],[.62,.46,.6],[.88,.52,.8],[.62,.64,.5]], [[0,1],[1,2],[2,3],[3,4],[1,5],[5,6],[6,7],[7,0]]],
处女: [[[.12,.28,.5],[.32,.36,.6],[.5,.3,.6],[.56,.52,.7],[.78,.74,1],[.4,.56,.5],[.3,.78,.5]], [[0,1],[1,2],[2,3],[3,4],[3,5],[5,6]]],
天秤: [[[.5,.14,.9],[.24,.4,.8],[.76,.44,.7],[.3,.82,.5],[.7,.86,.5]], [[0,1],[0,2],[1,2],[1,3],[2,4]]],
天蝎: [[[.14,.18,.6],[.2,.3,.6],[.1,.4,.5],[.34,.4,1],[.44,.5,.6],[.5,.66,.6],[.56,.8,.6],[.7,.88,.6],[.83,.8,.7],[.86,.66,.6]], [[0,1],[1,2],[1,3],[3,4],[4,5],[5,6],[6,7],[7,8],[8,9]]],
射手: [[[.28,.52,.7],[.44,.4,.8],[.6,.44,.7],[.7,.32,.6],[.82,.5,.8],[.66,.66,.7],[.44,.66,.6]], [[0,1],[1,2],[2,3],[2,4],[4,5],[5,6],[6,0],[6,1],[2,5]]],
摩羯: [[[.1,.3,.8],[.38,.46,.6],[.86,.24,.7],[.72,.64,.6],[.36,.76,.6]], [[0,1],[1,2],[2,3],[3,4],[4,0]]],
水瓶: [[[.1,.3,.6],[.28,.24,.7],[.44,.36,.8],[.56,.3,.5],[.62,.52,.6],[.76,.7,.6],[.88,.86,.5],[.5,.62,.5]], [[0,1],[1,2],[2,3],[2,4],[4,5],[5,6],[4,7]]],
双鱼: [[[.08,.2,.5],[.16,.14,.5],[.2,.26,.5],[.3,.38,.6],[.5,.58,.6],[.66,.84,.9],[.74,.62,.6],[.8,.42,.6],[.9,.3,.5]], [[0,1],[1,2],[2,0],[2,3],[3,4],[4,5],[5,6],[6,7],[7,8]]]
};
/* 四象：星座 → 元素；元素 → 配色与纹样（弹窗用） */
window.ZODIAC_ELEMENT = { 白羊: 'fire', 狮子: 'fire', 射手: 'fire', 金牛: 'earth', 处女: 'earth', 摩羯: 'earth',
双子: 'air', 天秤: 'air', 水瓶: 'air', 巨蟹: 'water', 天蝎: 'water', 双鱼: 'water' };
window.ZODIAC_THEME = {
fire: { name: '火象星座', words: '热情 · 勇敢 · 有行动力', band: 'linear-gradient(160deg,#FFA275 0%,#F0704A 48%,#C8443A 100%)', body: '#FFF7F2', ink: '#D9583C' },
earth: { name: '土象星座', words: '踏实 · 温和 · 很靠得住', band: 'linear-gradient(160deg,#D8C092 0%,#AE9263 50%,#77704C 100%)', body: '#FAF6EE', ink: '#8E7448' },
air: { name: '风象星座', words: '灵动 · 聪明 · 爱交朋友', band: 'linear-gradient(160deg,#CFE3F7 0%,#A3BDEC 50%,#8C93DC 100%)', body: '#F5F7FD', ink: '#6A79CC' },
water: { name: '水象星座', words: '温柔 · 细腻 · 很有感知力', band: 'linear-gradient(160deg,#86D3DE 0%,#4C9FC6 50%,#33669F 100%)', body: '#F2F8FB', ink: '#2F7FAD' }
};
/* 头部底边纹样：最下一层用正文底色填，头部就「长」进正文里；上面两层半透明白做层次。viewBox 0 0 375 56 */
window.ZODIAC_MOTIF = {
fire: ['M0 56V40 C10.4 40.0 13.8 30.1 18.8 22.0 C21.8 31.0 33.3 40.0 41.7 40.0 C52.1 40.0 58.5 23.6 63.5 10.1 C66.5 25.1 75.0 40.0 83.3 40.0 C93.8 40.0 92.9 28.4 97.9 18.9 C100.9 29.5 116.7 40.0 125.0 40.0 C135.4 40.0 141.2 24.0 146.2 10.9 C149.2 25.4 158.3 40.0 166.7 40.0 C177.1 40.0 181.3 26.8 186.3 16.1 C189.3 28.0 200.0 40.0 208.3 40.0 C218.7 40.0 218.4 24.8 223.4 12.4 C226.4 26.2 241.7 40.0 250.0 40.0 C260.4 40.0 267.7 25.5 272.7 13.6 C275.7 26.8 283.3 40.0 291.7 40.0 C302.1 40.0 303.8 26.0 308.8 14.6 C311.8 27.3 325.0 40.0 333.3 40.0 C343.8 40.0 345.3 24.4 350.3 11.7 C353.3 25.8 366.7 40.0 375.0 40.0 V56z',
'M0 56V46 C8.5 46.0 13.9 35.2 18.6 26.3 C21.5 36.1 27.3 46.0 34.1 46.0 C42.6 46.0 43.2 38.8 47.9 32.9 C50.8 39.4 61.4 46.0 68.2 46.0 C76.7 46.0 77.5 35.0 82.2 26.0 C85.1 36.0 95.5 46.0 102.3 46.0 C110.8 46.0 116.0 38.9 120.8 33.1 C123.7 39.5 129.5 46.0 136.4 46.0 C144.9 46.0 143.9 35.1 148.7 26.2 C151.6 36.1 163.6 46.0 170.5 46.0 C179.0 46.0 181.8 37.8 186.6 31.1 C189.4 38.5 197.7 46.0 204.5 46.0 C213.1 46.0 217.1 35.5 221.8 27.0 C224.7 36.5 231.8 46.0 238.6 46.0 C247.2 46.0 245.8 36.8 250.6 29.3 C253.5 37.6 265.9 46.0 272.7 46.0 C281.2 46.0 285.9 36.2 290.6 28.2 C293.5 37.1 300.0 46.0 306.8 46.0 C315.3 46.0 317.4 36.0 322.1 27.8 C325.0 36.9 334.1 46.0 340.9 46.0 C349.4 46.0 349.0 37.1 353.7 29.8 C356.6 37.9 368.2 46.0 375.0 46.0 V56z',
'M0 56V50c30-3 60-6 94-4s62 5 94 3 62-6 94-4 62 5 93 3V56z'],
earth: ['M0 56V30l38-18 30 14 44-24 36 20 28-10 46 26 34-16 40 18 30-12 49 22V56z',
'M0 56V40l46-14 34 10 40-16 42 16 30-6 42 14 38-12 36 12 34-8 33 12V56z',
'M0 56V48c40-6 80-8 125-4s90 6 130 0 80-6 120-2V56z'],
air: ['M0 56V38c18 0 22-14 40-14s22 12 38 12 18-16 38-16 24 14 40 14 20-12 38-12 22 14 40 14 20-14 38-14 22 12 40 12 18-10 30-10 18 10 33 10V56z',
'M0 56V44c22 0 30-10 52-10s28 10 48 10 28-12 50-12 30 12 50 12 28-10 50-10 30 10 50 10 26-8 42-8 22 8 33 8V56z',
'M0 56V49c30 0 50-5 80-5s48 6 78 6 50-6 80-6 48 5 78 5 40-4 59-4V56z'],
water: ['M0 56V36c22 0 26-12 47-12s25 12 47 12 25-12 47-12 25 12 47 12 25-12 47-12 25 12 47 12 25-12 47-12 25 12 46 12V56z',
'M0 56V43c24 0 28-9 50-9s27 9 50 9 27-9 50-9 27 9 50 9 27-9 50-9 27 9 50 9 27-9 50-9 26 9 25 9V56z',
'M0 56V49c26 0 30-6 54-6s28 6 54 6 28-6 54-6 28 6 54 6 28-6 54-6 28 6 54 6 26-5 51-5V56z']
};
window.zodiacIcon = function (n, w, sw) {
const d = window.ZODIAC_ICON[n]; if (!d) return '';
return '<svg viewBox="0 0 24 24" width="' + w + '" height="' + w + '" fill="none" stroke="currentColor" stroke-width="' + (sw || 2) + '" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path fill="none" d="' + d + '"/></svg>';
};

56
mama-box.css
View File

@@ -4547,33 +4547,47 @@ a.skip:focus{left:16px;top:16px}
.hero-zod::before{content:"";position:absolute;inset:-10px -6px} /* 牌子只有 20px 高，点击区放大一圈 */ .hero-zod::before{content:"";position:absolute;inset:-10px -6px} /* 牌子只有 20px 高，点击区放大一圈 */
.hero-zod:active{transform:scale(.96)} .hero-zod:active{transform:scale(.96)}
/* ============ 2026-10-04 星座宝宝弹窗 #modalZodiac ============ /* ============ 2026-10-04 星座宝宝弹窗 #modalZodiac（二版：四象主题） ============
米白底；顶部一团幸运色的柔光（--zc，JS 按星座写）；三段用细线分隔，字号克制（标题 20、正文 13.5）。 */ JS 写四个变量：--zc 幸运色、--zb 头带渐变、--zbody 正文底色、--zi 元素主色（小标题 / 标签 / 星座符号）。 */
.zd-modal{--zc:#E8A33D;overflow:hidden;padding-top:26px;max-height:88vh;overflow-y:auto} .zd-modal{--zc:#E8A33D;--zb:linear-gradient(160deg,#FFA275,#C8443A);--zbody:#FFF7F2;--zi:#D9583C;
.zd-glow{position:absolute;left:50%;top:-120px;width:340px;height:220px;margin-left:-170px;border-radius:50%; background:var(--zbody);padding-top:0;max-height:88vh;overflow-y:auto;overflow-x:hidden}
background:radial-gradient(closest-side,var(--zc),transparent);opacity:.32;filter:blur(8px);pointer-events:none} .zd-band{position:relative;margin:0 -22px;padding:24px 22px 58px;text-align:center;color:#fff;background:var(--zb);border-radius:28px 28px 0 0;overflow:hidden}
.zd-modal .modal-x{position:absolute;right:16px;top:16px;z-index:2} .zd-band::before{content:"";position:absolute;left:-30%;top:-60%;width:90%;height:140%;border-radius:50%;
.zd-head{position:relative;text-align:center} background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);pointer-events:none}
.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); .zd-sky{position:absolute;right:6px;top:8px;width:150px;height:118px;opacity:.85;pointer-events:none}
box-shadow:0 4px 14px rgba(150,80,50,.14)} .zd-sky line{stroke:rgba(255,255,255,.42);stroke-width:.6}
.zd-head h3{margin:8px 0 2px;font-size:20px;font-weight:800;letter-spacing:2px;color:var(--ink)} .zd-sky circle{fill:#fff;animation:zdTw 3.2s ease-in-out infinite}
.zd-range{margin:0;font-size:11.5px;letter-spacing:.5px;color:var(--muted)} @keyframes zdTw{0%,100%{opacity:.95}50%{opacity:.35}}
.zd-band .modal-x{position:absolute;left:14px;right:auto;top:14px;z-index:2;background:rgba(255,255,255,.22);color:#fff}
.zd-glyph{position:relative;display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;margin-top:2px;
background:rgba(255,255,255,.2);border:.5px solid rgba(255,255,255,.6);color:#fff;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 8px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.5)}
.zd-band h3{position:relative;margin:10px 0 4px;font-size:21px;font-weight:800;letter-spacing:3px;text-shadow:0 1px 6px rgba(0,0,0,.12)}
.zd-range{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;margin:0;font-size:11.5px;letter-spacing:.5px;color:rgba(255,255,255,.88)}
.zd-el{padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.22);border:.5px solid rgba(255,255,255,.5);font-weight:700;letter-spacing:1px;color:#fff}
.zd-switch[hidden]{display:none} .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{position:relative;display:inline-flex;gap:4px;margin-top:12px;padding:3px;border-radius:999px;background:rgba(255,255,255,.18);border:.5px solid rgba(255,255,255,.45)}
.zd-switch button{height:24px;padding:0 12px;border:0;border-radius:999px;background:none;font-size:12px;color:var(--muted)} .zd-switch button{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 11px;border:0;border-radius:999px;background:none;font-size:12px;color:rgba(255,255,255,.9)}
.zd-switch button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(120,70,50,.12)} .zd-switch button.on{background:#fff;color:var(--zi);font-weight:700}
.zd-sec{position:relative;margin-top:16px;padding-top:14px;border-top:.5px solid #EADDD3} .zd-motif{position:absolute;left:0;bottom:-1px;width:100%;height:46px}
.zd-label{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:1.5px;color:#B49A8A} .zd-motif path:nth-child(1){fill:rgba(255,255,255,.14)}
.zd-color{display:flex;align-items:center;gap:14px} .zd-motif path:nth-child(2){fill:rgba(255,255,255,.22)}
.zd-motif path:nth-child(3){fill:var(--zbody)}
.zd-modal.el-water .zd-motif,.zd-modal.el-air .zd-motif{animation:zdDrift 7s ease-in-out infinite alternate}
@keyframes zdDrift{from{transform:translateX(-6px) scaleX(1.04)}to{transform:translateX(6px) scaleX(1.04)}}
.zd-words{margin:2px 0 0;text-align:center;font-size:12px;letter-spacing:2px;color:var(--zi);opacity:.85}
.zd-sec{position:relative;margin-top:16px;padding-top:14px;border-top:.5px solid color-mix(in srgb,var(--zi) 18%,transparent)}
.zd-label{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:1.5px;color:var(--zi)}
.zd-color{display:flex;align-items:center;gap:14px;padding:14px;margin-top:14px;border-top:0;border-radius:16px;background:rgba(255,255,255,.7)}
.zd-color .zd-label{margin-bottom:3px} .zd-color .zd-label{margin-bottom:3px}
.zd-sw{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--zc); .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)} 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(0,0,0,.1)}
.zd-color b{display:block;font-size:16px;font-weight:800;letter-spacing:1px;color:var(--ink)} .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-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{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); .zd-tags span{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--zi);
background:color-mix(in srgb,var(--zc) 16%,#fff);border:.5px solid color-mix(in srgb,var(--zc) 35%,#fff)} background:color-mix(in srgb,var(--zi) 10%,#fff);border:.5px solid color-mix(in srgb,var(--zi) 28%,#fff)}
.zd-para{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-2)} .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{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-jobs span{padding:6px 12px;border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink-2);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.zd-foot{margin:18px 0 2px;text-align:center;font-size:11px;color:#BCAEA4} .zd-foot{margin:18px 0 2px;text-align:center;font-size:11px;color:#BCAEA4}