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:
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<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">
|
||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
||||
@@ -917,6 +917,9 @@
|
||||
</div>
|
||||
|
||||
<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) -->
|
||||
<!-- ⚠️ 这两处的 data-modal 从 modalPreg 改成了 modalProfile:
|
||||
「编辑孕期信息」那张弹窗已整个并进「我的资料」(见文件末尾那段说明)。
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26100401';
|
||||
var VER = '26100402';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
|
||||
25
mama-box.css
25
mama-box.css
@@ -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)}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user