feat(ui): 迁移液态玻璃质感(TabBar/返回按钮)
- 自定义 TabBar 增加弯月面聚光带与银丝边缘,玻璃参数升级 - 全局返回按钮与 ScrollTopMask 返回按钮升级 135° 液态玻璃渐变 - 激活态升级为玻璃透镜,浅色/深色主题同步 - 新增 tools/liquid-glass.test.mjs 回归断言 - 同步构建产物 dist/,并合并此前未提交的 .claude 配置与 dist 变更
This commit is contained in:
+28
-8
@@ -209,19 +209,39 @@ page {
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
border-radius: 50% !important;
|
||||
background: rgba(255, 255, 255, 0.55) !important;
|
||||
backdrop-filter: blur(32px) saturate(1.2) !important;
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.2) !important;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.55) !important;
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.18), 0 4rpx 12rpx rgba(0, 0, 0, 0.08) !important;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.55) 0%,
|
||||
rgba(255, 255, 255, 0.28) 45%,
|
||||
rgba(255, 255, 255, 0.42) 100%
|
||||
) !important;
|
||||
backdrop-filter: blur(24px) saturate(1.7) brightness(1.05) !important;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.7) brightness(1.05) !important;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.35) !important;
|
||||
box-shadow:
|
||||
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.65),
|
||||
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.06),
|
||||
inset 0 0 0 1rpx rgba(255, 255, 255, 0.18),
|
||||
0 12rpx 40rpx rgba(0, 0, 0, 0.18),
|
||||
0 4rpx 12rpx rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
.theme-dark .back-btn,
|
||||
.theme-dark .edit-back,
|
||||
.theme-dark .shop-back-btn {
|
||||
background: rgba(25, 25, 25, 0.55) !important;
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 4rpx 12rpx rgba(0, 0, 0, 0.3) !important;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.16) 0%,
|
||||
rgba(255, 255, 255, 0.06) 45%,
|
||||
rgba(255, 255, 255, 0.12) 100%
|
||||
) !important;
|
||||
border-color: rgba(255, 255, 255, 0.18) !important;
|
||||
box-shadow:
|
||||
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.22),
|
||||
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.28),
|
||||
inset 0 0 0 1rpx rgba(255, 255, 255, 0.1),
|
||||
0 12rpx 40rpx rgba(0, 0, 0, 0.5),
|
||||
0 4rpx 12rpx rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================
|
||||
|
||||
@@ -44,17 +44,37 @@
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
pointer-events: auto;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
backdrop-filter: blur(32px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.55);
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.18), 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.55) 0%,
|
||||
rgba(255, 255, 255, 0.28) 45%,
|
||||
rgba(255, 255, 255, 0.42) 100%
|
||||
);
|
||||
backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
||||
box-shadow:
|
||||
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.65),
|
||||
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.06),
|
||||
inset 0 0 0 1rpx rgba(255, 255, 255, 0.18),
|
||||
0 12rpx 40rpx rgba(0, 0, 0, 0.18),
|
||||
0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.theme-dark .scroll-top-back {
|
||||
background: rgba(25, 25, 25, 0.55);
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.16) 0%,
|
||||
rgba(255, 255, 255, 0.06) 45%,
|
||||
rgba(255, 255, 255, 0.12) 100%
|
||||
);
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
box-shadow:
|
||||
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.22),
|
||||
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.28),
|
||||
inset 0 0 0 1rpx rgba(255, 255, 255, 0.1),
|
||||
0 12rpx 40rpx rgba(0, 0, 0, 0.5),
|
||||
0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.scroll-top-back-arrow {
|
||||
|
||||
@@ -32,25 +32,84 @@
|
||||
border-radius: 64rpx;
|
||||
height: 116rpx;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
backdrop-filter: blur(32px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.55);
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.18), 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.14);
|
||||
box-shadow:
|
||||
0 24rpx 60rpx rgba(20, 14, 10, 0.22),
|
||||
0 4rpx 12rpx rgba(0, 0, 0, 0.08),
|
||||
inset 0 2rpx 0 rgba(255, 255, 255, 0.35);
|
||||
pointer-events: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 自定义组件样式隔离:两套主题配色在组件内自包含,不依赖全局 app.wxss */
|
||||
.custom-tab-bar.theme-dark {
|
||||
background: rgba(25, 25, 25, 0.55);
|
||||
backdrop-filter: blur(32px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
||||
background: rgba(25, 25, 25, 0.4);
|
||||
backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 24rpx 60rpx rgba(0, 0, 0, 0.55),
|
||||
0 4rpx 12rpx rgba(0, 0, 0, 0.3),
|
||||
inset 0 2rpx 0 rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
/* 顶部弯月面聚光带 */
|
||||
.tab-bar-caustic {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 56rpx;
|
||||
border-radius: 64rpx 64rpx 0 0;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
|
||||
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.55);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.custom-tab-bar.theme-dark .tab-bar-caustic {
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
|
||||
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
/* 非均匀银丝玻璃边缘 */
|
||||
.tab-bar-rim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1rpx;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.6) 0%,
|
||||
rgba(255, 255, 255, 0.18) 32%,
|
||||
rgba(255, 255, 255, 0.03) 68%,
|
||||
rgba(255, 255, 255, 0.24) 100%
|
||||
);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.custom-tab-bar.theme-dark .tab-bar-rim {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.34) 0%,
|
||||
rgba(255, 255, 255, 0.12) 32%,
|
||||
rgba(255, 255, 255, 0.02) 68%,
|
||||
rgba(255, 255, 255, 0.16) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
@@ -63,6 +122,7 @@
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
max-width: 160px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
@@ -73,13 +133,21 @@
|
||||
width: 120rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.07);
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.16));
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.35),
|
||||
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.06),
|
||||
0 4rpx 10rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.custom-tab-bar.theme-dark .tab-indicator {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
box-shadow: 0 0 6rpx rgba(255, 255, 255, 0.07);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.16));
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
box-shadow:
|
||||
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.12),
|
||||
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.3),
|
||||
0 4rpx 10rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.tab-icon-img {
|
||||
|
||||
@@ -95,6 +95,8 @@ export default function CustomTabBar() {
|
||||
<View className={`tab-bar-root theme-${resolvedTheme}`}>
|
||||
<View className='tab-bar-gradient' />
|
||||
<View className={`custom-tab-bar theme-${resolvedTheme}`}>
|
||||
<View className='tab-bar-caustic' />
|
||||
<View className='tab-bar-rim' />
|
||||
{TABS.map((tab) => {
|
||||
const isActive = tab.pagePath === activeTab
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user