/* components/tab/tab.wxss */ .tab-container { width: 100%; display: flex; justify-content: space-around; align-items: center; padding: 20rpx 0 0 0; } .tab-item { color: #222; font-size: 32rpx; padding-bottom: 20rpx; position: relative; /* font-weight:bold; */ } .badge { position: absolute; background: red; padding: 2rpx 8rpx; top: 0; right: 0; border-radius: 50%; font-size: 22rpx; font-family: "PingFangSC-Medium", "PingFang SC"; font-weight: bold; color: #FFFFFF; transform: translate(100%,-40%); line-height: 22rpx; } .tab-item.active { color: #477DF3; font-weight: bold; } .tab-item.active:after { content: ""; display: block; height: 6rpx; width: 65rpx; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #477DF3; border-radius: 2rpx; }