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

孕期首页登记出生页：配色由蓝改为育儿首页的海盐薄荷绿

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-10-21 03:08:23 +00:00
parent a5f1401938
commit 00a0b6e58f
3 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
js/birth-flow.js
View File

@@ -59,55 +59,55 @@
'.bf-btn[disabled]{opacity:.6}' +
'.bf-page{position:absolute;inset:0;background:#F8F3EF;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;animation:bfIn .25s ease}' +
'@keyframes bfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}' +
/* ③ 登记页：海盐蓝（和育儿首页同色系 #4E85C7 / #5B86D0，配浅青），迎接宝宝的感觉 */
'.bf-reg{min-height:100%;background:linear-gradient(180deg,#DCEBFA 0%,#EEF6FD 34%,#F6FAFE 62%,#F3FAF8 100%)}' +
'.bf-reg .bf-foot{background:linear-gradient(180deg,rgba(243,250,248,0),#F3FAF8 35%)}' +
/* ③ 登记页：海盐蓝（和育儿首页同色系 #3A7A52 / #5B86D0，配浅青），迎接宝宝的感觉 */
'.bf-reg{min-height:100%;background:linear-gradient(180deg,#CBEBD8 0%,#E8F4EC 34%,#F1F7F2 62%,#F6FAF7 100%)}' +
'.bf-reg .bf-foot{background:linear-gradient(180deg,rgba(246,250,247,0),#F6FAF7 35%)}' +
'.bf-reg .bf-sky{position:absolute;left:0;right:0;top:0;height:260px;pointer-events:none;overflow:hidden}' +
'.bf-reg .bf-sky i{position:absolute;border-radius:50%;background:#fff;opacity:.55;filter:blur(1px)}' +
'.bf-reg .bf-sky b{position:absolute;color:#fff;font-size:12px;opacity:.9;animation:bfTw 2.6s ease-in-out infinite alternate}' +
'@keyframes bfTw{from{opacity:.25;transform:scale(.8)}to{opacity:.95;transform:scale(1.1)}}' +
'.bf-hero{position:relative;padding:calc(26px + env(safe-area-inset-top)) 22px 6px;text-align:center}' +
'.bf-moon{width:104px;height:104px;margin:0 auto 12px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFFFFF,#E7F1FC 62%,#D3E5F8);box-shadow:0 10px 30px rgba(78,133,199,.25),inset 0 -6px 14px rgba(78,133,199,.12);display:flex;align-items:center;justify-content:center;animation:bfFloat 3.4s ease-in-out infinite alternate}' +
'.bf-moon{width:104px;height:104px;margin:0 auto 12px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFFFFF,#E6F4EB 62%,#CDE8D7);box-shadow:0 10px 30px rgba(50,110,75,.25),inset 0 -6px 14px rgba(50,110,75,.12);display:flex;align-items:center;justify-content:center;animation:bfFloat 3.4s ease-in-out infinite alternate}' +
'@keyframes bfFloat{to{transform:translateY(-6px)}}' +
'.bf-hero h2{font-size:22px;margin:0;color:#24456B;letter-spacing:.5px}' +
'.bf-hero p{font-size:13px;color:#5E7894;margin:8px 0 0;line-height:1.65}' +
'.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}' +
'.bf-card2{background:rgba(255,255,255,.92);border-radius:20px;padding:4px 16px;box-shadow:0 8px 26px rgba(78,133,199,.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 #EAF1F8;width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;font-family:inherit;color: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}' +
'.bf-fld .bf-fi svg *{fill:none}.bf-fld .bf-fi svg circle[fill]{fill:#4E85C7}.bf-fld .bf-fi{flex:none;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#E6F0FB}' +
'.bf-fld .bf-fi svg *{fill:none}.bf-fld .bf-fi svg circle[fill]{fill:#3A7A52}.bf-fld .bf-fi{flex:none;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#D8EFE1}' +
'.bf-fld .bf-fb{flex:1;min-width:0}' +
'.bf-fld .bf-fl{display:block;font-size:12px;color:#7D93AB;margin-bottom:3px}.bf-fld .bf-fl em{font-style:normal;color:#4E85C7;font-weight:700;margin-left:4px}' +
'.bf-fld .bf-fv{display:block;font-size:16.5px;font-weight:700;color:#24456B}.bf-fld .bf-fv small{font-size:12px;font-weight:500;color:#7D93AB;margin-left:6px}' +
'.bf-fld .bf-fa{flex:none;color:#A9BCD0;font-size:20px}' +
'.bf-fld input{width:100%;border:0;outline:0;background:transparent;font-size:16.5px;font-weight:700;color:#24456B;font-family:inherit;padding:0;-webkit-appearance:none;appearance:none}' +
'.bf-fld input::placeholder{color:#B6C6D6;font-weight:500}' +
'.bf-fld .bf-fl{display:block;font-size:12px;color:#6B8072;margin-bottom:3px}.bf-fld .bf-fl em{font-style:normal;color:#3A7A52;font-weight:700;margin-left:4px}' +
'.bf-fld .bf-fv{display:block;font-size:16.5px;font-weight:700;color:#24372B}.bf-fld .bf-fv small{font-size:12px;font-weight:500;color:#6B8072;margin-left:6px}' +
'.bf-fld .bf-fa{flex:none;color:#9DB8A6;font-size:20px}' +
'.bf-fld input{width:100%;border:0;outline:0;background:transparent;font-size:16.5px;font-weight:700;color:#24372B;font-family:inherit;padding:0;-webkit-appearance:none;appearance:none}' +
'.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 #E1EAF4;background:#fff;border-radius:16px;padding:12px 0 10px;font-size:13.5px;color:#4B6380;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .2s}' +
'.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 .s-boy i{background:#6FA3DD}.bf-sexs .s-girl i{background:#F29BB5}.bf-sexs .s-unknown i{background:#BFCBD8}' +
'.bf-sexs button.on{border-color:#4E85C7;background:#EEF5FD;color:#24456B;font-weight:700;box-shadow:0 4px 12px rgba(78,133,199,.18)}' +
'.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}' +
'.bf-tip{display:flex;gap:8px;align-items:flex-start;margin:14px 4px 0;font-size:12px;color:#7D93AB;line-height:1.6}' +
'.bf-tip{display:flex;gap:8px;align-items:flex-start;margin:14px 4px 0;font-size:12px;color:#6B8072;line-height:1.6}' +
'.bf-err{font-size:12.5px;color:#D9442B;min-height:18px;margin:8px 4px 0}' +
'.bf-btn.blue{background:linear-gradient(100deg,#5B8FD6,#4479C2);box-shadow:0 8px 20px rgba(68,121,194,.3)}' +
'.bf-btn.ghost.b{color:#7D93AB}' +
'.bf-btn.green{background:linear-gradient(100deg,#6DB088,#3A7A52);box-shadow:0 8px 20px rgba(58,122,82,.3)}' +
'.bf-btn.ghost.b{color:#6B8072}' +
/* 底部日期滚轮 */
'.bf-dmask{position:fixed;inset:0;z-index:2;background:rgba(20,35,55,.42);display:flex;align-items:flex-end;animation:bfFade .2s ease}' +
'.bf-dmask{position:fixed;inset:0;z-index:2;background:rgba(20,40,28,.42);display:flex;align-items:flex-end;animation:bfFade .2s ease}' +
'@keyframes bfFade{from{opacity:0}}' +
'.bf-dsheet{width:100%;background:#fff;border-radius:22px 22px 0 0;padding:6px 0 calc(16px + env(safe-area-inset-bottom));animation:bfUp .28s ease}' +
'.bf-dhd{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 4px}' +
'.bf-dhd b{font-size:16px;color:#24456B}.bf-dhd button{border:0;background:none;font-size:15px;font-family:inherit;padding:6px 2px;color:#7D93AB}' +
'.bf-dhd .ok{color:#4479C2;font-weight:700}' +
'.bf-dquick{display:flex;gap:8px;padding:6px 18px 2px}.bf-dquick button{border:1px solid #DCE7F3;background:#F5F9FD;color:#4B6380;border-radius:99px;padding:5px 12px;font-size:12.5px;font-family:inherit}' +
'.bf-dhd b{font-size:16px;color:#24372B}.bf-dhd button{border:0;background:none;font-size:15px;font-family:inherit;padding:6px 2px;color:#6B8072}' +
'.bf-dhd .ok{color:#3A7A52;font-weight:700}' +
'.bf-dquick{display:flex;gap:8px;padding:6px 18px 2px}.bf-dquick button{border:1px solid #D5E8DC;background:#F3F9F5;color:#4A5F51;border-radius:99px;padding:5px 12px;font-size:12.5px;font-family:inherit}' +
'.bf-wheels{position:relative;display:flex;height:220px;margin:6px 12px 0;overflow:hidden}' +
'.bf-wheels::before{content:"";position:absolute;left:0;right:0;top:88px;height:44px;border-radius:12px;background:#EEF5FD;pointer-events:none}' +
'.bf-wheels::before{content:"";position:absolute;left:0;right:0;top:88px;height:44px;border-radius:12px;background:#EAF5EE;pointer-events:none}' +
'.bf-wheels::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 36%,rgba(255,255,255,0) 64%,#fff 100%)}' +
'.bf-wh{flex:1;position:relative;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain}' +
'.bf-wh::-webkit-scrollbar{display:none}' +
'.bf-wh div{height:44px;line-height:44px;text-align:center;font-size:17px;color:#9AAEC3;scroll-snap-align:center}' +
'.bf-wh div.on{color:#24456B;font-weight:700;font-size:18px}' +
'.bf-wh div.off{color:#D5DEE8}' +
'.bf-wh div{height:44px;line-height:44px;text-align:center;font-size:17px;color:#98AE9F;scroll-snap-align:center}' +
'.bf-wh div.on{color:#24372B;font-weight:700;font-size:18px}' +
'.bf-wh div.off{color:#D3DED6}' +
'.bf-wh .pad{scroll-snap-align:none}' +
'.bf-foot{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(248,243,239,0),#F8F3EF 35%)}' +
'.bf-cele{min-height:100%;background:linear-gradient(180deg,#FFE9DF 0%,#FFF7F2 45%,#F1FAF4 100%);padding:calc(30px + env(safe-area-inset-top)) 18px 130px;text-align:center;position:relative;overflow:hidden}' +
@@ -140,13 +140,13 @@
'<button class="bf-btn" data-bf="reg">出生了，去登记</button><button class="bf-btn ghost" data-bf="later">还没有，明天再问我</button></div>');
}
/* ③ 登记出生（2026-10-21 用户：出生日期点开从底部弹滚轮选；整页偏育儿首页的海盐蓝，好看一点） */
/* ③ 登记出生（2026-10-21 用户：出生日期点开从底部弹滚轮选；整页用育儿首页的海盐薄荷绿（同日改：蓝→绿），好看一点） */
var sex = 'unknown', birth = null;
var MOON = '<svg width="62" height="62" viewBox="0 0 64 64" fill="none"><circle cx="32" cy="34" r="17" fill="#FFE9DA"/><path d="M17 30c2-10 9-15 15-15s13 5 15 15c-4-3-9-5-15-5s-11 2-15 5z" fill="#8FB8E6"/><circle cx="26" cy="35" r="1.8" fill="#24456B"/><circle cx="38" cy="35" r="1.8" fill="#24456B"/><path d="M28 41c2.4 1.8 5.6 1.8 8 0" stroke="#24456B" stroke-width="1.8" stroke-linecap="round"/><circle cx="22" cy="40" r="2.6" fill="#F7B6C2" opacity=".7"/><circle cx="42" cy="40" r="2.6" fill="#F7B6C2" opacity=".7"/><path d="M45 14l1.3 3.3 3.3 1.3-3.3 1.3L45 23.2l-1.3-3.3-3.3-1.3 3.3-1.3z" fill="#FFD25C"/></svg>';
var MOON = '<svg width="62" height="62" viewBox="0 0 64 64" fill="none"><circle cx="32" cy="34" r="17" fill="#FFE9DA"/><path d="M17 30c2-10 9-15 15-15s13 5 15 15c-4-3-9-5-15-5s-11 2-15 5z" fill="#86C6A0"/><circle cx="26" cy="35" r="1.8" fill="#24372B"/><circle cx="38" cy="35" r="1.8" fill="#24372B"/><path d="M28 41c2.4 1.8 5.6 1.8 8 0" stroke="#24372B" stroke-width="1.8" stroke-linecap="round"/><circle cx="22" cy="40" r="2.6" fill="#F7B6C2" opacity=".7"/><circle cx="42" cy="40" r="2.6" fill="#F7B6C2" opacity=".7"/><path d="M45 14l1.3 3.3 3.3 1.3-3.3 1.3L45 23.2l-1.3-3.3-3.3-1.3 3.3-1.3z" fill="#FFD25C"/></svg>';
var ICO = {
date: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4E85C7" stroke-width="1.9" stroke-linecap="round"><rect x="4" y="5.5" width="16" height="14.5" rx="3"/><path d="M4 10h16M9 3.5v4M15 3.5v4"/><circle cx="12" cy="15" r="1.4" fill="#4E85C7" stroke="none"/></svg>',
name: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4E85C7" 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="#4E85C7" 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>'
date: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3A7A52" stroke-width="1.9" stroke-linecap="round"><rect x="4" y="5.5" width="16" height="14.5" rx="3"/><path d="M4 10h16M9 3.5v4M15 3.5v4"/><circle cx="12" cy="15" r="1.4" fill="#3A7A52" stroke="none"/></svg>',
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>'
};
function dateTxt(d) {
var t = midnight(new Date()), n = Math.round((t - d) / 864e5);
@@ -169,9 +169,9 @@
'<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('') +
'</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="#8FB8E6"/></svg><span>只有出生日期必填，小名和性别以后在育儿首页「我的」里也能改。</span></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-foot"><button class="bf-btn blue" data-bf="submit" id="bfSubmit">完成，切换到育儿模式</button><button class="bf-btn ghost b" data-bf="close">先不切换</button></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>');
}
/* 底部日期滚轮：年 / 月 / 日，最晚今天、最早两年前；快捷「今天 / 昨天」 */