s202226701049/AIart-app/src/app/view-all/view-all.component.html

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1" text=""></ion-back-button>
    </ion-buttons>
    <ion-title>最近在学</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="books-container">
    @for(book of recentBooks; track book.id) {
    <div class="book-card" (click)="goToBookDetail(book.id)">
      <div class="book-image">
        <img [src]="book.image" [alt]="book.title">
        <div class="progress-overlay">
          <div class="progress-bar">
            <div class="progress-fill" [style.width]="formatProgress(book.progress)"></div>
          </div>
          <span class="progress-text">{{formatProgress(book.progress)}}</span>
        </div>
      </div>

      <div class="book-info">
        <h2>{{book.title}}</h2>
        <p class="author">作者：{{book.author}}</p>
        <p class="description">{{book.description}}</p>

        <div class="book-meta">
          <span class="last-read">
            <ion-icon name="time-outline"></ion-icon>
            最近阅读：{{book.lastRead}}
          </span>
          <ion-button fill="clear" size="small">
            <ion-icon name="play-circle-outline" slot="start"></ion-icon>
            继续学习
          </ion-button>
        </div>
      </div>
    </div>
    }
  </div>
</ion-content>