EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tabBar 选中态图标填充高亮，半透明毛玻璃背景

Browse Source
This commit is contained in:
broccoli
2026-08-06 17:15:30 +08:00
parent d1ab76b08a
commit 9716148f15
14 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/custom-tab-bar/index.wxss
Vendored
+1 -1
View File
@@ -1 +1 @@
.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:#fff;bottom:0;-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);display:-webkit-flex;display:-ms-flexbox;display:flex;height:120rpx;-webkit-justify-content:space-around;justify-content:space-around;left:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;right:0;z-index:1000}.custom-tab-bar.theme-dark{background:#191919;-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5)}.tab-item{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;padding:10rpx 20rpx;position:relative}.tab-icon-img{height:28rpx;margin-bottom:4rpx;opacity:.6;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:28rpx}.tab-item.active .tab-icon-img{opacity:1;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15)}.tab-label{color:#b08d8d;font-size:20rpx;font-weight:600;-webkit-transition:color .2s;transition:color .2s}.custom-tab-bar.theme-dark .tab-label{color:#999}.tab-item.active .tab-label{color:#ff9a9e;font-weight:700}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3}
.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;backdrop-filter:blur(20rpx);-webkit-backdrop-filter:blur(20rpx);background:hsla(0,0%,100%,.75);bottom:0;-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);display:-webkit-flex;display:-ms-flexbox;display:flex;height:120rpx;-webkit-justify-content:space-around;justify-content:space-around;left:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;right:0;z-index:1000}.custom-tab-bar.theme-dark{backdrop-filter:blur(20rpx);-webkit-backdrop-filter:blur(20rpx);background:rgba(25,25,25,.75);-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5)}.tab-item{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;padding:10rpx 20rpx;position:relative}.tab-icon-img{height:28rpx;margin-bottom:4rpx;opacity:.6;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:28rpx}.tab-item.active .tab-icon-img{opacity:1;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15)}.tab-label{color:#b08d8d;font-size:20rpx;font-weight:600;-webkit-transition:color .2s;transition:color .2s}.custom-tab-bar.theme-dark .tab-label{color:#999}.tab-item.active .tab-label{color:#ff9a9e;font-weight:700}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3}