|
@@ -1,55 +1,230 @@
|
|
|
-<!-- tab1.page.html -->
|
|
|
-
|
|
|
<ion-header>
|
|
|
<ion-toolbar>
|
|
|
- <ion-title>
|
|
|
- <ion-searchbar placeholder="搜索小说、作者或标签" class="larger-searchbar"></ion-searchbar>
|
|
|
- <ion-button fill="clear" slot="end">
|
|
|
- <ion-icon name="notifications-outline"></ion-icon>
|
|
|
+ <ion-buttons slot="start">
|
|
|
+ <ion-button (click)="goToRecommendedPage()">
|
|
|
+ 返回
|
|
|
</ion-button>
|
|
|
- </ion-title>
|
|
|
+ </ion-buttons>
|
|
|
+
|
|
|
+ <ion-searchbar
|
|
|
+ [(ngModel)]="searchTerm"
|
|
|
+ (ionInput)="searchBooks($event)"
|
|
|
+ (click)="expandSearchBar()"
|
|
|
+ [class.expanded]="isSearchBarExpanded">
|
|
|
+ </ion-searchbar>
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
|
- <ion-segment mode="md"> <!-- 你可以根据需要选择合适的 mode -->
|
|
|
- <ion-segment-button value="recommend">
|
|
|
- <ion-label>推荐</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="ranking">
|
|
|
- <ion-label>排行</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="categories">
|
|
|
- <ion-label>分类</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- </ion-segment>
|
|
|
-
|
|
|
- <ion-list lines="full" class="scrollable-content">
|
|
|
- <ion-item *ngFor="let novel of novels">
|
|
|
- <ion-thumbnail slot="start">
|
|
|
- <img [src]="novel.cover" />
|
|
|
- </ion-thumbnail>
|
|
|
- <ion-label>
|
|
|
- <h2>{{novel.title}}</h2>
|
|
|
- <p>{{novel.author}}</p>
|
|
|
- <p>{{novel.description}}</p>
|
|
|
- <p>评分: {{novel.rating}}</p>
|
|
|
- </ion-label>
|
|
|
- </ion-item>
|
|
|
- </ion-list>
|
|
|
-</ion-content>
|
|
|
+ <div *ngIf="!isSearchBarExpanded">
|
|
|
+ <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged()" mode="md" class="segment">
|
|
|
+ <ion-segment-button value="推荐">
|
|
|
+ 推荐
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="经典">
|
|
|
+ 经典
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="知识">
|
|
|
+ 知识
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="听书">
|
|
|
+ 听书
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="看剧">
|
|
|
+ 看剧
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="视频">
|
|
|
+ 视频
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="漫画">
|
|
|
+ 漫画
|
|
|
+ </ion-segment-button>
|
|
|
+ </ion-segment>
|
|
|
+
|
|
|
+ <div *ngIf="selectedSegment === '推荐'">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>排行榜</ion-card-title>
|
|
|
+ <ion-segment [(ngModel)]="rankingSegment" (ionChange)="rankingSegmentChanged()">
|
|
|
+ <ion-segment-button value="推荐榜">
|
|
|
+ 推荐榜
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="完本榜">
|
|
|
+ 完本榜
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="口碑榜">
|
|
|
+ 口碑榜
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="巅峰榜">
|
|
|
+ 巅峰榜
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="高分榜">
|
|
|
+ 高分榜
|
|
|
+ </ion-segment-button>
|
|
|
+ </ion-segment>
|
|
|
+ </ion-card-header>
|
|
|
+
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-list>
|
|
|
+ <ion-item *ngFor="let book of rankingBooks">
|
|
|
+ <ion-thumbnail slot="start">
|
|
|
+ <ion-img [src]="book.cover" [alt]="book.title"></ion-img>
|
|
|
+ </ion-thumbnail>
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{ book.title }}</h2>
|
|
|
+ <p>{{ book.author }}</p>
|
|
|
+ <p>{{ book.popularity }} 热度</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6" *ngFor="let book of recommendedBooks">
|
|
|
+ <ion-card>
|
|
|
+ <ion-img [src]="book.cover" [alt]="book.title"></ion-img>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{ book.title }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="selectedSegment === '经典'">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6" *ngFor="let book of classicBooks">
|
|
|
+ <ion-card>
|
|
|
+ <ion-img [src]="book.cover" [alt]="book.title"></ion-img>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{ book.title }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
|
|
|
-<style>
|
|
|
- .scrollable-content {
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .larger-searchbar {
|
|
|
- --background: #f5f5f5;
|
|
|
- --placeholder-color: #888;
|
|
|
- --icon-color: #888;
|
|
|
- --height: 44px;
|
|
|
- --border-radius: 8px;
|
|
|
- --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
-</style>
|
|
|
+ <div *ngIf="selectedSegment === '知识'">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6" *ngFor="let book of knowledgeBooks">
|
|
|
+ <ion-card>
|
|
|
+ <ion-img [src]="book.cover" [alt]="book.title"></ion-img>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{ book.title }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="selectedSegment === '听书'">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6" *ngFor="let book of audiobooks">
|
|
|
+ <ion-card>
|
|
|
+ <ion-img [src]="book.cover" [alt]="book.title"></ion-img>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{ book.title }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="selectedSegment === '看剧'">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6" *ngFor="let book of dramaBooks">
|
|
|
+ <ion-card>
|
|
|
+ <ion-img [src]="book.cover" [alt]="book.title"></ion-img>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{ book.title }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="selectedSegment === '视频'">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6" *ngFor="let book of videoBooks">
|
|
|
+ <ion-card>
|
|
|
+ <ion-img [src]="book.cover" [alt]="book.title"></ion-img>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{ book.title }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="selectedSegment === '漫画'">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6" *ngFor="let book of comicBooks">
|
|
|
+ <ion-card>
|
|
|
+ <ion-img [src]="book.cover" [alt]="book.title"></ion-img>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{ book.title }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="isSearchBarExpanded">
|
|
|
+ <ion-list>
|
|
|
+ <ion-item *ngFor="let book of filteredBooks">
|
|
|
+ <ion-thumbnail slot="start">
|
|
|
+ <ion-img [src]="book.cover"></ion-img>
|
|
|
+ </ion-thumbnail>
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{ book.title }}</h2>
|
|
|
+ <p>{{ book.author }}</p>
|
|
|
+ <p>{{ book.popularity }}</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+ </div>
|
|
|
+</ion-content>
|