s202226701049/AIart-app/src/app/tab1/tab1.page.html

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="brand-header">
      <div class="brand-title">
        <div class="title-container">
          <span>AI艺速</span>
          <img src="assets/img/logo2.png" alt="AI艺速">
        </div>
      </div>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 搜索栏部分 -->
  <div class="search-section">
    <ion-searchbar mode="ios" placeholder="搜索你感兴趣的内容" class="custom-searchbar"></ion-searchbar>
    <div class="action-buttons">
      <ion-button fill="clear" class="icon-button" (click)="goTomailbox()">
        <ion-icon name="mail-outline"></ion-icon>
      </ion-button>
      <ion-button fill="clear" class="sign-in-button" (click)="goToAttendance()">
        <ion-icon name="calendar-outline"></ion-icon>
        <span>签到</span>
      </ion-button>
    </div>
  </div>
  <!-- 顶部导航栏 -->
  <div class="top-nav-section">
    <ion-segment value="home" mode="ios">
      <ion-segment-button value="home">
        <ion-label>首页</ion-label>
      </ion-segment-button>
      <ion-segment-button value="psychology" (click)="goToInterestSearch()">
        <ion-label>兴趣调查</ion-label>
      </ion-segment-button>
      <ion-segment-button value="course">
        <ion-label>课程</ion-label>
      </ion-segment-button>
      <ion-segment-button value="test" (click)="goToInterestTest()">
        <ion-label>兴趣探索</ion-label>
      </ion-segment-button>
      <ion-segment-button value="ebook" (click)="goToInterestPicture()">
        <ion-label>意境呈现</ion-label>
      </ion-segment-button>
    </ion-segment>
  </div>

  <!-- 轮播图部分 -->
  <div class="banner-section">
    <div class="banner-container" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)"
      (touchend)="onTouchEnd()">
      <div class="banner-img-container" [style.transform]="'translateX(' + translateX + 'px)'">
        <img *ngFor="let slide of slides" [src]="slide.image" [alt]="slide.alt">
      </div>
      <div class="banner-indicators">
        <span class="indicator" *ngFor="let slide of slides; let i = index" [class.active]="currentIndex === i"
          (click)="goToSlide(i)">
        </span>
      </div>
      <div class="banner-arrows">
        <button class="arrow-btn prev" (click)="prevSlide()">
          <ion-icon name="chevron-back-outline"></ion-icon>
        </button>
        <button class="arrow-btn next" (click)="nextSlide()">
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </button>
      </div>
    </div>
  </div>

  <!-- 功能导航区 -->
  <div class="features-grid">
    <div class="features-row">
      <div class="feature-item" (click)="goTodrawing()">
        <ion-icon name="brush-outline"></ion-icon>
        <span>绘画</span>
      </div>
      <div class="feature-item">
        <ion-icon name="musical-notes-outline"></ion-icon>
        <span>音乐</span>
      </div>
      <div class="feature-item">
        <ion-icon name="body-outline"></ion-icon>
        <span>舞蹈</span>
      </div>
      <div class="feature-item">
        <ion-icon name="camera-outline"></ion-icon>
        <span>摄影</span>
      </div>
      <div class="feature-item">
        <ion-icon name="book-outline"></ion-icon>
        <span>文学</span>
      </div>
    </div>

    <div class="features-row">
      <div class="feature-item">
        <ion-icon name="code-outline"></ion-icon>
        <span>编程</span>
      </div>
      <div class="feature-item">
        <ion-icon name="restaurant-outline"></ion-icon>
        <span>烹饪</span>
      </div>
      <div class="feature-item">
        <ion-icon name="fitness-outline"></ion-icon>
        <span>健身</span>
      </div>
      <div class="feature-item">
        <ion-icon name="language-outline"></ion-icon>
        <span>外语</span>
      </div>
      <div class="feature-item" (click)="openCategoryModal()">
        <ion-icon name="list-outline"></ion-icon>
        <span>全部分类</span>
      </div>
    </div>
  </div>

  <!-- 最近在学部分 -->
  <div class="recent-learning">
    <div class="section-header">
      <h2>最近在学</h2>
      <div class="view-all" (click)="goToViewAll()">
        <span>查看全部</span>
        <ion-icon name="chevron-forward-outline"></ion-icon>
      </div>
    </div>

    <div class="learning-cards">
      <div class="learning-card">
        <img src="assets/img/book1.png" alt="城南旧事">
        <h3>城南旧事</h3>
      </div>
      <div class="learning-card">
        <img src="assets/img/book2.png" alt="朝花夕拾">
        <h3>朝花夕拾</h3>
      </div>
      <div class="learning-card">
        <img src="assets/img/book3.png" alt="狂人日记">
        <h3>狂人日记</h3>
      </div>
      <div class="learning-card">
        <img src="assets/img/book4.png" alt="彷徨">
        <h3>彷徨</h3>
      </div>
    </div>
  </div>
</ion-content>