<ion-header [translucent]="true">
  <ion-toolbar>
    <div style="display: flex;align-items: center;justify-content: center;gap: 10px;">
      <ion-searchbar placeholder="输入搜索内容" style="width: 70%;margin-top: 10px;"></ion-searchbar>
      <ion-icon name="gift-outline" style="height: 25px;width: 25px;"></ion-icon>
      <ion-icon name="mail-outline" style="height: 27px;width: 27px;margin-right: 5px;"></ion-icon>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-toolbar>
    <div style="display: flex;align-items: center;justify-content: center;gap: 25px;">
      <div>学习</div>
      <div>已购</div>
      <div>计划</div>
      <div>挑战赛</div>
      <ion-icon name="calendar-outline" style="height: 25px;width: 25px;"></ion-icon>
      <ion-icon name="options-outline" style="height: 25px;width: 25px;"></ion-icon>
    </div>
  </ion-toolbar>

  
  @for(item of mapListOnline;track item.id){
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          {{item?.get("title")}}
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <comp-markmap [height]="'600px'" [markdown]="item.get('markmap')"></comp-markmap>
      </ion-card-content>
    </ion-card>
  }
  @for(item of mapList;track item){
    <comp-markmap [markdown]="item.content"></comp-markmap>
  }
</ion-content>


<!-- <edit-tag></edit-tag>
<h1>星星打分组件演示：分值{{currentScore}}</h1>
<edit-rating-star [score]="currentScore" [scoreMax]="5" (onScoreChange)="handleScoreChange($event)">
</edit-rating-star> -->