|
|
@@ -1,4 +1,75 @@
|
|
|
-<div id="container">
|
|
|
- <strong>{{ name }}</strong>
|
|
|
- <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
|
|
|
-</div>
|
|
|
+<ion-header>
|
|
|
+ <ion-toolbar color="primary">
|
|
|
+ <ion-title>文库</ion-title>
|
|
|
+ </ion-toolbar>
|
|
|
+</ion-header>
|
|
|
+
|
|
|
+<ion-content>
|
|
|
+ <!-- 首页 -->
|
|
|
+ <ion-grid>
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <ion-row>
|
|
|
+ <ion-col>
|
|
|
+ <ion-segment [(ngModel)]="segment" (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-button value="search">
|
|
|
+ <ion-label>搜一搜</ion-label>
|
|
|
+ </ion-segment-button>
|
|
|
+ </ion-segment>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+
|
|
|
+ <!-- 功能区域 -->
|
|
|
+ <ion-row *ngIf="segment === 'online'">
|
|
|
+ <!-- 线上游戏类型 -->
|
|
|
+ <ion-col size="6" *ngFor="let game of onlineGames">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{ game.name }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ <ion-row *ngIf="segment === 'offline'">
|
|
|
+ <!-- 线下游戏类型 -->
|
|
|
+ <ion-col size="6" *ngFor="let game of offlineGames">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{ game.name }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+
|
|
|
+ <!-- 陪玩类型 -->
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6" *ngFor="let type of companionTypes">
|
|
|
+ <ion-chip>
|
|
|
+ <ion-label>{{ type }}</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+
|
|
|
+ <!-- 推荐的陪玩 -->
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="12" *ngFor="let companion of recommendedCompanions">
|
|
|
+ <ion-card>
|
|
|
+ <ion-item>
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <img [src]="companion.avatar" />
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{ companion.name }}</h2>
|
|
|
+ <p>{{ companion.info }}</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+</ion-content>
|
