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:
Karlcarlo
2026-10-01 16:12:25 +00:00
parent 96b04877de
commit da995ae540
3 changed files with 331 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
mama-box.css
View File

@@ -2995,3 +2995,84 @@ a.skip:focus{left:16px;top:16px}
.es-main span{font-size:12px;font-weight:700;color:#B83F62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-go{flex:0 0 auto;display:flex;align-items:center;padding:7px 12px;border-radius:99px;font-size:13px;font-weight:800;color:#fff;
background:linear-gradient(135deg,#E8708F,#D9577A 60%,#B83F62);box-shadow:0 5px 12px rgba(184,63,98,.3)}
/* ================= 「我的资料」弹窗改版（2026-10-01）=================
目标：好填。实时结果条在最上面；预产期三种填法；孕周用大号步进按钮，不用敲键盘；
头像缩进「妈妈」卡和昵称并排；每组一张白卡，读起来是三件事，不是一长串输入框。 */
.pf-modal{padding-bottom:0}
.pf-lead{font-size:12.5px;color:var(--ink-2);margin-top:4px}
.pf-sum{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:20px;color:#fff;
background:linear-gradient(135deg,#C9BEB6,#B2A69D);transition:background .3s}
.pf-sum.is-set{background:radial-gradient(140px 90px at 100% 0%, rgba(255,214,150,.45), rgba(255,214,150,0) 70%),linear-gradient(135deg,#FF9A7A,#F2664A);
box-shadow:0 10px 22px rgba(240,100,70,.28)}
.ps-ico{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:0 0 auto}
.ps-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ps-main b{font-size:19px;font-weight:900;letter-spacing:-.3px}
.ps-main span{font-size:12.5px;opacity:.92}
.pf-card{margin-top:12px;padding:14px 14px 16px;border-radius:20px;background:#fff;box-shadow:0 4px 14px rgba(160,110,90,.08)}
.pf-ct{font-size:15px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px}
.pf-ct em{font-style:normal;font-size:11px;font-weight:800;color:#fff;background:var(--brand);padding:1px 7px;border-radius:99px}
.seg{display:flex;margin-top:12px;padding:4px;border-radius:14px;background:#F5EEE9}
.seg-b{flex:1;padding:9px 2px;border-radius:11px;font-size:13px;font-weight:700;color:var(--ink-2);transition:all .2s}
.seg-b.is-active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(160,90,60,.14)}
.pg-pane{display:none;margin-top:12px}
.pg-pane.is-on{display:block}
.pg-tip{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
.date-btn{position:relative;display:flex;align-items:center;gap:10px;padding:0 14px;min-height:54px;border-radius:16px;
background:#FFF6F2;box-shadow:inset 0 0 0 1.5px #F6D6CA;cursor:pointer}
.date-btn.is-set{background:#FDECE7;box-shadow:inset 0 0 0 1.8px var(--brand)}
.db-ico{color:var(--brand);display:grid;place-items:center}
.db-txt{flex:1;font-size:16px;font-weight:700;color:#B4A79C}
.date-btn.is-set .db-txt{color:var(--ink)}
/* 原生日期控件整块盖在按钮上、透明：点哪儿都能唤起系统日期选择器 */
.date-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.date-btn input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.stp-row{display:flex;gap:10px}
.stp{flex:1;min-width:0}
.stp-l{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.stp-ctl{display:flex;align-items:center;height:54px;border-radius:16px;background:#FFF6F2;box-shadow:inset 0 0 0 1.5px #F6D6CA;overflow:hidden}
.stp-b{flex:0 0 44px;height:100%;font-size:22px;font-weight:700;color:var(--brand)}
.stp-b:active{background:#FBE2D9}
.stp-ctl input{flex:1;min-width:0;width:100%;height:100%;border:0;background:none;text-align:center;font-size:22px;font-weight:900;color:var(--ink);
-moz-appearance:textfield;padding:0}
.stp-ctl input::-webkit-outer-spin-button,.stp-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stp-ctl input:focus{outline:none}
.pf-fld{margin-top:12px}
.nm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.nm-c{padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:700;color:#B4573E;background:#FFF1EB}
.nm-c:active{transform:scale(.95)}
.pf-me{display:flex;align-items:flex-end;gap:14px}
.pf-me .av-pick{padding:0;flex:0 0 auto}
.pf-me .av-big{width:64px;height:64px}
.pf-me .av-big>svg{width:36px;height:36px}
.pf-me .fld{flex:1;margin-top:0}
.pf-foot{position:sticky;bottom:0;margin:14px -22px 0;padding:12px 22px calc(14px + env(safe-area-inset-bottom));
background:linear-gradient(rgba(250,245,241,0),#FAF5F1 30%)}
.pf-foot .dl-btn.ghost{flex:0 0 96px}
.pf-me .av-cam{width:24px;height:24px;right:-4px;bottom:-4px}
.pf-me .av-cam svg{width:12px;height:12px}
/* 首页 · 兜豆兑好物模块：头部一条 + 横滑商品（2026-10-01 用户：「需要调出几个商品，不能直接是一条信息」） */
.exch-mod{margin-top:12px;padding:6px 6px 12px;border-radius:24px;
background:radial-gradient(160px 110px at 100% 0%, rgba(255,200,87,.32), rgba(255,200,87,0) 70%),linear-gradient(160deg,#FFF8F1,#FFEAF0 60%,#FFDCE6);
box-shadow:0 10px 24px rgba(184,63,98,.14),inset 0 0 0 1px rgba(255,255,255,.75)}
.exch-mod .exch-strip{margin-top:0;background:none;box-shadow:none;padding:8px 8px 6px}
.ex-goods{display:flex;gap:9px;overflow-x:auto;padding:6px 8px 2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ex-goods::-webkit-scrollbar{display:none}
.ex-goods.hide{display:none}
.ex-it{flex:0 0 96px;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;padding:6px 6px 8px;border-radius:16px;background:#fff;
box-shadow:0 4px 10px rgba(184,63,98,.08);cursor:pointer}
.ex-it:active{transform:scale(.97)}
.gi-pic{position:relative;display:block}
.gi-pic img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#FFF1F4}
.gi-badge{position:absolute;left:4px;top:4px;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#E8344E;padding:1px 6px;border-radius:99px}
.gi-left{position:absolute;left:4px;right:4px;bottom:4px;text-align:center;font-style:normal;font-size:10px;font-weight:800;color:#fff;
background:rgba(74,53,48,.62);padding:1px 0;border-radius:8px}
.ex-it .bd-nm{font-size:12px;color:#4A3530;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ex-it b{font-size:12px;font-weight:900;color:#D9577A}
/* 「我的」页：孕期卡和兜豆卡对调 —— 孕期卡半压在头部底边，阴影加深一点才「浮」得起来 */
#screen-me .page-body.no-top>.preg-card:first-of-type{box-shadow:0 14px 30px rgba(140,56,34,.18),0 2px 6px rgba(140,56,34,.08)}
.seg-b{text-align:center;white-space:nowrap}
.stp-b{width:48px;min-width:48px;display:grid;place-items:center;padding:0}
.stp-ctl input{width:0}