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

<ion-content [fullscreen]="true">

  <!-- 水球组件容器 -->
  <div class="water-ball-container">
    <app-water-ball 
      [waterLevel]="waterLevel"
      [label]="'词书进度'"
      [isPulsing]="isPulsing"
      [showBubbles]="true">
    </app-water-ball>
  </div>
  
  <!-- 三个统计卡片 -->
  <div class="stats-cards-container">
    <!-- 卡片1：今日学词 -->
    <div class="stat-card">
      <div class="stat-row">
        <span class="stat-number">25</span>
        <span class="stat-unit">个</span>
      </div>
      <div class="label-row">今日学词</div>
      <div class="icon-row">
        <ion-icon src="assets/icon/今日学词.svg"></ion-icon>
      </div>
    </div>

    <!-- 卡片2：今日学习时间 -->
    <div class="stat-card">
      <div class="stat-row">
        <span class="stat-number">30</span>
        <span class="stat-unit">分钟</span>
      </div>
      <div class="label-row">今日学习</div>
      <div class="icon-row">
        <ion-icon src="assets/icon/今日学习.svg"></ion-icon>
      </div>
    </div>

    <!-- 卡片3：今日进度 -->
    <div class="stat-card">
      <div class="stat-row">
        <span class="stat-number">68</span>
        <span class="stat-unit">%</span>
      </div>
      <div class="label-row">今日进度</div>
      <div class="icon-row">
        <ion-icon src="assets/icon/今日进度.svg"></ion-icon>
      </div>
    </div>
  </div>
  
  <!-- 学习按钮区域 -->
  <div class="action-buttons-container">
    <!-- 背单词按钮 -->
    <div class="action-card" (click)="navigateToNewPage()">
      <div class="card-left">
        <div class="action-title">Learn</div>
        <div class="action-count">198</div>
      </div>
      <div class="card-right">
        <ion-icon src="assets/icon/背单词.svg" class="action-icon"></ion-icon>
      </div>
    </div>

    <!-- 复习按钮 -->
    <div class="action-card" (click)="navigateToReview()">
      <div class="card-left">
        <div class="action-title">Review</div>
        <div class="action-count">95</div>
      </div>
      <div class="card-right">
        <ion-icon src="assets/icon/复习.svg" class="action-icon"></ion-icon>
      </div>
    </div>
  </div>
</ion-content>