.tabsBack {
  height: 76rpx;
  background: #F5F8F7;
  border-radius: 24rpx;

  .tabs-item {
    padding: 8rpx 20rpx !important;
  }

  .current {
    background: #FFF;
    border-radius: 18rpx;
    background-clip: content-box;

    &:after {
      display: none !important;
    }
  }
}

.tabs {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 30rpx;


  .tabs-scroll {
    white-space: nowrap;
    position: relative;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    align-items: center;
  }

  .tabs-item {
    padding: 16rpx 25rpx;
    font-size: 30rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #606563;
    box-sizing: border-box;
    width: 100%;
    border-radius: 90rpx;
    transition: background-color 300ms;
  }

  .current {
    position: relative;
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #323635;

    &:after {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 32rpx;
      height: 6rpx;
      background: #45D4A8;
      border-radius: 12rpx;
      opacity: 1;
      content: '';
      display: block;
      animation: spread 200ms ease-out;
      transform: translateX(-18rpx);
      transition: all 200ms;
    }
  }
}

@keyframes spread {
  from {
    width: 0%;
    transform: translateX(0);
  }

  to {
    width: 32rpx;
    transform: translateX(-18rpx);
  }
}
