<ion-content class="ion-padding">
  <!-- 顶部标签栏 -->
  <div class="header">
    <div class="tab-container">
      <div class="tabs">
        <span
          class="tab"
          *ngFor="let tab of tabs"
          [class.active]="tab === activeTab"
          (click)="onTabClick(tab)"
          >{{ tab }}</span
        >
      </div>
      <div class="action-buttons">
        <div class="action-btn" (click)="onSearchClick()">
          <i class="bi bi-search"></i>
        </div>
      </div>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="content">
    <!-- 轮播图 -->
    <div class="banner-container">
      <div class="banner-image">
        <img [src]="bannerImages[activeBannerIndex]" alt="轮播图" />
      </div>
      <div class="banner-dots">
        <div
          class="banner-dot"
          *ngFor="let dot of bannerDots; let i = index"
          [class.active]="i === activeBannerIndex"
          (click)="setActiveBanner(i)"
        ></div>
      </div>
    </div>

    <!-- 分类导航 -->
    <div class="section-title">
      <span>分类导航</span>
      <span class="section-more" (click)="onSectionMoreClick('分类导航')"
        >全部 &gt;</span
      >
    </div>
    <div class="category-container">
      <div
        class="category-item"
        *ngFor="let category of categories"
        (click)="onCategoryClick(category)"
      >
        <div class="category-icon">
          <i class="bi" [ngClass]="category.icon"></i>
        </div>
        <div class="category-name">{{ category.name }}</div>
      </div>
    </div>

    <!-- 热门推荐 -->
    <div class="section-title">
      <span>热门推荐</span>
      <span class="section-more" (click)="onSectionMoreClick('热门推荐')"
        >更多 &gt;</span
      >
    </div>
    <div class="hot-container">
      <div
        class="hot-item"
        *ngFor="let item of hotItems"
        (click)="onHotItemClick(item)"
      >
        <div class="hot-image">
          <img [src]="item.img" alt="热门饰品" />
        </div>
        <div class="hot-info">
          <div class="hot-name">{{ item.name }}</div>
          <div class="hot-price">¥ {{ item.price }}</div>
        </div>
      </div>
    </div>

    <!-- 资讯文章 -->
    <div class="section-title">
      <span>最新资讯</span>
      <span class="section-more" (click)="onSectionMoreClick('最新资讯')"
        >更多 &gt;</span
      >
    </div>
    <div class="article-container" *ngFor="let article of articles">
      <div class="article-header">
        <div class="article-avatar"></div>
        <div class="article-author">{{ article.author }}</div>
        <div class="article-time">{{ article.time }}</div>
      </div>
      <div class="article-title">{{ article.title }}</div>
      <div class="article-image">
        <img [src]="article.img" alt="文章图片" />
      </div>
      <div class="article-footer">
        <div>阅读 {{ article.readCount }}</div>
        <div class="article-action">
          <i class="bi bi-heart" (click)="onLike(article)"></i>
          <span>{{ article.likes }}</span>
          <i
            class="bi bi-chat-left"
            style="margin-left: 10px;"
            (click)="onComment(article)"
          ></i>
          <span>{{ article.comments }}</span>
        </div>
      </div>
    </div>
  </div>
</ion-content>
