/* custom-tab-bar/index.wxss */ .tab-custom-item { position: relative; flex: 1; z-index: 1; .circle { display: block; margin: 0 auto; margin-top: -53rpx; width: 100rpx; height: 100rpx; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(0deg, #e98ff8 0%, #b073ff 100%); display: flex; align-items: center; justify-content: center; .icon { width: 60rpx; height: 60rpx; } } .name { font-size: 26rpx; color: rgba(105, 104, 110, 1); text-align: center; &.active { color: rgba(33, 29, 46, 1); } } .tip-card { position: absolute; top: -30rpx; left: 50%; width: 390rpx; height: 230rpx; transform: translate(-50%, -100%); } } .tab-item { flex: 1; .icon { width: 48rpx; height: 48rpx; } .name { font-size: 26rpx; color: rgba(105, 104, 110, 1); &.active { color: rgba(33, 29, 46, 1); } } }