@import '@/style/covert.scss';

$design_width:1712;
$design_height:856;
.user-info{
  width: toVw(424,$design_width);
  &-card-1{
    height: toVh(160,1080);
    background: linear-gradient(360deg, #2DB058 0%, #29B84F 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .user-count-value{
      font-size: 4.33rem;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 6.08rem;
      &:after{
        content: '人';
        font-size: 3rem;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
    .user-count-meta{
      font-size: 2rem;
      color: #F4F5F7;
      line-height: 2.75rem;
    }
  }
  &-card-2,&-card-3{
    background: linear-gradient(180deg, rgba(238,239,242,0.9) 0%, #FFFFFF 100%);
    box-shadow: 0px 10px 20px 0px rgba(23,29,52,0.2), inset 0px 1px 3px 0px #FFFFFF;
    border-radius: 32px;
    border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)) 2 2;
    backdrop-filter: blur(10px);
    margin-top: 16px;
  }
  &-card-2,&-card-3{
    .card-header{
      &-icon{
        background: #51B986;
      }

    }
  }
  &-card-2{
    height: toVh(355,1080);
    .card-info-1,.card-info-2{
      display: flex;
      align-items: center;
      .add, .active,.user-auth,.flyer-auth{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .label{
          font-size: 1.67rem;
          color: #5B5B5B;
          margin-top: 13px;
          line-height: 2.33rem;
        }
        .value{
          font-size: 2.67rem;
          line-height: 3.75rem;
          font-weight: bold;
        }
      }
    }
    .card-info-1{
      .add,.active{
        .value{
          color: #009531;
        }
      }
    }
    .card-info-2{
      margin-top: 2.17rem;
      .user-auth,.flyer-auth{
        .value{
          color: #FF4C30;
        }
      }

    }
  }
  &-card-3{
    height: toVh(346,1080);
    .card-header{
      .publish-count{
        font-size: 2.33rem;
        font-weight: bold;
        color: #000000;
        line-height: 3.33rem;
      }
    }
    .card-info{
      margin-bottom: 10px;
      display: flex;
      padding: 0 40px 0 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .label{
        font-size: 1.67rem;
        font-weight:bold;
        color: #5B5B5B;
        line-height: 2.33rem;
      }
      .value{
        font-size: 1.67rem;
        font-weight: bold;
        color: #000000;
        line-height: 2.33rem;
      }
    }
  }
}
