1

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

@@ -25,7 +25,7 @@ export class BasicTrainingComponent implements OnInit {
     {
       title: '运球基础训练',
       icon: 'basketball-outline',
-      duration: 20,
+      duration: 3,
       videoUrl: 'assets/videos/dribbling.mp4',
       posterUrl: 'assets/images/dribbling-poster.jpg',
       steps: [
@@ -45,7 +45,7 @@ export class BasicTrainingComponent implements OnInit {
     {
       title: '投篮基本功',
       icon: 'aperture-outline',
-      duration: 30,
+      duration: 3,
       videoUrl: 'assets/videos/shooting.mp4',
       posterUrl: 'assets/images/shooting-poster.jpg',
       steps: [
@@ -65,7 +65,7 @@ export class BasicTrainingComponent implements OnInit {
     {
       title: '传球练习',
       icon: 'swap-horizontal-outline',
-      duration: 15,
+      duration: 2,
       videoUrl: 'assets/videos/passing.mp4',
       posterUrl: 'assets/images/passing-poster.jpg',
       steps: [

src/app/information/information.component.html

@@ -0,0 +1,112 @@
+<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="coach-profile">
+    <!-- 教练基本信息卡片 -->
+    <div class="profile-header">
+      <div class="avatar-container">
+        <img src="assets/tab1.img/zhang.png" alt="教练张" class="coach-avatar">
+      </div>
+      <div class="basic-info">
+        <h1>教练张</h1>
+        <div class="tags">
+          <span class="tag">专业教练</span>
+          <span class="tag">10年经验</span>
+          <span class="tag">CBA退役</span>
+        </div>
+        <div class="rating">
+          <ion-icon name="star" color="warning"></ion-icon>
+          <ion-icon name="star" color="warning"></ion-icon>
+          <ion-icon name="star" color="warning"></ion-icon>
+          <ion-icon name="star" color="warning"></ion-icon>
+          <ion-icon name="star-half" color="warning"></ion-icon>
+          <span>4.8 (208条评价)</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 教练详细信息 -->
+    <div class="info-section">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>个人简介</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <p>前CBA职业球员，拥有10年以上的篮球训练经验。专注于青少年篮球技术培训，擅长投篮技巧和防守战术指导。</p>
+        </ion-card-content>
+      </ion-card>
+
+      <!-- 专业特长 -->
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>专业特长</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <div class="skills-grid">
+            <div class="skill-item">
+              <ion-icon name="basketball-outline"></ion-icon>
+              <span>投篮技巧</span>
+              <div class="skill-bar">
+                <div class="skill-level" style="width: 95%"></div>
+              </div>
+            </div>
+            <div class="skill-item">
+              <ion-icon name="shield-outline"></ion-icon>
+              <span>防守指导</span>
+              <div class="skill-bar">
+                <div class="skill-level" style="width: 90%"></div>
+              </div>
+            </div>
+            <div class="skill-item">
+              <ion-icon name="flash-outline"></ion-icon>
+              <span>战术布置</span>
+              <div class="skill-bar">
+                <div class="skill-level" style="width: 85%"></div>
+              </div>
+            </div>
+          </div>
+        </ion-card-content>
+      </ion-card>
+
+      <!-- 教练成就 -->
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>教练成就</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <div class="achievements">
+            <div class="achievement-item">
+              <ion-icon name="trophy-outline"></ion-icon>
+              <div class="achievement-text">
+                <h3>青少年篮球联赛最佳教练</h3>
+                <p>2022-2023赛季</p>
+              </div>
+            </div>
+            <div class="achievement-item">
+              <ion-icon name="medal-outline"></ion-icon>
+              <div class="achievement-text">
+                <h3>市级篮球训练营金牌教练</h3>
+                <p>2021-2022</p>
+              </div>
+            </div>
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </div>
+
+    <!-- 预约按钮 -->
+    <div class="booking-section">
+      <ion-button expand="block" class="booking-btn" (click)="bookCoach()">
+        <ion-icon name="calendar-outline" slot="start"></ion-icon>
+        教练陪练
+      </ion-button>
+    </div>
+  </div>
+</ion-content>

src/app/information/information.component.scss

@@ -0,0 +1,189 @@
+.coach-profile {
+  background: #f5f7fa;
+  min-height: 100%;
+}
+
+.profile-header {
+  background: linear-gradient(135deg, #4CAF50, #2196F3);
+  padding: 30px 20px;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  
+  .avatar-container {
+    .coach-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 60px;
+      border: 4px solid rgba(255, 255, 255, 0.9);
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    }
+  }
+  
+  .basic-info {
+    h1 {
+      margin: 0 0 10px;
+      font-size: 1.8em;
+      font-weight: 600;
+    }
+    
+    .tags {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 10px;
+      
+      .tag {
+        background: rgba(255, 255, 255, 0.2);
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 0.9em;
+      }
+    }
+    
+    .rating {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      
+      ion-icon {
+        font-size: 18px;
+      }
+      
+      span {
+        margin-left: 8px;
+        font-size: 0.9em;
+        opacity: 0.9;
+      }
+    }
+  }
+}
+
+.info-section {
+  padding: 20px;
+  
+  ion-card {
+    border-radius: 16px;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    
+    ion-card-header {
+      padding: 16px;
+      
+      ion-card-title {
+        font-size: 1.2em;
+        font-weight: 600;
+        color: #2c3e50;
+      }
+    }
+    
+    ion-card-content {
+      padding: 0 16px 16px;
+      color: #666;
+      line-height: 1.6;
+    }
+  }
+}
+
+.skills-grid {
+  display: grid;
+  gap: 16px;
+  
+  .skill-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    
+    ion-icon {
+      font-size: 24px;
+      color: #4CAF50;
+    }
+    
+    span {
+      min-width: 80px;
+      color: #2c3e50;
+    }
+    
+    .skill-bar {
+      flex: 1;
+      height: 6px;
+      background: #eee;
+      border-radius: 3px;
+      overflow: hidden;
+      
+      .skill-level {
+        height: 100%;
+        background: linear-gradient(90deg, #4CAF50, #45b649);
+        border-radius: 3px;
+      }
+    }
+  }
+}
+
+.achievements {
+  display: grid;
+  gap: 16px;
+  
+  .achievement-item {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    
+    ion-icon {
+      font-size: 28px;
+      color: #FFC107;
+    }
+    
+    .achievement-text {
+      h3 {
+        margin: 0;
+        font-size: 1.1em;
+        color: #2c3e50;
+      }
+      
+      p {
+        margin: 4px 0 0;
+        font-size: 0.9em;
+        color: #666;
+      }
+    }
+  }
+}
+
+.booking-section {
+  position: sticky;
+  bottom: 0;
+  padding: 16px;
+  background: white;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
+  
+  .booking-btn {
+    --background: linear-gradient(45deg, #4CAF50, #45b649);
+    --border-radius: 12px;
+    font-size: 1.1em;
+    
+    ion-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+// 响应式调整
+@media (max-width: 480px) {
+  .profile-header {
+    flex-direction: column;
+    text-align: center;
+    
+    .avatar-container {
+      margin-bottom: 20px;
+    }
+    
+    .tags {
+      justify-content: center;
+    }
+    
+    .rating {
+      justify-content: center;
+    }
+  }
+}

src/app/information/information.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { InformationComponent } from './information.component';
+
+describe('InformationComponent', () => {
+  let component: InformationComponent;
+  let fixture: ComponentFixture<InformationComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [InformationComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InformationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/information/information.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-information',
+  templateUrl: './information.component.html',
+  styleUrls: ['./information.component.scss'],
+  standalone: true,
+  imports: [CommonModule, IonicModule]
+})
+export class InformationComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() {}
+
+  bookCoach() {
+    // 实现预约功能
+    console.log('预约教练');
+  }
+}

src/app/tab1/tab1.page.html

@@ -110,7 +110,7 @@
               <h2>{{ coach.name }}</h2>
               <p>风格: {{ coach.style }}</p>
             </ion-label>
-            <ion-button slot="end">选择</ion-button>
+            <ion-button slot="end" (click)="goToinformation()">选择</ion-button>
           </ion-item>
         </ion-list>
       </ion-card-content>

src/app/tab1/tab1.page.ts

@@ -184,4 +184,7 @@ export class Tab1Page {
   goToBasicTraining() {
     this.router.navigate(['tabs/basic-training']);
   }
+  goToinformation() {
+    this.router.navigate(['tabs/information']);
+  }
 }

src/app/tabs/tabs.page.html

@@ -16,3 +16,11 @@
     </ion-tab-button>
   </ion-tab-bar>
 </ion-tabs>
+
+
+
+
+
+
+
+<!-- obsutil sync ./report202226701024 obs://nova-cloud/dev/jxnu/202226701024/report  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com" -acl=public-read -->

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, timeOutline, chevronDownOutline, chevronUpOutline, apertureOutline, swapHorizontalOutline } 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, calendarOutline } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -17,6 +17,7 @@ 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,timeOutline,chevronUpOutline,chevronDownOutline,apertureOutline,swapHorizontalOutline});
+    shieldOutline,flashOutline,timerOutline,medalOutline,timeOutline,chevronUpOutline,chevronDownOutline,apertureOutline,swapHorizontalOutline
+    ,calendarOutline});
   }
 }

src/app/tabs/tabs.routes.ts

@@ -51,6 +51,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../basic-training/basic-training.component').then((m) => m.BasicTrainingComponent),
       },
+      {
+        path: 'information',
+        loadComponent: () =>
+          import('../information/information.component').then((m) => m.InformationComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',