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

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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: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">
 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 <!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -1771,18 +1771,24 @@
   <!-- 星座宝宝（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">
-    <div class="zd-glow" id="zdGlow" aria-hidden="true"></div>
-    <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>
-    <div class="zd-head">
-      <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>
+    <!-- 2026-10-04 二版（用户：「弹出的页面重新设计，要有针对星座的设计感，背景色按火象、水象这些」）：
+         顶部一条按四象配色的头带（火 / 土 / 风 / 水），右上角淡淡画出这个星座的星图（星星会闪），
+         正中玻璃圆里是星座符号；头带底边是元素纹样（火焰 / 山脊 / 云 / 水波），最下一层用正文底色填，头带「长」进正文。
+         素材在 js/zodiac-art.js。 -->
+    <div class="zd-band" id="zdBand">
+      <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>
-      <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>
+      <svg class="zd-motif" id="zdMotif" viewBox="0 0 375 56" preserveAspectRatio="none" aria-hidden="true"></svg>
     </div>
+    <p class="zd-words" id="zdWords"></p>
     <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>
     <div class="zd-sec">
@@ -2028,6 +2034,7 @@
      加载失败/离线时 window.wx 为 undefined，goMall() 会降级为 toast 提示，
      不影响应用其余功能。 -->
 
+<script src="js/zodiac-art.js"></script>
 <script src="js/app.js"></script>
 <!-- 2026-10-03 首页彩蛋：宝宝在肚皮底下动（独立文件，删掉这一行即整体下线；开关在「隐私权限」） -->
 <script src="js/bump.js"></script>