@use './common.scss' as *; 
 | 
  
 | 
.order-card { 
 | 
  border-radius: 24px; 
 | 
  padding: 40px 28px; 
 | 
  margin-bottom: 32px; 
 | 
  background-color: #fff; 
 | 
  
 | 
  &:last-child { 
 | 
    margin-bottom: 0; 
 | 
  } 
 | 
  
 | 
  .order-card-title { 
 | 
    display: flex; 
 | 
    border-bottom: 1px solid #f3f3f3; 
 | 
    padding-bottom: 32px; 
 | 
    margin-bottom: 32px; 
 | 
  
 | 
    .order-card-title-left { 
 | 
      display: flex; 
 | 
      flex-direction: column; 
 | 
      justify-content: space-between; 
 | 
      color: #333333; 
 | 
      flex: 1; 
 | 
      min-width: 0; 
 | 
      margin-right: 56px; 
 | 
  
 | 
      .order-card-title-text { 
 | 
        font-size: 30px; 
 | 
        line-height: 42px; 
 | 
        font-weight: 400; 
 | 
        display: flex; 
 | 
        align-items: center; 
 | 
  
 | 
        &::before { 
 | 
          content: ''; 
 | 
          display: inline-block; 
 | 
          width: 8px; 
 | 
          height: 24px; 
 | 
          background-color: #fa4640; 
 | 
          border-radius: 24px; 
 | 
          margin-right: 12px; 
 | 
        } 
 | 
      } 
 | 
    } 
 | 
  
 | 
    .order-card-title-ordernum { 
 | 
      font-size: 28px; 
 | 
      line-height: 40px; 
 | 
      color: #575b6c; 
 | 
      @include ellipsis; 
 | 
    } 
 | 
  
 | 
    .order-card-title-status { 
 | 
      width: 116px; 
 | 
      height: 116px; 
 | 
  
 | 
      img { 
 | 
        width: 100%; 
 | 
        height: 100%; 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
  
 | 
  .order-card-content { 
 | 
    padding-bottom: 26px; 
 | 
  } 
 | 
  
 | 
  .order-card-footer { 
 | 
    display: flex; 
 | 
    justify-content: flex-end; 
 | 
    padding-top: 32px; 
 | 
    border-top: solid 1px #f7f7f7; 
 | 
  } 
 | 
  
 | 
  .order-card-action { 
 | 
    display: flex; 
 | 
    justify-content: center; 
 | 
    align-items: center; 
 | 
    padding: 6px 24px; 
 | 
    color: boleGetCssVar('color', 'primary'); 
 | 
    font-size: 26px; 
 | 
    line-height: 36px; 
 | 
    border: 1px solid boleGetCssVar('color', 'primary'); 
 | 
    border-radius: 8px; 
 | 
  } 
 | 
} 
 | 
  
 | 
.order-card-item { 
 | 
  display: flex; 
 | 
  font-size: 28px; 
 | 
  line-height: 48px; 
 | 
  margin-bottom: 8px; 
 | 
  
 | 
  .order-card-item-label { 
 | 
    color: #333333; 
 | 
  } 
 | 
  
 | 
  .order-card-item-value { 
 | 
    color: #666666; 
 | 
    flex: 1; 
 | 
    min-width: 0; 
 | 
  } 
 | 
  
 | 
  &.danger { 
 | 
    .order-card-item-value { 
 | 
      color: boleGetCssVar('color', 'danger'); 
 | 
    } 
 | 
  } 
 | 
  
 | 
  &:last-child { 
 | 
    margin-bottom: 0; 
 | 
  } 
 | 
} 
 |