Eve-Project/app-angular/src/modules/home/recommended-templates/recommended-templates.component.html

<div class="card-container">
  <nz-tabset nzType="card">
    <nz-tab [nzTitle]="'岗位模板'">
      <div nz-row [nzGutter]="16" class="tabs">
        <div nz-col class="gutter-row" [nzXs]="24" [nzSm]="4" *ngFor="let item of jobCategories; let i = index">
          <button nz-button [ngClass]="{ 'blue-button': selectedButton === i + 1 }" (click)="selectButton(i + 1)">
            <p>{{ item }}</p>
          </button>
        </div>
      </div>
    </nz-tab>
    <nz-tab [nzTitle]="'风格模板'">
      <div nz-row [nzGutter]="16" class="tabs">
        <div nz-col class="gutter-row" [nzXs]="24" [nzSm]="4" *ngFor="let item of jobStyles; let i = index">
          <button nz-button [ngClass]="{ 'blue-button': selectedButton === i + 1 }" (click)="selectButton(i + 1)">
            {{ item }}
          </button>
        </div>
      </div>
    </nz-tab>
  </nz-tabset>

  <div class="container" style="background: #ECECEC;padding:30px" (scroll)="onContainerScroll($event)">
    <div class="card1-container">
      <div class="card" *ngFor="let item of cardItems">
        <div class="image-container">
          <img [src]="item.imagePreview" alt="Card Image">
          <div class="overlay"></div>
          <div class="text-overlay">
            <div class="text-content">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
          <div class="button-overlay">
            <button>按钮1</button>
            <button>按钮2</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>