|
@@ -1,17 +1,126 @@
|
|
|
-<ion-header [translucent]="true">
|
|
|
+<ion-header>
|
|
|
<ion-toolbar>
|
|
|
- <ion-title>
|
|
|
- Tab 1
|
|
|
- </ion-title>
|
|
|
+ <ion-title *ngIf="!isSearching">首页</ion-title>
|
|
|
+ <ion-searchbar *ngIf="isSearching" [(ngModel)]="searchQuery" (ionInput)="filterChats()" placeholder="搜一搜"></ion-searchbar>
|
|
|
+ <ion-buttons slot="end">
|
|
|
+ <ion-button *ngIf="isSearching" (click)="hideSearch()">
|
|
|
+ <ion-icon name="arrow-back"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ <ion-button *ngIf="!isSearching" (click)="showSearch()">
|
|
|
+ <ion-icon name="search"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ </ion-buttons>
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
|
|
|
-<ion-content [fullscreen]="true">
|
|
|
- <ion-header collapse="condense">
|
|
|
- <ion-toolbar>
|
|
|
- <ion-title size="large">Tab 1</ion-title>
|
|
|
- </ion-toolbar>
|
|
|
- </ion-header>
|
|
|
+<ion-content>
|
|
|
+ <div *ngIf="!isSearching">
|
|
|
+ <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)">
|
|
|
+ <ion-segment-button value="online">
|
|
|
+ <ion-label>线上陪玩</ion-label>
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="offline">
|
|
|
+ <ion-label>线下陪玩</ion-label>
|
|
|
+ </ion-segment-button>
|
|
|
+ </ion-segment>
|
|
|
|
|
|
- <app-explore-container name="Tab 1 page"></app-explore-container>
|
|
|
+ <div *ngIf="selectedSegment === 'online'" class="scroll-container">
|
|
|
+ <div class="scroll-content">
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>王者荣耀</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>永劫无间</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>CS:GO</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>steam专区</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="selectedSegment === 'offline'" class="scroll-container">
|
|
|
+ <div class="scroll-content">
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>篮球</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>台球</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>羽毛球</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>钓鱼</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ion-list>
|
|
|
+ <ion-list-header>
|
|
|
+ <ion-label>陪玩类型</ion-label>
|
|
|
+ </ion-list-header>
|
|
|
+ <ion-item>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>技术大神</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>包赢承诺</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>优质声优</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>同城代练</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>娱乐球局</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+
|
|
|
+ <ion-list>
|
|
|
+ <ion-list-header>
|
|
|
+ <ion-label>推荐的陪玩</ion-label>
|
|
|
+ </ion-list-header>
|
|
|
+ <ion-item *ngFor="let player of recommendedPlayers">
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <img [src]="player.avatar" />
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{ player.name }}</h2>
|
|
|
+ <p>{{ player.info }}</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="isSearching">
|
|
|
+ <ion-list>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>历史搜索</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item *ngFor="let history of searchHistory">
|
|
|
+ <ion-label>{{ history }}</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>猜你想搜</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item *ngFor="let suggestion of searchSuggestions">
|
|
|
+ <ion-label [innerHTML]="suggestion"></ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>热门房间</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <div class="room-container">
|
|
|
+ <div *ngFor="let room of popularRooms" class="room-box">
|
|
|
+ <img [src]="room.image" />
|
|
|
+ <div>{{ room.title }}</div>
|
|
|
+ <div>{{ room.subtitle }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ion-list>
|
|
|
+ </div>
|
|
|
</ion-content>
|