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

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

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

View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title> <title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100401 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 --> <!-- V:26100402 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css"> <link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) --> <!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
@@ -917,6 +917,9 @@
</div> </div>
<div class="page-body no-top"> <div class="page-body no-top">
<!-- 毛玻璃底下的彩色光斑(2026-10-04 用户:「卡片毛玻璃一点,现在白底平铺不好看」)。
卡片是半透明 + backdrop-filter,必须垫点颜色才透得出玻璃感;纯 CSS,不加图片请求。 -->
<i class="me-orbs" aria-hidden="true"><b class="o1"></b><b class="o2"></b><b class="o3"></b><b class="o4"></b></i>
<!-- 退出登录已移到个人资料卡右上角的图标按钮(#meLogoutBtn) --> <!-- 退出登录已移到个人资料卡右上角的图标按钮(#meLogoutBtn) -->
<!-- ⚠️ 这两处的 data-modal 从 modalPreg 改成了 modalProfile: <!-- ⚠️ 这两处的 data-modal 从 modalPreg 改成了 modalProfile:
「编辑孕期信息」那张弹窗已整个并进「我的资料」(见文件末尾那段说明)。 「编辑孕期信息」那张弹窗已整个并进「我的资料」(见文件末尾那段说明)。

View File

@@ -3,7 +3,7 @@
(function () { (function () {
'use strict'; 'use strict';
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */ /* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
var VER = '26100401'; var VER = '26100402';
const $ = (s, c) => (c || document).querySelector(s); const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

View File

@@ -4411,3 +4411,28 @@ a.skip:focus{left:16px;top:16px}
/* 「我的」页兜豆兑换横条(2026-10-04 由大卡收起,和心选商城横条同款,图标底换粉色) */ /* 「我的」页兜豆兑换横条(2026-10-04 由大卡收起,和心选商城横条同款,图标底换粉色) */
.mall-strip.exch .ms-ico{background:linear-gradient(140deg,#FFEEF2,#FFD6E0)} .mall-strip.exch .ms-ico{background:linear-gradient(140deg,#FFEEF2,#FFD6E0)}
.mall-strip.exch + .mall-strip{margin-top:10px} .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)}
}