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

style(我的): 卡片改毛玻璃，底下垫彩色光斑 (v26100402)

Browse Source 
孕期卡/兜豆横条/心选商城/常用服务/退出登录：半透明白 + backdrop-filter 模糊 + 顶边高光 + 白描边；
page-body 内新增 .me-orbs 四团光斑，页面底色改淡粉→薰衣草渐变；不支持 backdrop-filter 时退回 .82 白。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-04 00:20:47 +00:00
parent 5be1c15154
commit cc51237dff
3 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
mama-box.css
View File

@@ -4411,3 +4411,28 @@ a.skip:focus{left:16px;top:16px}
/* 「我的」页兜豆兑换横条（2026-10-04 由大卡收起，和心选商城横条同款，图标底换粉色） */
.mall-strip.exch .ms-ico{background:linear-gradient(140deg,#FFEEF2,#FFD6E0)}
.mall-strip.exch + .mall-strip{margin-top:10px}
/* ================= 「我的」页毛玻璃（2026-10-04 用户：「卡片毛玻璃一点，更有设计感，现在都是白色背景平铺」）=================
底：页面铺一层很淡的粉→杏→薰衣草渐变，page-body 里再垫四团彩色光斑（.me-orbs），跟着内容一起滚；
卡：半透明白 + backdrop-filter 模糊提饱和 + 顶边一条高光 + 1px 白描边，光斑从卡片底下透出来。
⚠️ 写在文件末尾覆盖前面的白底规则；不支持 backdrop-filter 的机型退回 .72 白，仍然看得清。 */
#screen-me{background:linear-gradient(180deg,#FBF1EC 0%,#FCEFF1 45%,#F4EFFA 100%)}
#screen-me .page-body.no-top{isolation:isolate}
.me-orbs{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;font-style:normal}
.me-orbs b{position:absolute;border-radius:50%;filter:blur(6px)}
.me-orbs .o1{width:170px;height:170px;right:-50px;top:60px;background:radial-gradient(circle at 35% 35%,#FFB79A,#FF7F63 70%);opacity:.7}
.me-orbs .o2{width:180px;height:180px;left:-60px;top:290px;background:radial-gradient(circle at 40% 35%,#FFC6D6,#FF86A8 70%);opacity:.75}
.me-orbs .o3{width:150px;height:150px;right:-50px;top:380px;background:radial-gradient(circle at 40% 35%,#FFE3A6,#FFB84D 70%);opacity:.75}
.me-orbs .o4{width:130px;height:130px;left:36%;top:400px;background:radial-gradient(circle at 40% 35%,#DCD0FF,#A68DF5 70%);opacity:.6}
#screen-me .preg-card,#screen-me .mall-strip,#screen-me .svc-grid,#screen-me .me-logout,#screen-me .list-card{
background:linear-gradient(140deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.36) 100%);
-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.6),0 10px 28px rgba(176,96,80,.12)}
#screen-me .page-body.no-top>.preg-card:first-of-type{
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.65),0 16px 34px rgba(140,56,34,.16)}
#screen-me .pc-ico,#screen-me .ms-ico,#screen-me .sv-ico{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
#screen-me .pc-bar{background:rgba(244,140,110,.16)}
#screen-me .sec-title{position:relative}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
#screen-me .preg-card,#screen-me .mall-strip,#screen-me .svc-grid,#screen-me .me-logout,#screen-me .list-card{background:rgba(255,255,255,.82)}
}