vue-ptc/src/pages/my-order/index.vue

<template>
  <div class="p-my-order">
    <h3 class="ptc-title">My Order</h3>
    <div class="ptc-block" :class="{ pb24: 1 }">
      <div class="cell-group border-bottom">
        <div class="cell">
          <span class="cell__label">Order Status</span>
          <span class="cell__value">
            <span
              class="ptc-tag"
              :class="{ 'not-paid': 1, paid: 0, canceled: 0 }"
              >Not Paid</span
            >
          </span>
        </div>
        <div class="cell">
          <span class="cell__label">Order Number</span>
          <span class="cell__value">12345678910</span>
        </div>
        <div class="cell">
          <span class="cell__label">Order Time</span>
          <span class="cell__value">2021/08/20 12:34</span>
        </div>
        <div class="cell">
          <span class="cell__label">Phone brand</span>
          <span class="cell__value">Apple iphone 12</span>
        </div>
        <div class="cell">
          <span class="cell__label">Version</span>
          <span class="cell__value">Lite(2022/7/31 Expires)</span>
        </div>
      </div>
      <div class="cell-group cell-group--compact">
        <template v-if="1">
          <div class="cell">
            <span class="cell__label">Activation fee</span>
            <span class="cell__value">$20.00</span>
          </div>
          <div class="cell">
            <span class="cell__label">Membership fee</span>
            <span class="cell__value">$8.95</span>
          </div>
          <div class="cell">
            <span class="cell__label">Discount</span>
            <span class="cell__value highlight">-$10.00</span>
          </div>
        </template>
        <div class="cell" :class="{ mt48: 1 }">
          <span class="cell__label">Cost</span>
          <span class="cell__value bold">$18.95</span>
        </div>
      </div>
      <div class="button-group">
        <button class="ptc-button ptc-button--stroke">Cancel</button>
        <button class="ptc-button">Pay 14:40</button>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.p-my-order {
  background: #f7f7f7;

  .pb24 {
    padding-bottom: 24px !important;
  }

  .cell {
    &-group {
      padding: 8px 0 48px;
      &--compact {
        padding: 48px 0 8px;
        .cell + .cell {
          margin-top: 24px;
        }
      }
    }

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32px;
    + .cell {
      margin-top: 48px;
    }

    &__label {
      color: #999;
    }
    &__value {
      color: #1a1a1a;
    }
  }

  .ptc-tag {
    &.not-paid {
      background: #dae1ef;
      color: $primary-color;
    }
    &.paid {
      background: #dae1ef;
      color: #a7b0c1;
    }
    &.canceled {
      background: #eaeaea;
      color: #999;
    }
  }

  .button-group {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    .ptc-button {
      width: 328px;
      height: 92px;
      + .ptc-button {
        margin-left: 26px;
      }
    }
  }
}
</style>