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 11:21:13 +00:00
parent 9ca25d05de
commit ed05acdf55
3 changed files with 76 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
mama-box.css
View File

@@ -360,6 +360,40 @@ a.skip:focus{left:16px;top:16px}
.hd-tail{white-space:nowrap;font-size:12.5px;opacity:.88;line-height:20px}
.hd-tail b{font-size:17px;font-weight:800;letter-spacing:-.3px;opacity:1;margin:0 1px}
/* ===== 头部左侧 2026-10-01 改版：倒计时胶囊 / 大孕周 / 水果进度条 / 玻璃卡（结构与竖向账见 index.html .hero-pane 注释）=====
旧的 .hero-main / .week-ring / .hero-days 已不在页面上，相关规则保留无害。 */
.hero-pane{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;
width:172px;margin:12px 0 0 8px;text-shadow:0 1px 3px rgba(120,30,10,.28)}
.hi-due{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px 0 8px;border-radius:999px;
font-size:11.5px;font-weight:700;white-space:nowrap;
background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.35)}
.hi-due b{font-size:13.5px;font-weight:900;margin:0 1px;color:#FFF3C4}
.hi-heart{flex:0 0 auto;display:block;animation:hiBeat 1.6s ease-in-out infinite}
@keyframes hiBeat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.25)}30%{transform:scale(.95)}}
.hi-week{display:flex;align-items:flex-end;height:50px;margin-top:6px}
.hi-week b{font-size:54px;font-weight:900;line-height:46px;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.hi-unit{display:flex;flex-direction:column;justify-content:flex-end;margin:0 0 3px 5px;line-height:1}
.hi-unit em{font-style:normal;font-size:17px;font-weight:800}
.hi-unit span{margin-top:3px;font-size:12px;font-weight:700;opacity:.92}
.hi-prog{display:flex;align-items:center;gap:8px;width:100%;height:16px;margin-top:8px}
.hi-bar{position:relative;flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.28)}
.hi-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;
background:linear-gradient(90deg,rgba(255,255,255,.7),#fff);box-shadow:0 0 8px rgba(255,255,255,.55);
transition:width 1.4s var(--ease)}
.hi-knob{position:absolute;right:-9px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
display:grid;place-items:center;font-size:12px;line-height:1;text-shadow:none;
background:#fff;box-shadow:0 2px 6px rgba(150,50,30,.3);animation:hiBob 2.4s ease-in-out infinite}
.hi-knob:empty{display:none}
@keyframes hiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.hi-size{flex:0 0 auto;font-size:11.5px;font-weight:700;opacity:.95;white-space:nowrap}
.hi-size:empty{display:none}
.hero-pane .hd-card{margin-top:10px;padding:7px 12px 8px}
.hero-pane .hd-who{font-size:12.5px}
.hero-pane .hd-who b{font-size:13.5px;margin-right:1px}
/* 产后：「已出生」三个字当主角太宽，收一号；单位留空 */
.hero-pane.is-born .hi-week b{font-size:40px;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.hi-heart,.hi-knob{animation:none}.hi-fill{transition:none}}
/* 「宝宝来信」卡：设计稿 x150..648 → left 75 · 宽 249 · 高 80。
气泡补全成整圆后下缘到 215.5，卡顶必须 ≥215.5 才不会再压住宝宝，
故上移量由 34.5 改为 16（橙区 252 − 16 = 卡顶 236）。