billiard-app/src/pagesOrder/rechargeDetail/index.scss

.recharge-detail-page {
  padding: 30px;
  background-color: #F2F3F5;
  min-height: 100vh;

  // 空数据展示
  .empty-wrap {
    .empty-month-card {
      margin-bottom: 0;
    }
  }

  .empty-data {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 150px 0;

    .empty-image {
      width: 400px;
      height: 400px;
    }
  }

  // 月份卡片
  .month-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    margin-bottom: 30px;

    // 月份标题行
    .month-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 36px 30px;

      .month-left {
        display: flex;
        align-items: center;
        gap: 10px;

        .month-text {
          font-size: 33px;
          color: #000000;
        }

        .month-arrow {
          flex-shrink: 0;
        }
      }

      .month-right {
        display: flex;
        align-items: baseline;
        gap: 4px;

        .amount-label {
          font-size: 25px;
          color: #999999;
          margin-right: 8px;
        }

        .amount-symbol {
          font-size: 25px;
          color: #000000;
        }

        .amount-value {
          font-size: 30px;
          color: #000000;
        }
      }
    }

    // 分割线
    .divider {
      height: 1px;
      background-color: #F2F3F5;
    }

    // 记录列表
    .record-list {
      padding: 20px;

      .record-item {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .item-row {
          display: flex;
          align-items: baseline;
          justify-content: space-between;

          .store-name {
            font-size: 33px;
            color: #000000;
            flex: 1;
          }

          .status {
            font-size: 32px;
            color: #D0955E;
          }

          .recharge-type {
            font-size: 25px;
            color: #333333;
          }

          .recharge-time {
            font-size: 22px;
            color: #999999;
          }

          .actual-pay {
            display: flex;
            align-items: baseline;

            .pay-label {
              font-size: 22px;
              color: #595959;
            }

            .pay-amount {
              font-size: 33px;
              color: #000000;
            }
          }
        }
      }

      // item 之间的分割线
      .item-divider {
        height: 1px;
        background-color: #F2F3F5;
        margin: 20px 0;
      }
    }
  }

  // 到底了提示
  .list-end {
    text-align: center;
    padding: 40px 0;

    .end-text {
      font-size: 25px;
      color: #999999;
    }
  }
}