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

兜豆兑换入口接入：跳 doudou-duihuan（带 openid/return_url）、余额与可兑件数、本场热门好物；配色改用商城 berry

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 16:00:10 +00:00
parent f1ab738865
commit 96b04877de
3 changed files with 126 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
mama-box.css
View File

@@ -2881,8 +2881,8 @@ a.skip:focus{left:16px;top:16px}
.bx-gl:not(.all){padding:9px 10px}
/* ================= 「我的」页改版（2026-10-01）=================
配色：头部蜜桃 → 珊瑚柔光渐变（和首页 hero 同一家族）；兜豆兑换卡用奶油金，
是全页唯一的「金色」，一眼就是主角；孕期卡回到白底 + 珊瑚进度（上一版深绿和全站暖色打架）；
配色：头部蜜桃 → 珊瑚柔光渐变（和首页 hero 同一家族）；兜豆兑换卡用兑换商城自己的
奶白 → 粉 + berry（见下），是全页最跳的一张；孕期卡回到白底 + 珊瑚进度（上一版深绿和全站暖色打架）；
心选商城 / 常用服务都是白卡，退到背景里。
⚠️ 本段写在文件末尾，靠层叠覆盖上面的旧规则（.me-top / .me-card / .preg-card …），
旧规则的注释讲的是旧版的取舍，看这里为准。 */
@@ -2909,31 +2909,40 @@ a.skip:focus{left:16px;top:16px}
.me-v2 .me-info p b{color:#FFF3B0;font-size:15px}
.me-v2 .me-chev{color:rgba(255,255,255,.8)}
/* 兜豆兑换商城主卡：半压在头部底边上 */
/* 兜豆兑换卡：半压在头部底边上。配色跟兑换商城走（商城侧给的视觉：berry #D9577A / 深 #B83F62，
点缀金 #FFC857，深棕字 #4A3530，底 #FFF8F1），图标就是商城那颗粉色兜豆（内联，不多一次请求）。 */
#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;
.bean-card{position:relative;overflow:hidden;width:100%;display:block;text-align:left;
padding:14px 14px 14px 10px;border-radius:24px;color:#4A3530;
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)}
radial-gradient(150px 110px at 100% 0%, rgba(255,200,87,.38), rgba(255,200,87,0) 70%),
linear-gradient(118deg,#FFF8F1 0%,#FFEAF0 55%,#FFD6E2 100%);
box-shadow:0 14px 30px rgba(184,63,98,.20),inset 0 0 0 1px rgba(255,255,255,.75);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-pattern{position:absolute;inset:0;pointer-events:none;opacity:.55;
background-image:radial-gradient(circle at 1px 1px, rgba(217,87,122,.28) 1px, transparent 1.4px);background-size:12px 12px;
-webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 100%);mask-image:linear-gradient(100deg,transparent 40%,#000 100%)}
.bc-top{display:flex;align-items:center;gap:10px;position:relative}
.bc-coin{flex:0 0 58px;filter:drop-shadow(0 5px 6px rgba(217,87,122,.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-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.bc-kick{font-size:10.5px;font-weight:800;color:#fff;background:#D9577A;padding:2px 8px;border-radius:99px;letter-spacing:.5px}
.bc-title{font-size:19px;font-weight:900;letter-spacing:-.3px;color:#4A3530}
.bc-sub{font-size:12.5px;font-weight:700;color:#B83F62}
.bc-cta{flex:0 0 auto;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,#E8708F,#D9577A 60%,#B83F62);
box-shadow:0 6px 14px rgba(184,63,98,.35)}
.bc-cta i,.ms-go i,.es-go i{font-style:normal;font-size:16px;line-height:1;margin-left:1px}
.bc-drop{display:block;position:relative;margin:12px 0 0 4px;padding:10px;border-radius:16px;background:rgba(255,255,255,.72)}
.bc-drop.hide{display:none}
.bd-head{display:block;font-size:11.5px;font-weight:800;color:#B83F62;margin-bottom:8px}
.bd-head::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#E8344E;margin-right:6px;vertical-align:1px;
box-shadow:0 0 0 3px rgba(232,52,78,.18)}
.bd-goods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bd-it{display:flex;flex-direction:column;gap:3px;min-width:0}
.bd-it img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#FFF1F4}
.bd-nm{font-size:11.5px;color:#4A3530;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-it b{font-size:11.5px;font-weight:900;color:#D9577A}
/* 孕期信息卡：白底 + 珊瑚进度 */
#screen-me .preg-card{color:var(--ink);
@@ -2977,12 +2986,12 @@ a.skip:focus{left:16px;top:16px}
/* 首页 · 兜豆兑换商城入口条（婴儿房下面） */
.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))}
background:radial-gradient(120px 80px at 100% 0%, rgba(255,200,87,.35), rgba(255,200,87,0) 70%),linear-gradient(118deg,#FFF8F1,#FFEAF0 60%,#FFD6E2);
box-shadow:0 10px 22px rgba(184,63,98,.16),inset 0 0 0 1px rgba(255,255,255,.75)}
.es-coin{flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(217,87,122,.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-main b{font-size:15px;font-weight:900;color:#4A3530}
.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,#F7845E,#E85A3C);box-shadow:0 5px 12px rgba(232,90,60,.3)}
background:linear-gradient(135deg,#E8708F,#D9577A 60%,#B83F62);box-shadow:0 5px 12px rgba(184,63,98,.3)}