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

$design_width:1712;
$design_height:856;
.join-info{
    margin-left: 20px;
    width: toVw(468,$design_width);
    &-card-1{
      height: toVh(160,1080);
      background: linear-gradient(316deg, #0066F5 0%, #007AFF 100%);
      border-radius: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .join-count{
        font-size: 4.33rem;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 6.08rem;
        &:after{
          content: '家';
          font-size: 3rem;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      .join-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-header{
        &-icon{
          background: #0075FC;
        }
      }
    }
    &-card-2{
      height: toVh(355,1080);
      .card-echarts{
        width: 100%;
        height: toVh(200,1080);
      }
    }
    &-card-3{
      height: toVh(346,1080);
      .card-header{
        .sku-count{
          font-size: 2.33rem;
          font-weight: bold;
          color: #010101;
          line-height: 3.33rem;
        }
      }
      .card-progress{
        padding: 0 53px 0 39px;
        margin-bottom: 19px;
        .progress-item{
          display: flex;
          align-items: center;
          &-label{
            font-size: 1.2rem;
            color: #707070;
            font-weight: bold;
          }
          &-info{
            flex: 1;
            margin: 0 36px 0 24px;
          }
          &-value{
            font-size: 1.67rem;
            font-weight: bold;
            color: #000000;
          }
        }
      }
    }
}
