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

底部导航改暖色毛玻璃，对齐孕期档案 v7 (v26100206)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-03 01:00:30 +00:00
parent f5f597ed1d
commit fd538eb6fb
3 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100205 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100206 缓存版本标记：改 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 第四节） -->

2
js/app.js
View File

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

16
mama-box.css
View File

@@ -4252,3 +4252,19 @@ a.skip:focus{left:16px;top:16px}
/* 2026-10-03 用户：消消乐 banner 左右留白太大 → 和上面「豆豆今天想说」卡片对齐（距屏幕边 16px） */
.game-promo{padding-left:16px;padding-right:16px}
/* ================= 底部导航 · 暖色毛玻璃（2026-10-03）=================
用户：「按孕期档案（chengzhang-dangan/v7）底部 Tab 的毛玻璃风格改」。对照它的 .anc .ain：
rgba(255,255,255,.55) + blur(18px) saturate(170%) + 内描白边 + 顶部 1px 高光 + 暖色投影；下方淡出层减弱到 .55，让内容透上来可「磨」。
· 父级 .tabbar 去掉 filter（filter 会让子元素 backdrop-filter 失效）；玻璃放在 ::before（仍带 mask 缺口），
投影挪到不带 mask 的 ::after 上用 box-shadow（外投影只画在盒子外面，不会透进玻璃里）。
· 选中态仍按 2026-10-01 用户要求不加背景胶囊。 */
.tabbar{filter:none}
.tabbar::before{background:rgba(255,255,255,.55);
-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 0 #fff}
.tabbar::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
box-shadow:0 14px 34px rgba(200,100,70,.2),0 2px 6px rgba(200,100,70,.06)}
.tab-fade{background:linear-gradient(180deg,rgba(255,240,232,0),rgba(255,240,232,.55))}
.tab-fab .fab{box-shadow:0 6px 14px rgba(244,89,60,.32),inset 0 1px 0 rgba(255,255,255,.3)}
@media (prefers-reduced-transparency:reduce){.tabbar::before{background:#FFF9F5}}