app-gift/app-angular/src/modules/lesson/community/community.component.html

<ion-header>
    <ion-toolbar>
        <ion-icon name="compass-outline" size="large" color="dark"></ion-icon>
        <ion-button slot="end" fill="clear" size="small" routerLink="share">
            <ion-icon name="add-circle-outline" size="large" color="dark"></ion-icon>
            <ion-note>发布</ion-note>
        </ion-button>
    </ion-toolbar>
</ion-header>

<ion-content color="light">
    <!-- 导航 -->
    <ion-card class="navbar">
        <ion-toolbar>
            <ion-segment value="推荐">
                    <ion-segment-button value="推荐" (click)="cate='推荐'">
                        <ion-label>推荐</ion-label>
                    </ion-segment-button>
                    <ion-segment-button value="关注" (click)="cate='关注'">
                        <ion-label>关注</ion-label>
                    </ion-segment-button>
            </ion-segment>
        </ion-toolbar>
    </ion-card>
    <ion-content>
        <ng-container *ngIf="cate=='关注'">
            <div class="carousel-container">
                <div class="carousel">
                    <ng-container *ngFor="let attention of attentionList; let i = index">
                        <ion-col size="6" *ngIf="i % 2 === 0">
                            <ion-card class="roleCard custom-card" (click)="goAttentionDetail(attention)">
                                <img alt="关注图" [src]="attention?.get('img')" />
                            </ion-card>
                        </ion-col>
                    </ng-container>
                </div>
            </div>
            <div class="carousel-container">
                <div class="carousel">
                    <ng-container *ngFor="let attention of attentionList.slice().reverse(); let i = index">
                        <ion-col size="6" *ngIf="i % 2 === 0">
                            <ion-card class="roleCard custom-card" (click)="goAttentionDetail(attention)">
                                <img alt="关注图" [src]="attention?.get('img')" />
                            </ion-card>
                        </ion-col>
                    </ng-container>
                </div>
            </div>
            <ng-container *ngFor="let science of scienceList">
                <ion-card (click)="goScienceDetail(science)">
                    <img alt="科普图" [src]="science?.get('img')" />
                    <ion-card-header>
                        <ion-card-title>{{science?.get('name')}}</ion-card-title>
                        <ion-card-subtitle>{{science?.get('createdAt') | date: 'YYYY/MM/dd' || "发布时间"}}</ion-card-subtitle>
                        <div class="metadata-end-wrapper">
                            <ion-button fill="clear" color="dark" size="small" class="see">
                                <ion-icon name="eye-outline" size="small"></ion-icon>
                                <ion-note>{{science?.get('see')}}</ion-note>
                            </ion-button>
                            <ion-button fill="clear" color="dark" size="small" class="like">
                                <ion-icon name="heart-outline" size="small"></ion-icon>
                                <ion-note>{{science?.get('like')}}</ion-note>
                            </ion-button>
                        </div>
                    </ion-card-header>
                    <ion-card-content>
                        <p class="foodContent">{{science?.get('content')}}</p>
                    </ion-card-content>
                </ion-card>
            </ng-container>
        </ng-container>

         <!-- 推荐部分 -->
         <ng-container *ngIf="cate=='推荐'">
            <ion-grid>
                <ion-row>
                    <ng-container *ngFor="let attention of recommendList">
                        <ion-col size="6">
                            <ion-card class="roleCard" (click)="goRecommendDetail(attention)">
                                <img alt="推荐图" [src]="attention?.get('img')" />
                                <ion-card-header>
                                    <ion-card-title>{{attention?.get('name')}}</ion-card-title>
                                    <ion-card-subtitle style="font-size:0.7rem;">
                                        作者：{{attention?.get('user')?.get('name') || "无名"}}
                                    </ion-card-subtitle>
                                </ion-card-header>
                                <div class="metadata-end-wrapper">
                                    <ion-button shape="round" size="small" color="danger">
                                        <ion-icon name="heart-outline" size="small"></ion-icon>
                                        {{attention?.get('like')}}
                                    </ion-button>
                                </div>
                            </ion-card>
                        </ion-col>
                    </ng-container>
                </ion-row>
            </ion-grid>
        </ng-container>
    </ion-content>