.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; background: white; display: flex; box-sizing: border-box; padding: 14rpx 0rpx; padding-bottom: calc(env(safe-area-inset-bottom) + 14rpx); box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx; .tab-bar-item { position: relative; flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; padding-bottom: 10rpx; .noticeTips { position: absolute; left: 100rpx; top: -12rpx; width: 28rpx; padding: 4rpx 0rpx; border-radius: 40rpx; color: white; font-size: 16rpx; text-align: center; background-color: #FF0000; } image { width: 48rpx; height: 48rpx; } view { font-size: 28rpx; margin-top: 10rpx; } } .mask { position: absolute; top: 0rpx; width: 100%; height: 100%; z-index: 9; background: rgba(0, 0, 0, 0.7); } }