s202226701024/src/app/tab1/tab1.page.scss

ion-header {
  background-color: #ffffff; // 设置头部背景色
  color: white; // 设置头部文字颜色
}

ion-title {
  flex: 1; // 使标题占据可用空间
  text-align: left; // 确保文字左对齐
  margin-left: 16px; // 左侧边距，可以根据需要调整
  margin-top: 5px;
}

ion-card {
  margin: 10px; // 设置卡片之间的间距
  border-radius: 10px; // 设置卡片圆角
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
}

ion-card-header {
  background-color: #d8e5fa; // 设置头部背景色
  color: white; // 设置头部文字颜色
}

ion-card-title {
  font-size: 1.2em; // 设置卡片标题字体大小
  font-weight: bold; // 设置卡片标题字体加粗
}

ion-item {
  --ion-item-background: transparent; // 设置列表项背景透明
}

ion-label {
  color: #333; // 设置标签文字颜色
}

ion-button {
  --background: #3880ff; // 设置按钮背景色
  --color: white; // 设置按钮文字颜色
  margin-top: 10px; // 设置按钮与上方内容的间距
  border-radius: 5px; // 设置按钮圆角
}

ion-avatar {
  border-radius: 50%; // 设置头像圆形
  width: 50px; // 设置头像宽度
  height: 50px; // 设置头像高度
}

h2 {
  font-size: 1em; // 设置二级标题字体大小
  margin: 0; // 去掉默认外边距
}

p {
  font-size: 0.9em; // 设置段落字体大小
  color: #666; // 设置段落文字颜色
}

ion-list {
  padding: 0; // 去掉列表内边距
}

ion-card-content {
  padding: 10px; // 设置卡片内容内边距
}

ion-content {
  --background: #f9f9f9; /* 设置内容背景色 */
}

// 轮播图部分
.banner-section {
  padding: 16px var(--page-padding);
  background: white;

  .banner-container {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      height: 250px;
      user-select: none;
      touch-action: pan-y pinch-zoom;

      .banner-img-container {
          display: flex;
          height: 100%;
          transition: transform 0.3s ease-in-out;

          img {
              min-width: 100%;
              height: 250px;
              object-fit: cover;
              pointer-events: none;
          }
      }

      .banner-indicators {
          position: absolute;
          bottom: 12px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 8px;
          z-index: 2;

          .indicator {
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: rgba(255, 255, 255, 0.5);
              transition: all 0.3s;
              cursor: pointer;

              &.active {
                  width: 18px;
                  border-radius: 3px;
                  background: white;
              }
          }
      }

      .banner-arrows {
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          transform: translateY(-50%);
          display: flex;
          justify-content: space-between;
          padding: 0 16px;
          pointer-events: none;

          .arrow-btn {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              background: rgba(0, 0, 0, 0.3);
              border: none;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              pointer-events: auto;
              transition: all 0.3s;

              &:hover {
                  background: rgba(0, 0, 0, 0.5);
              }

              ion-icon {
                  font-size: 20px;
              }
          }
      }
  }  
}

// 最近在学部分
.recent-learning {
  padding: 16px var(--page-padding);
  background: white;
  margin-top: 8px;

  .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h2 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: #333;
      }

      .view-all {
          display: flex;
          align-items: center;
          gap: 4px;
          color: #666;
          font-size: 14px;

          ion-icon {
              font-size: 16px;
          }
      }
  }
}



.learning-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;

  .learning-card {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;

      &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      img {
          width: 100%;
          height: 120px;
          object-fit: cover;
      }

      h3 {
          margin: 8px;
          font-size: 14px;
          font-weight: 500;
          color: #333;
          text-align: center;
      }
  }
}


// 功能导航区
.features-grid {
  padding: 16px var(--page-padding);
  background: white;

  .features-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-bottom: 20px;

      &:last-child {
          margin-bottom: 0;
      }
  }

  .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 8px;
      border-radius: 8px;
      transition: all 0.3s;

      &:active {
          background: rgba(182, 77, 36, 0.1);
      }

      ion-icon {
          font-size: 28px;
          color: #4CAF50;  // 主题色，可以根据需要调整
          margin-bottom: 8px;
          transition: all 0.3s ease;
      }

      &:hover {
          transform: translateY(-3px);
          
          ion-icon {
              transform: scale(1.1);
          }
      }

      // 为不同类别设置不同的图标颜色
      &:nth-child(1) ion-icon { color: #FF5722; }  // 基础训练
      &:nth-child(2) ion-icon { color: #2196F3; }  // 体能提升
      &:nth-child(3) ion-icon { color: #4CAF50; }  // 防守技巧
      &:nth-child(4) ion-icon { color: #FFC107; }  // 进攻战术
      &:nth-child(5) ion-icon { color: #9C27B0; }  // 投篮技巧

      span {
          font-size: 12px;
          color: #333;
      }
  }
}