s202226701049/AIart-app/src/app/music/music.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="search-container">
    <ion-searchbar placeholder="搜索音乐资讯" mode="ios" animated="true"></ion-searchbar>
  </div>

  <!-- 精选文章 -->
  <div class="featured-section">
    <h2 class="section-title">精选文章</h2>
    <div class="featured-card" *ngFor="let article of featuredArticles" (click)="openArticle(article)">
      <div class="featured-image">
        <img [src]="article.image" [alt]="article.title">
        <div class="featured-overlay">
          <div class="category-badge">{{article.category}}</div>
          <div class="featured-content">
            <h3>{{article.title}}</h3>
            <p>{{article.summary}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 最新资讯 -->
  <div class="latest-section">
    <div class="section-header">
      <h2 class="section-title">最新资讯</h2>
      <ion-button fill="clear" size="small">
        查看全部
        <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
      </ion-button>
    </div>

    <div class="articles-grid">
      @for(article of articles; track article.id) {
      <div class="article-card" (click)="openArticle(article)">
        <div class="article-image">
          <img [src]="article.image" [alt]="article.title">
          <div class="category-tag">{{article.category}}</div>
        </div>
        <div class="article-content">
          <h3>{{article.title}}</h3>
          <p class="summary">{{article.summary}}</p>
          <div class="article-meta">
            <span class="date">
              <ion-icon name="calendar-outline"></ion-icon>
              {{article.date}}
            </span>
            <span class="views">
              <ion-icon name="eye-outline"></ion-icon>
              {{article.views}}
            </span>
          </div>
        </div>
      </div>
      }
    </div>

    <!-- 加载更多 -->
    <ion-infinite-scroll (ionInfinite)="loadMoreArticles($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多文章...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>
</ion-content>