.medical-services-page {
    .ion-page {
      background: linear-gradient(180deg, #f4f5f8 0%, #eef1f5 100%); /* 背景渐变 */
    }
  
    ion-content {
      --background: #fff;
      padding: 16px;
    }
  
    .services-section,
    .appointment-section,
    .consultation-section {
      margin-bottom: 24px;
    }
  
    h3 {
      font-size: 1.2rem;
      margin-bottom: 12px;
      color: #333;
    }
  
    .service-item {
      --border-width: 0;
      --padding-start: 16px;
      --padding-end: 16px;
  
      &:not(:last-child) {
        border-bottom: 1px solid #eaeaea;
      }
    }
  
    .service-icon {
      font-size: 1.2rem;
      color: #007aff;
    }
  
    h2 {
      font-size: 1.1rem;
      font-weight: 500;
    }
  
    p {
      color: #666;
      margin-top: 4px;
    }
  
    ion-card {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      overflow: hidden;
  
      .status-bar {
        display: block;
        width: 100%;
        padding: 4px 0;
        text-align: center;
        color: white;
        &.pending {
          background-color: #ff9900; /* 待处理预约的颜色 */
        }
      }
  
      ion-card-header {
        background-color: #ffefef;
        border-bottom: 1px solid #ffcccc;
      }
  
      ion-card-content {
        padding: 16px;
      }
    }
  
    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;
    }
  }