From 5db761c73eb0c2ecf4921660f096458821375d63 Mon Sep 17 00:00:00 2001 From: obroccolio Date: Fri, 7 Aug 2026 15:36:17 +0800 Subject: [PATCH] feat: frosted floating tab bar and updated icon colors --- src/custom-tab-bar/index.scss | 35 ++++++++++++++++++----------------- src/custom-tab-bar/index.tsx | 9 ++++++--- src/icon/个人-fill.svg | 2 +- src/icon/个人.svg | 2 +- src/icon/包裹-fill.svg | 2 +- src/icon/包裹.svg | 2 +- src/icon/商品-fill.svg | 2 +- src/icon/商品.svg | 2 +- src/icon/四角星.svg | 2 +- src/icon/搜索.svg | 2 +- src/icon/调色盘-fill.svg | 2 +- src/icon/调色盘.svg | 2 +- src/icon/首页-fill.svg | 2 +- src/icon/首页.svg | 2 +- 14 files changed, 36 insertions(+), 32 deletions(-) diff --git a/src/custom-tab-bar/index.scss b/src/custom-tab-bar/index.scss index aa5f660..4a5d8b4 100644 --- a/src/custom-tab-bar/index.scss +++ b/src/custom-tab-bar/index.scss @@ -1,18 +1,19 @@ .custom-tab-bar { position: fixed; - bottom: 0; - left: 0; - right: 0; + bottom: 12px; + left: 12px; + right: 12px; + border-radius: 24px; height: calc(96px + constant(safe-area-inset-bottom)); height: calc(96px + env(safe-area-inset-bottom)); box-sizing: border-box; - background: rgba(255, 255, 255, 0.78); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); + background: rgba(255, 255, 255, 0.55); + backdrop-filter: blur(32px) saturate(1.2); + -webkit-backdrop-filter: blur(32px) saturate(1.2); display: flex; justify-content: space-around; align-items: center; - box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); z-index: 1000; @@ -20,10 +21,10 @@ /* 自定义组件样式隔离：两套主题配色在组件内自包含，不依赖全局 app.wxss */ .custom-tab-bar.theme-dark { - background: rgba(25, 25, 25, 0.78); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45); + background: rgba(25, 25, 25, 0.55); + backdrop-filter: blur(32px) saturate(1.2); + -webkit-backdrop-filter: blur(32px) saturate(1.2); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .tab-item { @@ -38,8 +39,8 @@ } .tab-icon-img { - width: 40px; - height: 40px; + width: 40rpx; + height: 40rpx; margin-bottom: 2px; transition: transform 0.2s; opacity: 0.8; @@ -52,20 +53,20 @@ .tab-label { font-size: 20px; - color: #b08d8d; + color: #8a7e76; font-weight: 700; transition: color 0.2s; line-height: 22px; } .custom-tab-bar.theme-dark .tab-label { - color: #999999; + color: #b3a79c; } .tab-item.active .tab-label { - color: #ff9a9e; + color: #d96c6a; } .custom-tab-bar.theme-dark .tab-item.active .tab-label { - color: #ff7eb3; + color: #f09198; } diff --git a/src/custom-tab-bar/index.tsx b/src/custom-tab-bar/index.tsx index fee67fa..bf3e019 100644 --- a/src/custom-tab-bar/index.tsx +++ b/src/custom-tab-bar/index.tsx @@ -21,7 +21,8 @@ function matchTab(path: string): string { } function currentTabPath(): string { - const path = Taro.getCurrentInstance().router?.path || 'pages/index/index' + const router = Taro.getCurrentInstance().router + const path = router && router.path ? router.path : 'pages/index/index' return matchTab(path) } @@ -42,7 +43,9 @@ export default function CustomTabBar() { // 其它入口(如页面内部调用 switchTab)也会回到 tabBar，收到事件后重新同步选中态 useEffect(() => { const handler = (path?: string) => { - setActiveTab(matchTab(path || Taro.getCurrentInstance().router?.path || 'pages/index/index')) + const router = Taro.getCurrentInstance().router + const currentPath = router && router.path ? router.path : 'pages/index/index' + setActiveTab(matchTab(path || currentPath)) } Taro.eventCenter.on('tabBarChange', handler) return () => { @@ -59,7 +62,7 @@ export default function CustomTabBar() { const switchTab = (url: string) => { setActiveTab(matchTab(url)) Taro.switchTab({ url }) - Taro.eventCenter?.trigger('tabBarChange', url) + Taro.eventCenter.trigger('tabBarChange', url) } return ( diff --git a/src/icon/个人-fill.svg b/src/icon/个人-fill.svg index be7cce7..7455a03 100644 --- a/src/icon/个人-fill.svg +++ b/src/icon/个人-fill.svg @@ -1 +1 @@ - + diff --git a/src/icon/个人.svg b/src/icon/个人.svg index e73dbb2..5946e46 100644 --- a/src/icon/个人.svg +++ b/src/icon/个人.svg @@ -1 +1 @@ - + diff --git a/src/icon/包裹-fill.svg b/src/icon/包裹-fill.svg index 0817791..5be2fd5 100644 --- a/src/icon/包裹-fill.svg +++ b/src/icon/包裹-fill.svg @@ -1 +1 @@ - + diff --git a/src/icon/包裹.svg b/src/icon/包裹.svg index 735214e..8765004 100644 --- a/src/icon/包裹.svg +++ b/src/icon/包裹.svg @@ -1 +1 @@ - + diff --git a/src/icon/商品-fill.svg b/src/icon/商品-fill.svg index c6c5d99..8c79a26 100644 --- a/src/icon/商品-fill.svg +++ b/src/icon/商品-fill.svg @@ -1 +1 @@ - + diff --git a/src/icon/商品.svg b/src/icon/商品.svg index 91682b5..d3b0d0b 100644 --- a/src/icon/商品.svg +++ b/src/icon/商品.svg @@ -1 +1 @@ - + diff --git a/src/icon/四角星.svg b/src/icon/四角星.svg index 8e1c428..68c0a66 100644 --- a/src/icon/四角星.svg +++ b/src/icon/四角星.svg @@ -1 +1 @@ - + diff --git a/src/icon/搜索.svg b/src/icon/搜索.svg index ec61edd..7133b26 100644 --- a/src/icon/搜索.svg +++ b/src/icon/搜索.svg @@ -1 +1 @@ - + diff --git a/src/icon/调色盘-fill.svg b/src/icon/调色盘-fill.svg index c10c126..467e753 100644 --- a/src/icon/调色盘-fill.svg +++ b/src/icon/调色盘-fill.svg @@ -1 +1 @@ - + diff --git a/src/icon/调色盘.svg b/src/icon/调色盘.svg index 04ca07d..9f6bcf2 100644 --- a/src/icon/调色盘.svg +++ b/src/icon/调色盘.svg @@ -1 +1 @@ - + diff --git a/src/icon/首页-fill.svg b/src/icon/首页-fill.svg index 1c49893..3b25f6a 100644 --- a/src/icon/首页-fill.svg +++ b/src/icon/首页-fill.svg @@ -1 +1 @@ - + diff --git a/src/icon/首页.svg b/src/icon/首页.svg index a162c99..10d5cf4 100644 --- a/src/icon/首页.svg +++ b/src/icon/首页.svg @@ -1 +1 @@ - +