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:45:15 +00:00
parent 7934b91865
commit 5601f44e29
3 changed files with 61 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
mama-box.css
View File

@@ -3254,3 +3254,62 @@ a.skip:focus{left:16px;top:16px}
.tab::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#F4593C;opacity:0;transform:scale(0);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.tab.is-active::after{opacity:1;transform:scale(1)}
.tab-fab::after{display:none}
/* ================= 首页底部三模块拉开色相（2026-10-01）=================
用户：脚印 / 消消乐 / 福利三块都是珊瑚桃色，视觉疲劳。按功能各给一个色系，饱和度和明度保持同一档，
整页还是暖调、和品牌橙不打架：
· 今日脚印 = 「成长」薄荷绿（便签保持奶油白，暖色落在宝宝的话上）
· 宝宝消消乐 = 「糖果」紫（整页唯一的冷色块，游戏感最强，也最跳）
· 孕周专属福利 = 「礼物」蜂蜜金（金色 = 福利/礼包；「免费领」按钮仍用红，保留紧迫感） */
/* —— 今日脚印：薄荷绿 —— */
.today-line.fp2{background-color:#fff;background-image:
radial-gradient(180px 120px at 100% 0%, rgba(178,232,208,.55), rgba(178,232,208,0) 70%),
radial-gradient(150px 120px at 0% 100%, rgba(206,240,226,.6), rgba(206,240,226,0) 70%),
linear-gradient(180deg,#F8FDFA,#EEF8F3)}
.fp-cal{box-shadow:0 6px 14px rgba(60,150,115,.16),inset 0 0 0 1px #D8EEE4}
.fp-cal::before{background:linear-gradient(135deg,#5FCB9F,#2FA57C)}
.fp-poem{color:#5E9580}
.fp2 .fp-steps::before{border-left-color:#BFE3D2}
.fp2 .st-dot{background:#DDF3E9;color:#2FA57C;box-shadow:0 0 0 3px #F3FBF7}
.fp2 .step:nth-child(3n+2) .st-dot{background:#FDE8F0;color:#D9577A}
.fp2 .step:nth-child(3n) .st-dot{background:#FFF3D6;color:#E0A126}
.st-card{box-shadow:0 3px 10px rgba(60,140,110,.08),inset 0 0 0 1px #E1F1E9}
.fp2 .st-from{color:#2C8E6B;background:#E3F5EC}
.fp2 .st-txt b{color:#23946C}
.fp-demo-t{color:#5E9580}.fp-demo-t i{color:#5FCB9F}
.fp2 .fp-steps.is-demo .st-card{box-shadow:inset 0 0 0 1.5px #CBE8DA;
background-image:repeating-linear-gradient(135deg,rgba(220,243,232,.6) 0 6px,transparent 6px 12px)}
.st-demo{background:#7CC9A7}
.fg-walk{color:#A9DCC4}.fg-walk .fw4{color:#2FA57C}
.fp2 .fp-guide{box-shadow:inset 0 0 0 1.5px #D3EBDF}
.fp2 .tl-chip{box-shadow:0 2px 8px rgba(60,140,110,.14),inset 0 0 0 1px #D3EBDF}
.fp2 .fp-note{box-shadow:0 8px 20px rgba(60,130,100,.13),inset 0 0 0 1px #E6EFE6}
.fp2 .fp-note::after{background:rgba(130,214,176,.55)}
.fp2 .ab-badge{background:linear-gradient(135deg,#5FCB9F,#2FA57C)}
.fp2 .ab-tag{color:#2C8E6B}
.fn-sign{color:#4E9A7D}.fn-foot em{color:#23946C}
.fp-all{color:#5E8576}
/* —— 宝宝消消乐：糖果紫 —— */
.gp-card{background:linear-gradient(120deg,#8C7BFF 0%,#B18CFF 52%,#FF9BD0 100%);
box-shadow:0 10px 24px rgba(130,100,240,.30)}
.gp-card::after{content:"";position:absolute;right:-30px;top:-50px;width:150px;height:150px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);pointer-events:none}
.gp-name{text-shadow:0 2px 0 rgba(90,60,200,.35)}
.gp-new{color:#6B4FE0;background:#FFE58A}
.gp-cta{color:#6B4FE0;box-shadow:0 4px 10px rgba(80,50,190,.25)}
.gp-board{background:rgba(255,255,255,.28)}
.gp-board i{box-shadow:0 2px 0 rgba(110,80,210,.28)}
.gp-board i.is-hint{background:#FFF6D6;box-shadow:0 0 0 2px #FFD36E}
/* —— 孕周专属福利：蜂蜜金 —— */
.shelf.gift2{background-color:#fff;background-image:
radial-gradient(180px 120px at 100% 0%, rgba(255,214,120,.42), rgba(255,214,120,0) 70%),
linear-gradient(180deg,#FFFDF5,#FFF7E3)}
.gb-gift{background:linear-gradient(145deg,#FFF4D2,#FFE7A8);box-shadow:inset 0 0 0 1px #F8DC95}
.gift2 .sh-title [data-wk]{color:#D88A0B}
.sb-tag{background:linear-gradient(135deg,#FFC84A,#F29A12);color:#fff;text-shadow:0 1px 1px rgba(160,90,0,.25)}
.gift2 .sb-row{border-top-color:rgba(200,150,60,.32)}
.gift2 .sb-row::before,.gift2 .sb-row::after{background:#FFF9EA}
.gift2 .unlock{background:#FFF0C8;color:#8A6A3A}