.cardOverUsers{height: 60rpx; font-size: 24rpx; position: fixed; top: 180rpx; left: 30rpx; color: #fff; background: rgba(0,0,0,.5); border-radius: 32rpx; padding: 4rpx 30rpx 4rpx 4rpx; z-index: 9999;}
/* .cardOverUsers-index::after{content: ''; width: 12rpx; height: 12rpx; display: inline-block; border-top:2rpx solid #fff; border-right: 2rpx solid #fff; transform: rotate(45deg);} */
.in{animation: in 1s ease .5s 1 both;}
.out{animation: out 1s ease .5s 1 both;}
.cardOverUsers-head{margin-right:20rpx; width: 60rpx; height: 60rpx; vertical-align: middle; border: 0 none; border-radius: 32rpx;}
.red{color: #EE3A43}
.subtitleColor{color: #AFDBF6!important}
@keyframes in{
  from{opacity:0;transform:translate3d(0,100%,0);top: 200rpx;}
  to{opacity:1;transform:none;top:180rpx;}
}
@keyframes out{
  from{opacity:1;transform:none;top:180rpx;}
  to{opacity:0;transform:translate3d(0,-100%,0);top: 140rpx;}
}