<ion-header [translucent]="true">
  <ion-toolbar [color]="isNightMode ? 'dark' : 'primary'">
    <ion-title>
      <ion-text color="light">{{ greetingMessage }}</ion-text>
    </ion-title>
   
   
  </ion-toolbar>
  
 



  <!-- 服务九宫格 -->
  <div class="ion-padding">
    <!-- 添加轮播图 -->
    <!-- 替换原有的ion-slides部分 -->
    <swiper-container [config]="swiperConfig" class="banner-slides">
      <swiper-slide>
        <img src="assets/images/banner2.jpg" class="banner-img">
      </swiper-slide>
      <swiper-slide>
        <img src="assets/images/banner1.jpg" class="banner-img">
      </swiper-slide>
      <swiper-slide>
        <img src="assets/images/banner3.jpg" class="banner-img">
      </swiper-slide>
    </swiper-container>


    
  <ion-grid class="services-grid">
    <ion-row>
      <ion-col size="6" *ngFor="let service of services">
        <ion-button
          expand="block" 
          fill="clear"  
          class="service-button"
          [attr.data-service-id]="service.id"
          (click)="handleServiceClick(service.id)">
          <div class="button-content">
            <ion-icon *ngIf="service.id !== 'tools'" slot="start" [name]="service.icon"></ion-icon>
            <span *ngIf="service.id !== 'tools'">{{service.name}}</span>
            <ion-badge *ngIf="service.badge > 0" color="danger">{{service.badge}}</ion-badge>
          </div>
        </ion-button>
       </ion-col>
    </ion-row>
   </ion-grid>

  

  <!-- 社区动态信息流 -->
  <div class="community-feed">
    <ion-list lines="none" style="height: calc(43vh - 120px); overflow-y: auto;">
      <ion-list-header>
        <ion-label>社区互助动态</ion-label>
        <ion-chip (click)="importMessage()">导入测试数据</ion-chip>
      </ion-list-header>
      
      <ion-item *ngFor="let item of Message" 
                [class.high-points]="item.points > 40">
                
        <ion-avatar slot="start">
          <img [src]="'https://ionicframework.com/docs/img/demos/avatar.svg'" />
        </ion-avatar>
        <ion-label class="message-content">
          <h2>{{item.name}}</h2>
          <p>{{item.ages}}岁 | {{item.matter}}</p>
          <p>积分: {{item.points}}</p>
        </ion-label>
        <ion-button slot="end" fill="solid" color="primary" (click)="claimService(item)">领取</ion-button>
      </ion-item>
    </ion-list>
  </div>

  

