s202226701001/tailor-app/myapp/src/app/community/community.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>发现</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="sharePost()" color="primary">
        <ion-icon name="add"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="spacer"></div> <!-- 空白区域 -->
  <div class="post-grid">
    <!-- 动态列表 -->
    <ion-card *ngFor="let post of posts" (click)="viewPost(post.id)" class="post-card">
      <ion-card-header>
        <ion-card-subtitle>{{ post.date | date:'short' }}</ion-card-subtitle> <!-- 使用日期管道 -->
      </ion-card-header>
      <ion-card-content>
        <img [src]="post.imageUrl" *ngIf="post.imageUrl" alt="动态图片" class="post-image" />
        <p>{{ post.text }}</p>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>