<ion-fab slot="fixed" vertical="bottom" horizontal="end">
    <ion-fab-button>
        <ion-icon name="chevron-up-circle"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
        <ion-fab-button>
            <ion-icon name="document"></ion-icon>
        </ion-fab-button>
        <ion-fab-button>
            <ion-icon name="color-palette"></ion-icon>
        </ion-fab-button>
        <ion-fab-button>
            <ion-icon name="globe"></ion-icon>
        </ion-fab-button>
    </ion-fab-list>
</ion-fab>
<ion-header>
    <ion-toolbar>
        <ion-title>首页</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <!-- 卡片 -->
    <ion-grid>
        <ion-row>
            <ion-col size="12" *ngFor="let dataObject of cardList" (click)="goTab('home-page/home-detail')"
                (click)="OnDetailPage(dataObject?.get('ToWhere'))">
                <ion-card>
                    <img [src]="dataObject?.get('src')" alt="Image" style="height:200px;width: 100%;">
                    <ion-card-header>
                        <ion-card-title>{{dataObject.title}}</ion-card-title>
                    </ion-card-header>

                    <ion-card-content>
                        {{dataObject?.get('describe')}}
                    </ion-card-content>
                </ion-card>
            </ion-col>
        </ion-row>
    </ion-grid>

    <!-- 瀑布组件 -->
    <div class="waterfall-container">
        <div class="waterfall-column" *ngFor="let column of columns">
            <div class="waterfall-item" *ngFor="let item of column">{{ item }}</div>
        </div>
    </div>

</ion-content>