202226701004/interestCourses-app/src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>学趣定制坊</ion-title>
    <ion-searchbar placeholder="搜索兴趣课程或问题" style="margin-top: 20px;"></ion-searchbar>
    <ion-avatar slot="end">
      <img src="assets/user-avatar.png" alt="用户头像" />
    </ion-avatar>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 欢迎横幅 -->
  <ion-card>
    <ion-card-header>
      <ion-card-title>欢迎来到兴趣学习课程</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>发现你的兴趣，定制化学习路径，提升个人特长。</p>
      <ion-button expand="full" routerLink="/interest-planning">开始规划你的学习</ion-button>
    </ion-card-content>
  </ion-card>

  <!-- 功能模块展示 -->
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card routerLink="/interest-planning">
          <ion-card-header>
            <ion-card-title>兴趣规划</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <p>根据你的兴趣制定个性化学习路径。</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card routerLink="/knowledge-explanation">
          <ion-card-header>
            <ion-card-title>讲解知识</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <p>从具体问题出发，深入浅出讲解相关知识。</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card routerLink="/guidance">
          <ion-card-header>
            <ion-card-title>指导问题</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <p>提交问题，获得针对性的指导与反馈。</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 用户反馈/推荐 -->
  <ion-list>
    <ion-item>
      <ion-label>
        <h2>用户推荐：绘画课程</h2>
        <p>“这个课程帮助我提高了绘画技巧！” - 用户A</p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-label>
        <h2>用户推荐：吉他入门</h2>
        <p>“非常实用的课程，通俗易懂。” - 用户B</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>