孕期首页登记出生：改为底部大半弹窗（占屏 90%，中间滚动、按钮钉底、× 和点遮罩可关），不再整页切换

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:26102103 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26102105 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <link rel="stylesheet" href="night.css">
 <!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -2050,7 +2050,7 @@
 <!-- 2026-10-05 首页头图：宝宝时不时动一动小手小脚（独立文件，删掉这一行即下线） -->
 <script src="js/baby-limbs.js?v=26101201"></script>
 <script src="js/coach.js?v=26101211"></script>
-<script src="js/birth-flow.js?v=26102106"></script>
+<script src="js/birth-flow.js?v=26102108"></script>
 
 <!-- 禁止下拉回弹（2026-10-11 统一规则，与孕期体重同一段）：竖向拖动时从手指下往上找还能朝该方向滚的容器，找不到才拦；横滑、双指、可滚列表不受影响 -->
 <script>

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26102103';
+  var VER = '26102105';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 

js/birth-flow.js

@@ -72,6 +72,15 @@
     '.bf-hero h2{font-size:22px;margin:0;color:#24372B;letter-spacing:.5px}' +
     '.bf-hero p{font-size:13px;color:#55695C;margin:8px 0 0;line-height:1.65}' +
     '.bf-form{position:relative;padding:18px 16px 170px}' +
+    /* 2026-10-21 用户：点「宝宝出生了」从底部出大半弹窗，不换新页面 → .bf-rs 占屏 90%，中间滚、按钮钉底 */
+    '.bf-rs{position:relative;width:100%;height:90%;min-height:0;max-height:calc(100% - 36px);border-radius:24px 24px 0 0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 -10px 30px rgba(20,40,28,.18);animation:bfRsUp .34s cubic-bezier(.2,.8,.2,1)}' +
+    '@keyframes bfRsUp{from{transform:translateY(100%)}to{transform:none}}' +
+    '.bf-rs-body{flex:1;min-height:0;position:relative;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}' +
+    '.bf-rs .bf-hero{padding-top:30px}.bf-rs .bf-moon{width:92px;height:92px}' +
+    '.bf-rs .bf-form{padding-bottom:8px}' +
+    '.bf-rs .bf-foot{position:static;flex:none;padding-top:10px;background:#F6FAF7;box-shadow:0 -6px 16px rgba(246,250,247,.95)}' +
+    '.bf-grab{position:absolute;z-index:3;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(36,55,43,.18)}' +
+    '.bf-x{position:absolute;z-index:3;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.7);color:#55695C;font-size:20px;line-height:32px;padding:0;font-family:inherit}' +
     '.bf-card2{background:rgba(255,255,255,.92);border-radius:20px;padding:4px 16px;box-shadow:0 8px 26px rgba(50,110,75,.12);border:1px solid rgba(255,255,255,.9)}' +
     '.bf-fld{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #E4F1E9;width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;font-family:inherit;color:inherit}' +
     '.bf-fld:last-child{border-bottom:0}' +
@@ -84,7 +93,7 @@
     '.bf-fld input::placeholder{color:#B3C7B9;font-weight:500}' +
     '.bf-sexs{display:flex;gap:10px;padding:4px 0 16px}' +
     '.bf-sexs button{flex:1;border:1.5px solid #D7E8DD;background:#fff;border-radius:16px;padding:12px 0 10px;font-size:13.5px;color:#4A5F51;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .2s}' +
-    '.bf-sexs button i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px;font-weight:800;color:#fff}' +
+    '.bf-sexs button i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;line-height:0}.bf-sexs button i svg{display:block;fill:none}' +
     '.bf-sexs .s-boy i{background:#6FA3DD}.bf-sexs .s-girl i{background:#F29BB5}.bf-sexs .s-unknown i{background:#BDCDC2}' +
     '.bf-sexs button.on{border-color:#3A7A52;background:#EAF5EE;color:#24372B;font-weight:700;box-shadow:0 4px 12px rgba(50,110,75,.18)}' +
     '.bf-sexs .s-girl.on{border-color:#E57FA0;background:#FDF0F4}' +
@@ -129,7 +138,7 @@
   /* ---------- 浮层 ---------- */
   var ov = document.createElement('div'); ov.className = 'bf-ov'; document.body.appendChild(ov);
   /* 浮层里滑动不带动后面的首页（禁止下拉回弹规则） */
-  ov.addEventListener('touchmove', function (e) { if (!e.target.closest('.bf-page,.bf-wh')) e.preventDefault(); }, { passive: false });
+  ov.addEventListener('touchmove', function (e) { if (!e.target.closest('.bf-page,.bf-rs-body,.bf-wh')) e.preventDefault(); }, { passive: false });
   function show(html, cls) { ov.innerHTML = html; ov.className = 'bf-ov on' + (cls ? ' ' + cls : ''); }
   function hide() { ov.className = 'bf-ov'; ov.innerHTML = ''; }
 
@@ -148,6 +157,12 @@
     name: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3A7A52" stroke-width="1.9" stroke-linecap="round"><path d="M12 20s-6.5-4-6.5-9.2A3.8 3.8 0 0 1 12 8.3a3.8 3.8 0 0 1 6.5 2.5C18.5 16 12 20 12 20z"/></svg>',
     sex: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3A7A52" stroke-width="1.9" stroke-linecap="round"><circle cx="12" cy="9" r="4.5"/><path d="M5.5 20c1.2-3.4 3.6-5 6.5-5s5.3 1.6 6.5 5"/></svg>'
   };
+  /* 性别小标志用 SVG 画、按 24×24 几何居中（2026-10-21 用户：♂♀ 字符在圆里没居中——字体字形本身偏心） */
+  var SEX = {
+    boy: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="14" r="5.5"/><path d="M13.9 10.1L19.5 4.5M14.5 4.5h5v5"/></svg>',
+    girl: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"><circle cx="12" cy="8" r="5.5"/><path d="M12 13.5v8M8.5 18h7"/></svg>',
+    unknown: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 7.4a3.5 3.5 0 0 1 6.8 1.1c0 2.4-3.4 2.9-3.4 5"/><circle cx="12" cy="18" r=".6" fill="#fff"/></svg>'
+  };
   function dateTxt(d) {
     var t = midnight(new Date()), n = Math.round((t - d) / 864e5);
     var tag = n === 0 ? '今天' : n === 1 ? '昨天' : n === 2 ? '前天' : '出生第 ' + (n + 1) + ' 天';
@@ -159,7 +174,7 @@
     var stars = '';
     [[12, 18, 6], [80, 12, 4], [64, 30, 5], [24, 44, 3], [90, 40, 6]].forEach(function (x, i) { stars += '<i style="left:' + x[0] + '%;top:' + x[1] + '%;width:' + x[2] * 6 + 'px;height:' + x[2] * 2.4 + 'px"></i>'; });
     [[8, 30], [88, 22], [72, 8], [30, 12], [50, 46]].forEach(function (x, i) { stars += '<b style="left:' + x[0] + '%;top:' + x[1] + '%;animation-delay:' + i * .5 + 's"><svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 0l1.4 4.6L12 6 7.4 7.4 6 12 4.6 7.4 0 6l4.6-1.4z" fill="#fff"/></svg></b>'; });
-    show('<div class="bf-page bf-reg"><div class="bf-sky">' + stars + '</div>' +
+    show('<div class="bf-rs bf-reg"><i class="bf-grab"></i><button class="bf-x" data-bf="close" aria-label="关闭">×</button><div class="bf-rs-body"><div class="bf-sky">' + stars + '</div>' +
       '<div class="bf-hero"><div class="bf-moon">' + MOON + '</div><h2>欢迎宝宝来到这个世界</h2>' +
       '<p>告诉我们宝宝的生日，首页就换成育儿模式<br>孕期的点点滴滴，都会好好留着</p></div>' +
       '<div class="bf-form"><div class="bf-card2">' +
@@ -167,10 +182,10 @@
       '<label class="bf-fld"><span class="bf-fi">' + ICO.name + '</span><span class="bf-fb"><span class="bf-fl">宝宝小名</span><input id="bfName" maxlength="12" placeholder="给宝宝起个小名吧" value="' + esc(S.babyName) + '"></span></label>' +
       '<div class="bf-fld" style="padding-bottom:6px"><span class="bf-fi">' + ICO.sex + '</span><span class="bf-fb"><span class="bf-fl">宝宝性别</span></span></div>' +
       '<div class="bf-sexs" id="bfSex">' +
-      [['boy', '男孩', '♂'], ['girl', '女孩', '♀'], ['unknown', '先不说', '?']].map(function (p) { return '<button class="s-' + p[0] + (p[0] === sex ? ' on' : '') + '" data-sex="' + p[0] + '"><i>' + p[2] + '</i>' + p[1] + '</button>'; }).join('') +
+      [['boy', '男孩', SEX.boy], ['girl', '女孩', SEX.girl], ['unknown', '先不说', SEX.unknown]].map(function (p) { return '<button class="s-' + p[0] + (p[0] === sex ? ' on' : '') + '" data-sex="' + p[0] + '"><i>' + p[2] + '</i>' + p[1] + '</button>'; }).join('') +
       '</div></div>' +
       '<div class="bf-tip"><svg width="14" height="14" viewBox="0 0 24 24" style="flex:none;margin-top:2px"><path d="M12 21s-7.5-4.6-7.5-10.6A4.4 4.4 0 0 1 12 7.6a4.4 4.4 0 0 1 7.5 2.8C19.5 16.4 12 21 12 21z" fill="#86C6A0"/></svg><span>只有出生日期必填，小名和性别以后在育儿首页「我的」里也能改。</span></div>' +
-      '<div class="bf-err" id="bfErr"></div></div>' +
+      '<div class="bf-err" id="bfErr"></div></div></div>' +
       '<div class="bf-foot"><button class="bf-btn green" data-bf="submit" id="bfSubmit">完成，切换到育儿模式</button><button class="bf-btn ghost b" data-bf="close">先不切换</button></div></div>');
   }