.points-and-coupons-page {
    .ion-page {
      background: linear-gradient(180deg, #f4f5f8 0%, #eef1f5 100%); /* 背景渐变 */
    }
  
    ion-content {
      --background: #fff;
      padding: 16px;
    }
  
    section {
      margin-bottom: 24px;
    }
  
    h3 {
      font-size: 1.2rem;
      margin-bottom: 12px;
      color: #333;
      text-align: center;
    }

    .section-title {
        font-size: 1.6rem; /* 增大字体大小 */
        margin-bottom: 24px; /* 增加下边距 */
        color: #333;
        text-align: center; /* 水平居中文本 */
        font-weight: bold; /* 加粗字体 */
        letter-spacing: 0.5px; /* 字符间距 */
        text-transform: uppercase; /* 转换为大写 */
        padding: 8px 0; /* 内边距 */
        border-bottom: 2px solid #eaeaea; /* 底部细线 */
        display: inline-block; /* 确保装饰线只应用于文本宽度 */
        background: linear-gradient(90deg, #ffcc00, #ff9900); /* 渐变背景 */
        -webkit-background-clip: text; /* 文字剪裁 */
        -webkit-text-fill-color: transparent; /* 文字填充透明 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
      }
  
    .points-display {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 24px;
  
      h1 {
        font-size: 2.4rem;
        font-weight: bold;
        color: #007aff;
      }
  
      p {
        font-size: 1rem;
        color: #666;
      }
    }
  
    .promotion-item {
      --border-width: 0;
      --padding-start: 16px;
      --padding-end: 16px;
  
      &:not(:last-child) {
        border-bottom: 1px solid #eaeaea;
      }
    }
  
    ion-card {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      overflow: hidden;
  
      img {
        width: 100%;
        height: auto;
      }
  
      ion-card-content {
        padding: 16px;
        text-align: center;
      }
    }
  
    ion-button {
      margin-top: 16px;
      width: 100%;
      border-radius: 8px;
      transition: transform 0.2s ease-in-out;
  
      &:active {
        transform: scale(0.95); /* 按钮按下时缩小 */
      }
    }
  
    /* 返回按钮的样式 */
    ion-back-button {
      --color: #007aff;
    }

    .gift-image {
        width: 100%; /* 图片宽度填满容器 */
        height: 150px; /* 固定高度 */
        object-fit: cover; /* 保持图片比例并裁剪超出部分 */
        display: block; /* 避免图片下方出现空隙 */
      }
    
      ion-card {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        overflow: hidden;
    
        img {
          width: 100%;
          height: 150px; /* 继承上面定义的高度 */
          object-fit: cover;
        }
    
        ion-card-content {
          padding: 16px;
          text-align: center;
        }
      }
    
  }