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-button value="科普" (click)="cate='科普'">
                    <ion-label>科普</ion-label>
                </ion-segment-button>
            </ion-segment>
        </ion-toolbar>
    </ion-card>

    <!-- 推荐 -->
    <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>

    <!-- 关注 -->
    <ng-container *ngIf="cate=='关注'">
        <div class="carousel-container">
            <div class="carousel">
                <div class="card">Card 1</div>
                <div class="card">Card 2</div>
                <div class="card">Card 3</div>
                <div class="card">Card 4</div>
                <div class="card">Card 5</div>
            </div>
        </div>
    </ng-container>

    <!-- 科普 -->
    <ng-container *ngIf="cate=='科普'">
        <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>

</ion-content>