@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);
      display: flex;
      .card-info-left{
        flex: 1;
        .card-header{
          padding-right: 0 !important;

        }
        .card-progress{
          padding: 0 40px 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;
            }
          }
        }
      }

      .card-info-right{
        padding: 20px  40px 0 0;
        .sku-count{
          font-size: 2.33rem;
          font-weight: bold;
          color: #010101;
          line-height: 3.33rem;
          margin-bottom: 26px;
        }
        .progress-item-value{
          font-size: 1.67rem;
          font-weight: bold;
          color: #000000;
          margin-bottom: 5px;
          text-align: center;
        }
      }
    }
}
