.l-skeleton {

  &-container {
    width         : 100%;
    display       : flex;
    flex-direction: row;
    box-sizing    : border-box;
  }

  &-avatar {
    height       : 72rpx;
    width        : 72rpx;
    margin-right : 20rpx;

    &-circle{
      border-radius: 50%;
    }
  }

  &-right {
    display       : flex;
    flex-direction: column;
    flex          : 1;
  }

  &-title {
    width : 100%;
    height: 34rpx;

    &-container {
      height     : 72rpx;
      width      : 50%;
      display    : flex;
      align-items: center;
    }
  }

  &-rows {
    margin-top: 20rpx;
  }
}

.bg {
  background     : linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
  background-size: 400% 100%;
}

.active {
  animation: loading 1.4s ease infinite;
}

@keyframes loading {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}