Novel/src/app/tab2/tab2.page.html

<!-- 创作页面整体布局 -->
<ion-header>
  <ion-toolbar>
    <ion-title>创作</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-card *ngFor="let novel of novelList" routerLink="/book/{{novel?.id}}">
    <img src="{{novel.get('cover')}}" alt="" srcset="">
    {{novel?.get("bookname")}}
  </ion-card>


  <!-- 功能区域 -->
  <div class="function-area">
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <ion-card>
            <ion-card-header>
              
              <a href="https://ai.fmode.cn/">短片关于传统美德小说创作</a>
            </ion-card-header>
            <ion-card-content>
              <!-- 视频播放器 -->
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      
    </ion-grid>
  </div>

  <!-- 书架 -->
  <ion-grid>
    <!-- 顶部Tabs -->
    <ion-row>
      <ion-col size="3">
        <!-- 小说的LOGO -->
      </ion-col>
      <ion-col size="6">
        <ion-segment [(ngModel)]='currentTab'>
          <ion-segment-button value="recommend">
            推荐
          </ion-segment-button>
          <ion-segment-button value="male">
            男生类小说
          </ion-segment-button>
          <ion-segment-button value="female">
            女生类小说
          </ion-segment-button>
          <ion-segment-button value="finished">
            完结
          </ion-segment-button>
        </ion-segment>
      </ion-col>
      <ion-col size="3">
        <ion-searchbar placeholder="搜索"></ion-searchbar>
      </ion-col>
    </ion-row>
<!-- 数组的使用 -->
    <ion-list>
      <ion-list-header>男生喜欢的图书</ion-list-header>
      <ion-item-group *ngFor="let book of maleBooks">
        <ion-item>
          <ion-label>{{ book.title }}</ion-label>
        </ion-item>
      </ion-item-group>
      
      <ion-list-header>女生喜欢的图书</ion-list-header>
      <ion-item-group *ngFor="let book of femaleBooks">
        <ion-item>
          <ion-label>{{ book.title }}</ion-label>
        </ion-item>
      </ion-item-group>
    </ion-list>





    <!-- 排行榜 -->
    <ion-row>
      <ion-col size="12">
        <!-- 排行榜内容 -->
      </ion-col>
    </ion-row>

    <!-- 金刚区 -->
    <ion-row>
      <!-- 弹性布局的一行四列金刚区按钮 -->
    </ion-row>

    <!-- 书籍名称 -->
    <ion-row>
      <!-- 四行两列的图文按钮 -->
    </ion-row>

    <!-- 大家都爱看社区 -->
    <ion-row>
      <ion-col size="12">
        <!-- 社区书籍内容 -->
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 书籍名称 -->
<ion-row>
  <ion-col size="6" *ngIf="currentTab=='male' || currentTab=='recommend'">
    <ion-card routerLink="/book-detail">
      <ion-img src="assets/img/侠客江湖.jpg" style="height: 200; width: 400; "></ion-img>
      <ion-card-header>
        <ion-card-title>侠客江湖</ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-col>
  <ion-col size="6"  *ngIf="currentTab=='male' || currentTab=='recommend'">
    <ion-card  routerLink="/book-detail">
      <ion-img src="assets/img/灵魂.jpg" style="height: 200; width: 400; "></ion-img>
      <ion-card-header>
        <ion-card-title>每个孤独的灵魂都值得被看见</ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-col>
</ion-row>

<!-- 大家都爱看社区 -->
<ion-row>
  <ion-col size="12"  *ngIf="currentTab=='female' || currentTab=='recommend'">
    <ion-card routerLink="/book-detail">
      <ion-img src="assets/img/城南旧事.jpg" style="height: 200px; width: 400px;"></ion-img>
      <ion-card-header>
        <ion-card-title>书籍名称</ion-card-title>
        <ion-card-subtitle>发布人</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <ion-label>商品价格</ion-label>
        <ion-label>新旧程度</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>
<!-- 排行榜 -->
<ion-row>
  <ion-col size="12">
    <ion-card>
      <ion-card-header>
        <ion-card-title>排行榜</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <!-- 排行榜内容 -->
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>

<!-- 金刚区 -->
<ion-row>
  <!-- 弹性布局的一行四列金刚区按钮 -->
  <ion-col size="3">
    <ion-button expand="block">男生人气榜</ion-button>
  </ion-col>
  <ion-col size="3">
    <ion-button expand="block">男生好评榜</ion-button>
  </ion-col>
  <ion-col size="3">
    <ion-button expand="block">女生人气榜</ion-button>
  </ion-col>
  <ion-col size="3">
    <ion-button expand="block">女生好评榜</ion-button>
  </ion-col>
</ion-row>
<!-- 书籍名称 -->
<ion-row>
  <ion-col size="6">
    <ion-card routerLink="/book-detail">
      <ion-img src="assets/img/云中浅阳.jpg" style = "height:200px;width:400px" ></ion-img>
      <ion-card-header>
        <ion-card-title>云中浅阳</ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-col>
  <ion-col size="6">
    <ion-card  routerLink="/book-detail">
      <ion-img src="assets/img/一只猫的前世今生.jpg" style = "height:200px;width:400px"></ion-img>
      <ion-card-header>
        <ion-card-title>一只猫的前世今生</ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-col>
</ion-row>

<!-- 大家都爱看社区 -->
<ion-row>
  <ion-col size="12">
    <ion-card  routerLink="/book-detail">
      <ion-img src="assets/img/你好夏天.jpg"></ion-img>
      <ion-card-header>
        <ion-card-title>书籍名称:你好夏天</ion-card-title>
        <ion-card-subtitle>发布人：小哈</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <ion-label>商品价格：666</ion-label>
        <ion-label>新旧程度：新</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>
</ion-content>