<div class="recommendations-container">
  <div class="section-header">
    <h2>为您智能推荐</h2>
    <div class="match-indicator">
      <span>匹配度</span>
      <div class="match-value">{{ cards[currentIndex].match }}%</div>
    </div>
  </div>

  <div class="cards-container">
    <button class="nav-button prev" (click)="prevCard()">
      <i class="icon-arrow-left"></i>
    </button>
    
    <div class="cards-track">
      <div 
        *ngFor="let card of cards; let i = index"
        class="job-card"
        [style.transform]="getTransformStyle(i)"
        [class.active]="i === currentIndex">
        <div class="card-header">
          <div class="company-logo">
            <img [src]="card.logo" [alt]="card.company + ' logo'">
          </div>
          <div class="job-info">
            <h3>{{ card.title }}</h3>
            <p class="company">{{ card.company }}</p>
          </div>
        </div>
        
        <div class="card-details">
          <div class="detail-item">
            <i class="icon-salary"></i>
            <span>{{ card.salary }}</span>
          </div>
          <div class="detail-item">
            <i class="icon-location"></i>
            <span>{{ card.location }}</span>
          </div>
        </div>
        
        <div class="tags-container">
          <span class="tag" *ngFor="let tag of card.tags">{{ tag }}</span>
        </div>
        
        <div class="card-actions">
          <button class="action-button apply" (click)="start()">开始面试</button>
          <button class="action-button save">收藏</button>
        </div>
      </div>
    </div>
    
    <button class="nav-button next" (click)="nextCard()">
      <i class="icon-arrow-right"></i>
    </button>
  </div>
</div>
