.tab { display: flex; } .tab .tab-item { background: #F4F8FE; border: 2px solid #D6E6FC; border-radius: 6rpx; flex: 1; padding: 25rpx 20rpx; font-size: 30rpx; font-weight: 500; color: #999999; margin: 0 15rpx 30rpx; display: flex; align-items: center; justify-content: center; } .tab .tab-item.cur { color: #3A80E7; position: relative; } .tab .tab-item.noBg { background: none!important; border: none !important; margin: 0 0rpx 30rpx; } .cur-img { display: none; } .tab .tab-item.cur:before { content: ''; display: block; height: 5rpx; width: 100%; background: #3A80E7; position: absolute; bottom: 0; left: 0; } .tab .tab-item.cur .cur-img { display: block; position: absolute; bottom: -8rpx; left: calc(50% - 6rpx); }