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

$design_width:1712;
$design_height:856;
.trade-info{
  margin-left: 20px;
  width: toVw(740,$design_width);
  &-card-1{
    height: toVh(160,1080);
    background: linear-gradient(180deg, #B14BFF 0%, #7330B1 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    .total-price{
      font-size: 4.33rem;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 6.08rem;
      &:before{
        content: "￥";
        font-size: 3rem;
        font-weight: bold;
        color: #FFFFFF;
      }

      &-meta{
        font-size: 2rem;
        color: #F4F5F7;
        line-height: 2.75rem;
      }
    }
    .time{
      position: absolute;
      right: 2.23rem;
      top: 1.67rem;
      font-size: 1.33rem;
      color: rgba(255,255,255,0.6);
      line-height: 1.83rem;

    }
  }
  &-card-2{
    height: toVh(716,1080);
    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-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)) 2 2;
    backdrop-filter: blur(10px);
    border-radius: 32px;
    margin-top: 16px;
    .card-header{
      &-icon{
        background: #F22D40;
      }
    }
    .card-echarts{
      //transform: translateX(5%);
      width: 100%;
      height: toVh(300,1080);
    }
    .card-table{
      padding: 0 35px;
      &-header{
        display: flex;
        align-items: center;
        .header-td{
          flex: 1;
          font-size: 1.3rem;
          font-weight: bold;
          color: rgba(0,0,0,0.6);
          &:first-child{
            margin-left: 29px;
          }
          &:not(:first-child){
            text-align: center;

          }
        }
      }
      &-tr{
        margin-top: 20px;
        min-height: 46px;
        background: rgba(#D8D8D8,0.2);
        display: flex;
        align-items: center;
        .td{
          flex: 1;
          font-size: 1.5rem;
          font-weight: bold;
          color: #000000;
          &:first-child{
            margin-left: 29px;
          }
          &:not(:first-child){
            text-align: center;

          }
        }
      }
    }
  }

}
