s202226701024/ballfire/src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-item lines="none">
      <!-- 图片 -->
      <ion-avatar slot="start" class="image-container">
        <img src="/assets/img/1.png" alt="Your Image" class="header-image">
      </ion-avatar>
      <!-- 搜索框 -->
      <ion-searchbar slot="end" expand="with-icon" (ionInput)="onSearch($event)"></ion-searchbar>
    </ion-item>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 训练心得交流区 -->
  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>训练心得交流区</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
          <ion-item *ngFor="let topic of topics">
            <ion-label>
              <h2>{{ topic.title }}</h2>
              <p>参与人数: {{ topic.participants }}</p>
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
  </section>

  <!-- 教练指导区 -->
  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>教练指导区</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
          <ion-item *ngFor="let coach of coaches">
            <ion-avatar slot="start">
              <img [src]="coach.avatar" alt="{{ coach.name }}">
            </ion-avatar>
            <ion-label>
              <h2>{{ coach.name }}</h2>
              <p>风格: {{ coach.style }}</p>
            </ion-label>
            <ion-button slot="end" (click)="selectCoach(coach)">选择</ion-button>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
  </section>

  <!-- 发帖区 -->
  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>发帖</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-label position="floating">发帖标题</ion-label>
          <ion-input [(ngModel)]="newPost.title"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="floating">发帖内容</ion-label>
          <ion-textarea [(ngModel)]="newPost.content"></ion-textarea>
        </ion-item>
        <ion-button expand="full" (click)="submitPost()">发布</ion-button>
      </ion-card-content>
    </ion-card>
  </section>
</ion-content>