tf-business/pages/tabbar/user/index.scss

.user {
  width: 100vw;
  min-height: 100vh;
  background-color: rgb(247, 247, 247);

  .user-box {
    width: 100%;
    height: 100%;
    @include flex(center);
  }
  .seize {
    width: 100%;
    height: 20rpx;
    background-color: #ffffff;
  }
  .picture-bg {
    width: 100%;
    height: 372rpx;
    position: relative;
    .bg-icon {
      position: absolute;
      top: 40rpx;
      right: 30rpx;
      z-index: 2;
      @include flex(null, null, 26rpx);
    }
    .bg-image {
      width: 100%;
      height: 100%;
      filter: blur(4rpx);
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .bg-info {
      position: absolute;
      bottom: -74rpx;
      left: 32rpx;
      @include flex(null, null, 26rpx);
      .info-image {
        position: relative;
        .img {
          width: 158rpx;
          height: 158rpx;
          padding: 5rpx;
          box-sizing: border-box;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.5);
          @include flex(center);
          image {
            width: 148rpx;
            height: 148rpx;
            border-radius: 50%;
          }
        }
        .info-switch {
          width: 52rpx;
          height: 52rpx;
          position: absolute;
          right: 6rpx;
          bottom: 0;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .info-text {
        height: 150rpx;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        .text-title {
          font-size: 36rpx;
          color: #ffffff;
          font-weight: 700;
        }
        .text-lable {
          @include flex(null, null, 20rpx);
          .lable {
            font-size: 24rpx;
            color: #3d3d3d;
            padding: 4rpx 20rpx;
            background-color: #f9f9f9;
            border-radius: 30rpx;
          }
        }
      }
    }
  }
  .user-container {
    padding: 114rpx 28rpx 28rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    .user-flowing {
      width: 100%;
      height: 132rpx;
      background: linear-gradient(270deg, #fe4b1e 0%, #fb8857 100%);
      border-radius: 30rpx 30rpx 0 0;
      @include flex(null, null, null);
      .flowing-box {
        flex: 1;
        @include flex(null, column, 22rpx);
        .flowing-txt {
          font-size: 24rpx;
          color: #ffffff;
          font-weight: 600;
        }
        .flowing-price {
          font-size: 32rpx;
          color: #ffffff;
          font-weight: 600;
        }
      }
      .left {
        position: relative;
        &::after {
          content: "";
          width: 4rpx;
          height: 95%;
          background-color: #ffffff;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .user-account {
      width: 100%;
      .account-top {
        width: 100%;
        padding: 36rpx 0;
        padding-right: 16rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #e4e4e4;
        @include flex(space-between);
        text {
          font-size: 28rpx;
          color: #333333;
          font-weight: 600;
        }
      }
      .account-bottom {
        width: 100%;
        @include flex(null, null, null);
        flex-wrap: wrap;
        .bottom-box {
          width: 25%;
          margin-top: 20rpx;
          @include flex(center, column, 20rpx);
          image{
            width: 50rpx;
            height: 50rpx;
            display: block;
          }
          text{
            font-size: 28rpx;
            color: #666666;
          }
        }
      }
    }
  }
}

.number {
    line-height: 30rpx;
    transition: transform 0.3s linear;
  }