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 15:56:51 +00:00
parent ac72585ecb
commit f1ab738865
3 changed files with 198 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
mama-box.css
View File

@@ -2879,3 +2879,110 @@ a.skip:focus{left:16px;top:16px}
.bx-gl:not(.all) .bx-gl-h{flex-direction:column;align-items:flex-start;gap:2px}
.bx-gl:not(.all) .bx-gl-l,.bx-gl:not(.all) .bx-gl-s,.bx-gl:not(.all) .bx-gl-b{margin-left:0}
.bx-gl:not(.all){padding:9px 10px}
/* ================= 「我的」页改版（2026-10-01）=================
配色：头部蜜桃 → 珊瑚柔光渐变（和首页 hero 同一家族）；兜豆兑换卡用奶油金，
是全页唯一的「金色」，一眼就是主角；孕期卡回到白底 + 珊瑚进度（上一版深绿和全站暖色打架）；
心选商城 / 常用服务都是白卡，退到背景里。
⚠️ 本段写在文件末尾，靠层叠覆盖上面的旧规则（.me-top / .me-card / .preg-card …），
旧规则的注释讲的是旧版的取舍，看这里为准。 */
.me-top.me-v2{
padding:calc(env(safe-area-inset-top) + 14px) 20px 58px;border-radius:0 0 34px 34px;
background:
radial-gradient(180px 140px at 8% 0%, rgba(255,170,190,.55), rgba(255,170,190,0) 70%),
radial-gradient(200px 160px at 100% 85%, rgba(255,206,130,.55), rgba(255,206,130,0) 70%),
linear-gradient(160deg,#FF9F7E 0%,#F8775A 52%,#EE6248 100%)}
.me-top.me-v2::after{display:none}
.mt-glow{position:absolute;border-radius:50%;pointer-events:none}
.mt-glow.g1{width:210px;height:210px;right:-70px;top:-90px;background:rgba(255,255,255,.12)}
.mt-glow.g2{width:120px;height:120px;left:-40px;bottom:-60px;background:rgba(255,255,255,.08)}
.mt-stars{position:absolute;left:96px;top:calc(env(safe-area-inset-top) + 12px);width:150px;height:75px;pointer-events:none}
.me-top.me-v2 .hero-top{margin-bottom:6px;position:relative;z-index:2}
.me-v2 .me-card{background:none;box-shadow:none;padding:0 2px;border-radius:0;gap:15px;overflow:visible}
.me-v2 .me-avatar{width:70px;height:70px;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 8px 18px rgba(150,50,30,.28)}
.me-v2 .av-edit{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(150,50,30,.3)}
.me-v2 .me-name{color:#fff;font-size:23px;text-shadow:0 1px 6px rgba(150,50,30,.2)}
.me-tag{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;
color:#fff;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.me-tag.hide{display:none}
.me-v2 .me-info p{color:rgba(255,255,255,.92);margin-top:6px;font-size:12.5px}
.me-v2 .me-info p b{color:#FFF3B0;font-size:15px}
.me-v2 .me-chev{color:rgba(255,255,255,.8)}
/* 兜豆兑换商城主卡：半压在头部底边上 */
#screen-me .page-body.no-top{margin-top:-40px}
.bean-card{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;gap:12px;text-align:left;
padding:16px 16px 16px 12px;border-radius:24px;color:#6B3E12;
background:
radial-gradient(140px 100px at 100% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
linear-gradient(118deg,#FFF7E2 0%,#FFE7B0 55%,#FFD27E 100%);
box-shadow:0 14px 30px rgba(196,120,40,.24),inset 0 0 0 1px rgba(255,255,255,.7);transition:transform .18s var(--ease)}
.bean-card:active{transform:scale(.985)}
.bc-pattern{position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:radial-gradient(circle at 1px 1px, rgba(214,150,60,.35) 1px, transparent 1.4px);background-size:12px 12px;
-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 100%);mask-image:linear-gradient(100deg,transparent 35%,#000 100%)}
.bc-coin{flex:0 0 64px;position:relative;filter:drop-shadow(0 4px 6px rgba(200,120,20,.25))}
.bc-coin svg{display:block}
.bc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;position:relative}
.bc-kick{font-size:11.5px;font-weight:800;color:#B8641A;letter-spacing:.5px}
.bc-title{font-size:19px;font-weight:900;letter-spacing:-.3px;color:#5A300C}
.bc-sub{font-size:12px;color:#8C6034}
.bc-beans{margin-top:3px;font-size:12px;color:#8C6034}
.bc-beans b{font-size:15px;color:#D2691E;font-weight:900}
.bc-beans.hide{display:none}
.bc-cta{flex:0 0 auto;position:relative;display:flex;align-items:center;gap:2px;padding:9px 13px;border-radius:99px;
font-size:13.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F7845E,#E85A3C);
box-shadow:0 6px 14px rgba(232,90,60,.35)}
.bc-cta i,.ms-go i,.es-go i{font-style:normal;font-size:16px;line-height:1;margin-left:1px}
/* 孕期信息卡：白底 + 珊瑚进度 */
#screen-me .preg-card{color:var(--ink);
background:radial-gradient(200px 120px at 100% 0%, #FFEDE4, rgba(255,237,228,0) 70%),#fff;
box-shadow:var(--sh)}
#screen-me .pc-ico{background:#FFF0EA}
#screen-me .pc-title{color:var(--ink)}
#screen-me .pc-sub{color:var(--ink-2)}
#screen-me .preg-card .chev{color:#C9BFB8}
#screen-me .preg-card .rp{background:rgba(244,89,60,.1)}
#screen-me .pc-bar{background:#FBE7DE}
#screen-me .pc-bar i{background:linear-gradient(90deg,#FFB08F,#F4593C)}
#screen-me .pc-stage{color:#A0928A}
#screen-me .pc-stage .cur{color:#fff;background:linear-gradient(135deg,#F7845E,#E85A3C)}
/* 心选商城横幅 */
.mall-strip{width:100%;display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:20px;text-align:left;
background:#fff;box-shadow:var(--sh)}
.ms-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;color:#E8603F;
background:linear-gradient(140deg,#FFEDE5,#FFD9CA)}
.ms-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ms-main b{font-size:15.5px;font-weight:800;color:var(--ink)}
.ms-main span{font-size:12px;color:var(--ink-2)}
.ms-go{display:flex;align-items:center;font-size:13px;font-weight:700;color:var(--brand)}
/* 常用服务四宫格 */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 6px;border-radius:22px;background:#fff;box-shadow:var(--sh)}
.svc{position:relative;overflow:visible!important;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0}
.svc.hide{display:none}
.sv-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center}
.sv-ico.o{background:#FFEFE6;color:#E8703F}
.sv-ico.p{background:#F1EBFB;color:#7B5FD4}
.sv-ico.b{background:#E7F0FA;color:#4478BC}
.sv-t{font-size:12.5px;font-weight:700;color:var(--ink)}
.sv-badge{position:absolute;top:-6px;left:50%;margin-left:10px;padding:1px 6px;white-space:nowrap;border-radius:99px;font-size:10px;font-weight:800;
color:#fff;background:var(--brand);box-shadow:0 0 0 2px #fff}
.sv-badge:empty{display:none}
.me-logout{display:block;width:100%;margin-top:14px;padding:14px;border-radius:18px;background:#fff;
font-size:14.5px;font-weight:700;color:#C33A2E;text-align:center;box-shadow:var(--sh)}
.me-ver{text-align:center;font-size:11.5px;color:#B5A9A1;margin:18px 0 6px}
/* 首页 · 兜豆兑换商城入口条（婴儿房下面） */
.exch-strip{width:100%;display:flex;align-items:center;gap:11px;margin-top:12px;padding:12px 14px;border-radius:20px;text-align:left;
background:radial-gradient(120px 80px at 100% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),linear-gradient(118deg,#FFF7E2,#FFE3A6 70%,#FFD48A);
box-shadow:0 10px 22px rgba(196,120,40,.18),inset 0 0 0 1px rgba(255,255,255,.7)}
.es-coin{flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(200,120,20,.25))}
.es-coin svg{display:block}
.es-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.es-main b{font-size:15px;font-weight:900;color:#5A300C}
.es-main span{font-size:12px;color:#8C6034;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,#F7845E,#E85A3C);box-shadow:0 5px 12px rgba(232,90,60,.3)}