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 @@
-
+