diff --git a/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue b/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue index 963b040..a08f5ae 100644 --- a/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue +++ b/xuan-deduct-uniapp/src/components/custom-tabbar/custom-tabbar.vue @@ -7,7 +7,7 @@ :class="{ active: currentIndex === index }" @click="switchTab(index)" > - + {{ item.icon }} {{ item.text }} @@ -65,7 +65,12 @@ export default { this.currentIndex = index const path = this.tabList[index].pagePath uni.switchTab({ - url: path + url: path, + fail: () => { + uni.reLaunch({ + url: path + }) + } }) } } @@ -84,7 +89,7 @@ export default { align-items: center; justify-content: space-around; border-top: 1rpx solid #f0f0f0; - box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05); + box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08); z-index: 9999; padding-bottom: env(safe-area-inset-bottom); } @@ -96,25 +101,39 @@ export default { align-items: center; justify-content: center; padding: 8rpx 0; + transition: all 0.3s ease; } .tabbar-icon { margin-bottom: 4rpx; + padding: 8rpx 16rpx; + border-radius: 20rpx; + transition: all 0.3s ease; +} + +.tabbar-icon.icon-active { + background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); + transform: scale(1.1); } .icon-emoji { font-size: 44rpx; line-height: 1; + transition: all 0.3s ease; +} + +.tabbar-icon.icon-active .icon-emoji { + filter: brightness(0) invert(1); } .tabbar-text { font-size: 20rpx; - color: #999999; - transition: color 0.3s; + color: #9CA3AF; + transition: all 0.3s ease; } .tabbar-item.active .tabbar-text { - color: #DB2777; - font-weight: 500; + color: #3B82F6; + font-weight: 600; }