/* custom-tab-bar/index.wxss */ @import '/static/iconfont/iconfont.wxss'; .tabbar_box{ display: flex; flex-direction: row; align-items: center; justify-content: space-around; position: fixed; bottom: 0; left: 0; z-index: 999; width: 100%; height:140rpx; /* padding-bottom: 20rpx; */ box-shadow: 0 0 2px #ccc; pointer-events: auto; box-shadow: 0rpx 8rpx 58rpx 0rpx rgba(0,0,0,0.1); } .tabbar_box.iphoneX-height{ padding-bottom:60rpx; } .middle-wrapper{ position: absolute; right: 310rpx; bottom: 0; background-color: #fff; width: 120rpx; height: 120rpx; border-radius: 50%; border-top: 2rpx solid #f2f2f3; } .middle-wrapper.iphoneX-height{ bottom: 60rpx; } .tabbar_nav{ flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20rpx; height: 100%; position: relative; } .tabbar_nav text{ margin-top: 10rpx; } .tabbar_icon{ width: 56rpx; height: 56rpx; font-size: 56rpx; } .special-wrapper{ position: absolute; left:50%; top: -36rpx; width: 145rpx; height: 140rpx; border-radius: 50%; border-top: 2rpx solid #ccc; background-color: #fff; text-align: center; box-sizing: border-box; padding: 6rpx; margin-left: -72rpx; } .special-wrapper .tabbar_icon{ width:100rpx; height:116rpx; } .special-text-wrapper{ width: 56rpx; height: 56rpx; }