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

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-10-21 04:25:45 +00:00
parent 85dead6281
commit b2ab8368e7
3 changed files with 15 additions and 6 deletions

View File

@@ -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}' +
@@ -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 = ''; }
@@ -165,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">' +
@@ -176,7 +185,7 @@
[['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>');
}