app-FitLife1/myapp/src/app/tab2/tab2.page.scss

// 运动主题色
:root {
    --ion-color-primary: #ff7f50;    // 活力橙
    --ion-color-primary-rgb: 255,127,80;
    --ion-color-success: #4CAF50;    // 完成绿
  }
  
  .sport-content {
    --offset-bottom: auto!important;
    background: linear-gradient(135deg, #fff3e0, #fff8e1);
    overflow-y: auto !important;
    height: calc(100vh - 44px); // 适配iOS状态栏高度
    contain: strict;
  
    // 滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
      &-thumb {
        background: rgba(0,0,0,0.1);
        border-radius: 3px;
      }
    }
  }
  
  // 统计卡片
  .stats-card {
    padding: 16px;
    background: linear-gradient(135deg, var(--ion-color-primary), #ffc107);
    border-radius: 20px 20px 0 0;
    color: white;
  
    .stat-row {
      gap: 16px;
  
      .stat-item {
        text-align: center;
        padding: 16px;
        border-radius: 12px;
        background: rgba(255,255,255,0.1);
        transition: transform 0.3s;
  
        h2 {
          font-size: 2.4rem;
          margin: 0;
          color: inherit;
        }
  
        p {
          font-size: 0.9rem;
          opacity: 0.8;
          margin: 4px 0 0;
        }
  
        ion-icon {
          font-size: 2.4rem;
          color: inherit;
        }
  
        &.active {
          background: rgba(76,175,80,0.2);
          transform: scale(1.05);
        }
      }
    }
  }
  
  // 功能卡片
  .feature-card {
    margin: 16px;
    border-radius: 16px;
    overflow: hidden;
  
    .card-item {
      padding: 16px;
      border-bottom: 1px solid rgba(0,0,0,0.05);
  
      h3 {
        margin: 0;
        font-size: 16px;
        color: #333;
      }
  
      p {
        margin: 4px 0 0;
        font-size: 0.9rem;
        color: #666;
      }
  
      ion-icon {
        color: #ff9800;
        font-size: 1.8rem;
      }
    }
  }
  
  // 训练日历
  .calendar-card {
    margin: 16px;
    border-radius: 16px;
    overflow: hidden;
  
    .calendar-body {
      padding: 16px;
  
      .week-grid {
        gap: 8px;
  
        .day-header {
          text-align: center;
          padding: 8px;
          font-size: 0.8rem;
          color: #999;
        }
  
        .day {
          aspect-ratio: 1;
          background: rgba(0,0,0,0.05);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8px;
          font-weight: bold;
  
          &.active {
            background: var(--ion-color-success);
            color: white;
          }
        }
      }
    }
  }
  
  // 底部按钮
  .action-footer {
    padding: 16px;
    background: var(--ion-color-primary);
  
    .start-btn {
      --background: white;
      --color: var(--ion-color-primary);
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-radius: 24px;
      height: 56px;
  
      ion-icon {
        margin-right: 8px;
        font-size: 1.4rem;
      }
    }
  }