.tabbar_box{ display: flex; flex-direction: row; justify-content: space-around; position: fixed; bottom: 0; left: 0; z-index: 999; width: 100%; height: 98rpx; box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.04); } .tabbar_box.iphoneX-height{ padding-bottom: 66rpx; } .middle-wrapper{ position: absolute; right: 50%; margin-left: -60rpx; bottom: 0; background-color: #fff; width: 120rpx; height: 120rpx; border-radius: 50%; /* border-top: 2rpx solid #f2f2f3; */ /* box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.04); */ } .middle-wrapper.iphoneX-height{ bottom: 66rpx; } .tabbar_nav{ flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20rpx; height: 100%; position: relative; } .tabbar_icon{ width: 52rpx; height: 52rpx; } .special-wrapper{ position: absolute; top: -36rpx; width: 96rpx; height: 96rpx; border-radius: 50%; /* border-top: 2rpx solid #f2f2f3; */ box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.04); background-color: #fff; text-align: center; box-sizing: border-box; padding: 6rpx; } .special-wrapper .tabbar_icon{ width: 84rpx; height: 84rpx; } .special-text-wrapper{ width: 56rpx; height: 56rpx; }