s202226701051/word-app/src/app/tab2/tab2.page.html

<ion-content [fullscreen]="true" class="tab2-content">
  
   <!-- 顶部轮播图 -->
  <div class="carousel-wrapper">
    <div class="carousel-container">
      <div class="carousel-track" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
        <!-- 第一张 -->
        <div class="slide-item">
          <div class="slide-bg" style="background: linear-gradient(135deg, #A8D8EA 0%, #AA96DA 100%);"></div>
          <div class="slide-content">
            <h2>真的能上榜</h2>
            <p>Get on the list</p>
            <button class="challenge-btn">开始挑战</button>
          </div>
          <img src="assets/images/banner1.png" alt="banner">
        </div>
        
        <!-- 第二张 -->
        <div class="slide-item">
          <div class="slide-bg" style="background: linear-gradient(135deg, #FCBAD3 0%, #FFFFD2 100%);"></div>
          <div class="slide-content">
            <h2>每日打卡</h2>
            <p>坚持就是胜利</p>
            <button class="challenge-btn">立即打卡</button>
          </div>
          <img src="assets/images/banner2.png" alt="banner">
        </div>
      </div>
    </div>
    
    <!-- 轮播指示器 -->
    <div class="carousel-dots">
      <span 
        class="dot" 
        *ngFor="let dot of [0, 1]; let i = index"
        [class.active]="currentSlide === i"
        (click)="goToSlide(i)">
      </span>
    </div>
  </div>
  <!-- 专项训练标题 -->
  <div class="section-header">
    <h3>趣味学习</h3>
    <ion-icon name="information-circle-outline" class="info-icon"></ion-icon>
  </div>

  <!-- 训练卡片网格 - 每行4个 -->
  <div class="training-grid">
    <!-- 第一行 -->
    <div class="training-card" >
      <div class="card-icon">
        <img src="assets/icon/轻松回顾.svg" alt="轻松回顾">
      </div>
      <span class="card-title">轻松回顾</span>
    </div>

    <div class="training-card" >
      <div class="card-icon">
        <img src="assets/icon/拼写自检.svg" alt="拼写自检">
      </div>
      <span class="card-title">拼写自检</span>
    </div>

    <div class="training-card" >
      <div class="card-icon">
        <img src="assets/icon/单词听写.svg" alt="单词听写">
      </div>
      <span class="card-title">单词听写</span>
    </div>

    <div class="training-card" >
      <div class="card-icon">
        <img src="assets/icon/听音辨义.svg" alt="听音辨义">
      </div>
      <span class="card-title">听音辨义</span>
    </div>

    <!-- 第二行 -->
    <div class="training-card" >
      <div class="card-icon">
        <img src="assets/icon/看英选义.svg" alt="看英选义">
      </div>
      <span class="card-title">看英选义</span>
    </div>

    <div class="training-card" >
      <div class="card-icon">
        <img src="assets/icon/看义选英.svg" alt="看义选英">
      </div>
      <span class="card-title">看义选英</span>
    </div>

    <div class="training-card vip" (click)="goToWordMatch()">
      <div class="card-icon">
        <img src="assets/icon/单词消消乐.svg" alt="例句填空">
      </div>
      <span class="card-title">消消乐</span>
    </div>

    <div class="training-card "  (click)="goToAIWord()">
      <div class="card-icon">
        <img src="assets/icon/AI讲单词.svg" alt="单词配对">
      </div>
      <span class="card-title">AI讲单词</span>
    </div>

    <!-- 第三行 -->
    <div class="training-card " (click)="goToAITranslate()">
      <div class="card-icon">
        <img src="assets/icon/翻译助手.svg" alt="极速刷词">
      </div>
      <span class="card-title">翻译助手</span>
    </div>

    <div class="training-card"  (click)="goToWordStory()">
      <div class="card-icon">
        <img src="assets/icon/串词成文.svg" alt="串词成文">
      </div>
      <span class="card-title">串词成文</span>
    </div>
  </div>

  <!-- 单词随身听区域 -->
  <div class="listen-section">
    <h3 class="section-title">单词随身听</h3>
    <div class="listen-cards">
      <div class="listen-card" >
        <div class="listen-icon">
          <img src="assets/icon/近期回顾.svg" alt="近期回顾">
        </div>
        <div class="listen-info">
          <h4>近期回顾</h4>
          <p>听单词磨耳朵</p>
        </div>
      </div>

      <div class="listen-card" >
        <div class="listen-icon">
          <img src="assets/icon/预习单词.svg" alt="预习单词">
        </div>
        <div class="listen-info">
          <h4>预习单词</h4>
          <p>学习准备必备</p>
        </div>
      </div>
    </div>
  </div>

</ion-content>