add:basin-train

src/app/basic-training/basic-training.component.html

@@ -1,3 +1,64 @@
-<p>
-  basic-training works!
-</p>
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
+    </ion-buttons>
+    <ion-title>基础训练</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="training-container">
+    <!-- 顶部介绍卡片 -->
+    <ion-card class="intro-card">
+      <ion-card-header>
+        <ion-card-title>篮球基础训练</ion-card-title>
+        <ion-card-subtitle>打好基础，提升技能</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        基础训练是提升篮球技能的关键。通过系统的训练，可以帮助您掌握篮球基本功，为进阶训练打下坚实基础。
+      </ion-card-content>
+    </ion-card>
+
+    <!-- 训练项目列表 -->
+    <div class="training-list">
+      <ion-card class="training-item" *ngFor="let item of trainingItems">
+        <div class="training-header">
+          <div class="training-icon">
+            <ion-icon [name]="item.icon"></ion-icon>
+          </div>
+          <div class="training-info">
+            <h2>{{item.title}}</h2>
+            <p class="duration">
+              <ion-icon name="time-outline"></ion-icon>
+              {{item.duration}}分钟
+            </p>
+          </div>
+          <ion-button fill="clear" (click)="item.expanded = !item.expanded">
+            <ion-icon [name]="item.expanded ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
+          </ion-button>
+        </div>
+
+        <div class="training-content" *ngIf="item.expanded">
+          <div class="training-video" *ngIf="item.videoUrl">
+            <video controls [poster]="item.posterUrl">
+              <source [src]="item.videoUrl" type="video/mp4">
+            </video>
+          </div>
+          <div class="training-steps">
+            <h3>训练步骤</h3>
+            <ol>
+              <li *ngFor="let step of item.steps">{{step}}</li>
+            </ol>
+          </div>
+          <div class="training-tips">
+            <h3>训练要点</h3>
+            <ul>
+              <li *ngFor="let tip of item.tips">{{tip}}</li>
+            </ul>
+          </div>
+        </div>
+      </ion-card>
+    </div>
+  </div>
+</ion-content>

src/app/basic-training/basic-training.component.scss

@@ -0,0 +1,168 @@
+.training-container {
+  padding: 16px;
+  background: #f5f7fa;
+}
+
+.intro-card {
+  background: linear-gradient(135deg, #4CAF50, #2196F3);
+  color: white;
+  margin-bottom: 20px;
+  border-radius: 16px;
+  
+  ion-card-header {
+    padding: 20px;
+    
+    ion-card-title {
+      font-size: 1.5em;
+      font-weight: 600;
+      color: white;
+    }
+    
+    ion-card-subtitle {
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 1.1em;
+      margin-top: 8px;
+    }
+  }
+  
+  ion-card-content {
+    padding: 0 20px 20px;
+    font-size: 1em;
+    line-height: 1.6;
+    color: rgba(255, 255, 255, 0.9);
+  }
+}
+
+.training-item {
+  background: white;
+  border-radius: 16px;
+  margin-bottom: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  
+  .training-header {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    
+    .training-icon {
+      width: 48px;
+      height: 48px;
+      background: linear-gradient(135deg, #4CAF50, #45b649);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16px;
+      
+      ion-icon {
+        font-size: 24px;
+        color: white;
+      }
+    }
+    
+    .training-info {
+      flex: 1;
+      
+      h2 {
+        margin: 0;
+        font-size: 1.2em;
+        font-weight: 600;
+        color: #2c3e50;
+      }
+      
+      .duration {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        color: #666;
+        margin: 4px 0 0;
+        font-size: 0.9em;
+        
+        ion-icon {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  
+  .training-content {
+    padding: 0 16px 16px;
+    
+    .training-video {
+      margin-bottom: 16px;
+      border-radius: 12px;
+      overflow: hidden;
+      
+      video {
+        width: 100%;
+        border-radius: 12px;
+      }
+    }
+    
+    .training-steps, .training-tips {
+      margin-bottom: 16px;
+      
+      h3 {
+        color: #2c3e50;
+        font-size: 1.1em;
+        margin-bottom: 12px;
+      }
+      
+      ol, ul {
+        margin: 0;
+        padding-left: 20px;
+        
+        li {
+          color: #666;
+          margin-bottom: 8px;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+}
+
+// 动画效果
+.training-item {
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-2px);
+  }
+  
+  .training-content {
+    animation: slideDown 0.3s ease-out;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// 响应式调整
+@media (max-width: 480px) {
+  .training-container {
+    padding: 12px;
+  }
+  
+  .training-item .training-header {
+    padding: 12px;
+    
+    .training-icon {
+      width: 40px;
+      height: 40px;
+      
+      ion-icon {
+        font-size: 20px;
+      }
+    }
+  }
+}

src/app/basic-training/basic-training.component.ts

@@ -1,15 +1,90 @@
 import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+interface TrainingItem {
+  title: string;
+  icon: string;
+  duration: number;
+  videoUrl?: string;
+  posterUrl?: string;
+  steps: string[];
+  tips: string[];
+  expanded: boolean;
+}
 
 @Component({
   selector: 'app-basic-training',
   templateUrl: './basic-training.component.html',
   styleUrls: ['./basic-training.component.scss'],
   standalone: true,
+  imports: [CommonModule, IonicModule]
 })
-export class BasicTrainingComponent  implements OnInit {
+export class BasicTrainingComponent implements OnInit {
+  trainingItems: TrainingItem[] = [
+    {
+      title: '运球基础训练',
+      icon: 'basketball-outline',
+      duration: 20,
+      videoUrl: 'assets/videos/dribbling.mp4',
+      posterUrl: 'assets/images/dribbling-poster.jpg',
+      steps: [
+        '双手交替运球，保持球的高度在腰部',
+        '原地快速运球，逐渐加快频率',
+        '行进间运球，保持球的控制',
+        '变向运球练习，包括体前变向和背后变向'
+      ],
+      tips: [
+        '保持重心稳定，膝盖微曲',
+        '用手指而不是手掌控制球',
+        '眼睛要看前方，不要盯着球',
+        '运球时保持放松，不要太过用力'
+      ],
+      expanded: false
+    },
+    {
+      title: '投篮基本功',
+      icon: 'aperture-outline',
+      duration: 30,
+      videoUrl: 'assets/videos/shooting.mp4',
+      posterUrl: 'assets/images/shooting-poster.jpg',
+      steps: [
+        '练习投篮姿势，保持肘部垂直',
+        '近距离投篮练习',
+        '中距离跳投练习',
+        '罚球线投篮练习'
+      ],
+      tips: [
+        '保持手肘靠近身体',
+        '投篮时手腕要有力度下压',
+        '注意力集中在篮筐前沿',
+        '投篮后要保持姿势不变'
+      ],
+      expanded: false
+    },
+    {
+      title: '传球练习',
+      icon: 'swap-horizontal-outline',
+      duration: 15,
+      videoUrl: 'assets/videos/passing.mp4',
+      posterUrl: 'assets/images/passing-poster.jpg',
+      steps: [
+        '胸前传球练习',
+        '地板传球练习',
+        '头上传球练习',
+        '行进间传球练习'
+      ],
+      tips: [
+        '传球要快速准确',
+        '传球后要迅速准备接球',
+        '注意传球的力度控制',
+        '保持与队友的眼神交流'
+      ],
+      expanded: false
+    }
+  ];
 
   constructor() { }
 
-  ngOnInit() {}
-
+  ngOnInit() { }
 }

src/app/tabs/tabs.page.ts

@@ -1,7 +1,7 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { triangle, ellipse, square, chevronBackOutline, chevronForwardOutline, basketballOutline, trophyOutline, peopleOutline, trendingUpOutline, logInOutline, personAddOutline, cameraOutline, pencil, pencilOutline, createOutline, logOutOutline, bookOutline, fitnessOutline, heartCircleOutline, heartCircle, heartHalfOutline, heartOutline, chatbubblesOutline, shieldOutline, flashOutline, speedometerOutline, timerOutline, medalOutline } from 'ionicons/icons';
+import { triangle, ellipse, square, chevronBackOutline, chevronForwardOutline, basketballOutline, trophyOutline, peopleOutline, trendingUpOutline, logInOutline, personAddOutline, cameraOutline, pencil, pencilOutline, createOutline, logOutOutline, bookOutline, fitnessOutline, heartCircleOutline, heartCircle, heartHalfOutline, heartOutline, chatbubblesOutline, shieldOutline, flashOutline, speedometerOutline, timerOutline, medalOutline, timeOutline, chevronDownOutline, chevronUpOutline, apertureOutline, swapHorizontalOutline } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -17,6 +17,6 @@ export class TabsPage {
     addIcons({ triangle, ellipse, square,chevronBackOutline,chevronForwardOutline,basketballOutline,trophyOutline
       ,peopleOutline,trendingUpOutline,logInOutline,personAddOutline,cameraOutline,pencilOutline,pencil,createOutline,logOutOutline
     ,bookOutline,fitnessOutline,heartOutline,heartHalfOutline,heartCircleOutline,heartCircle,chatbubblesOutline,speedometerOutline,
-    shieldOutline,flashOutline,timerOutline,medalOutline});
+    shieldOutline,flashOutline,timerOutline,medalOutline,timeOutline,chevronUpOutline,chevronDownOutline,apertureOutline,swapHorizontalOutline});
   }
 }