<ion-header>
  <ion-toolbar color="primary">
    <ion-title>首页</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="light">
  <!-- 搜索栏 -->
  <ion-toolbar>
    <ion-searchbar [(ngModel)]="searchTerm" (ionChange)="search()"></ion-searchbar>
    
    
  </ion-toolbar>
  <ion-list>
    <ion-button *ngFor="let filmresult of filmsearchResults" routerLink="/feiwu/film-detail/{{filmresult.id}}">
      {{ filmresult.get('name') }}
    </ion-button>
    <ion-button *ngFor="let bookresult of booksearchResults" routerLink="/feiwu/book-detail/{{bookresult.id}}">
      {{ bookresult.get('name') }}
    </ion-button>
    <ion-button *ngFor="let gameresult of gamesearchResults" routerLink="/feiwu/game-detail/{{gameresult.id}}">
      {{ gameresult.get('name') }}
    </ion-button>
    <ion-button *ngFor="let musicresult of musicsearchResults" routerLink="/feiwu/music-detail/{{musicresult.id}}">
      {{ musicresult.get('name') }}
    </ion-button>
    <ion-button *ngFor="let outdoorresult of outdoorsearchResults" routerLink="/feiwu/outdoor-detail/{{outdoorresult.id}}">
      {{ outdoorresult.get('name') }}
    </ion-button>
  </ion-list>


  <!-- 分类选项 -->
  <ion-segment>
    <ion-segment-button value="movies" expand="block" routerLink="/feiwu/fiml">
      影视
    </ion-segment-button>
    <ion-segment-button value="books" expand="block" routerLink="/feiwu/book">
      读书
    </ion-segment-button>
    <ion-segment-button value="music" expand="block" routerLink="/feiwu/music">
      音乐
    </ion-segment-button>
    <ion-segment-button value="games" expand="block" routerLink="/feiwu/game">
      游戏
    </ion-segment-button>			
    <ion-segment-button value="outdoor" expand="block" routerLink="/feiwu/outdoor">
      户外
    </ion-segment-button>
  </ion-segment>
 <!-- 内容推荐 -->
 <ion-card style="max-width: 100%;  height: 70px;"> 
  <!-- Swiper轮播图 手动创建 -->
<!-- Slider main container -->

<div #slide1Comp class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"> <ion-img src="assets/image/111.jpg"></ion-img></div>
<div class="swiper-slide"><ion-img src="assets/image/lb2.jpg"></ion-img></div>
<div class="swiper-slide"><ion-img src="assets/image/lb3.jpg"></ion-img></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
  <ion-card-content>
    
    <!-- 这里放个性推荐的内容 -->
  </ion-card-content>
</ion-card>
<ion-row>
  <!-- 放大的四个框 -->
  <ion-col size="6">
    <ion-card>
      <ion-card-header>
        实时热门电影
      </ion-card-header>
      <ion-card-content>
        <!-- 这里放热门电影的内容 -->
        <ion-img src="assets/image/movie.jpg"></ion-img>
      </ion-card-content>
    </ion-card>
  </ion-col>

  <ion-col size="6">
    <ion-card>
      <ion-card-header>
        国内即将上映
      </ion-card-header>
      <ion-card-content>
        <!-- 这里放国内即将上映的内容 -->
        <ion-img src="assets/image/upcoming.jpg"></ion-img>
      </ion-card-content>
    </ion-card>
  </ion-col>

  <ion-col size="6">
    <ion-card>
      <ion-card-header>
        全球值得期待
      </ion-card-header>
      <ion-card-content>
        <!-- 这里放全球值得期待的内容 -->
        <ion-img src="assets/image/global.jpg"></ion-img>
      </ion-card-content>
    </ion-card>
  </ion-col>

  <ion-col size="6">
    <ion-card>
      <ion-card-header>
        榜单Top100
      </ion-card-header>
      <ion-card-content>
        <!-- 这里放新游戏发布的内容 -->
        <ion-img src="assets/image/top.jpg"></ion-img>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>
</ion-content>
