<ion-header [translucent]="true">

    <div class="header">
        <ion-buttons slot="start">
        <ion-button id="menuBtn">
            <ion-icon slot="icon-only" name="menu-outline"></ion-icon>
        </ion-button>
        </ion-buttons>
        
        <div class="header-title">日记本</div>
        
        <ion-buttons slot="end">
        <ion-fab-button (click)="goToEditPage()" size="small">
            <ion-icon name="add"></ion-icon>
        </ion-fab-button>
        </ion-buttons>
    </div>

</ion-header>

<ion-content [fullscreen]="true">
    
    <!-- 内容区域 -->
    <div class="content" id="diaryList">
         @for(message of messageList;track message){
        <!-- 日记卡片1 -->
        <div class="diary-card" (click)="goMessage(message)">
            <div class="diary-time">
                <div class="diary-date">{{message.date}}</div>
                <div class="diary-week">{{message.weekday}}</div>
                <div class="diary-hour">{{message.time}}</div>
            </div>
            <div class="diary-content">
                {{message.content}}
            </div>
        </div>
        }
    </div>
</ion-content>
