|
@@ -1,17 +1,168 @@
|
|
|
-<ion-header [translucent]="true">
|
|
|
+<!-- 首页布局 -->
|
|
|
+<ion-header>
|
|
|
<ion-toolbar>
|
|
|
- <ion-title>
|
|
|
- Tab 1
|
|
|
- </ion-title>
|
|
|
+ <ion-title>小说(Novel)</ion-title>
|
|
|
</ion-toolbar>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>签到功能</title>
|
|
|
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
|
|
|
+
|
|
|
</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 >
|
|
|
|
|
|
- <app-explore-container name="Tab 1 page"></app-explore-container>
|
|
|
-</ion-content>
|
|
|
+ <ion-toolbar >
|
|
|
+ <ion-buttons slot="start">
|
|
|
+ <ion-button>
|
|
|
+ Novel
|
|
|
+ </ion-button>
|
|
|
+ </ion-buttons>
|
|
|
+ <ion-buttons slot="end">
|
|
|
+ <ion-button>
|
|
|
+ <ion-icon name="search"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ <ion-button >
|
|
|
+ 阅读历史
|
|
|
+ </ion-button>
|
|
|
+ <ion-button>
|
|
|
+ 更多
|
|
|
+ </ion-button>
|
|
|
+ </ion-buttons>
|
|
|
+ </ion-toolbar>
|
|
|
+ <!-- 金刚区 -->
|
|
|
+ <ion-grid >
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6">
|
|
|
+ <ion-card >
|
|
|
+ <ion-card-header >
|
|
|
+ 今日已读___小时__分钟
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+
|
|
|
+
|
|
|
+<!-- 时钟组件 -->
|
|
|
+<ion-card>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>当前时间</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+
|
|
|
+ <ion-card-content>
|
|
|
+ <div class="clock">
|
|
|
+ {{ currentTime | date: 'hh:mm:ss a' }}
|
|
|
+ </div>
|
|
|
+ </ion-card-content>
|
|
|
+</ion-card>
|
|
|
+<!-- 时钟 -->
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+
|
|
|
+ <!-- 签到组件 -->
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>签到功能</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+
|
|
|
+ <ion-card-content >
|
|
|
+ <ion-item size = "6">
|
|
|
+ <ion-label>今日签到状态:</ion-label>
|
|
|
+ <ion-badge slot="end" [color]="isSignedIn ? 'success' : 'danger'">{{ isSignedIn ? '已签到' : '未签到' }}</ion-badge>
|
|
|
+ </ion-item>
|
|
|
+
|
|
|
+ <ion-button expand="block" color="primary" (click)="signIn()" [disabled]="isSignedIn">签到</ion-button>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 问卷调查 -->
|
|
|
+<ion-card>
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>小说问卷调查</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-list>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label position="stacked">您喜欢的小说类型:</ion-label>
|
|
|
+ <ion-select placeholder="请选择">
|
|
|
+ <ion-select-option value="fantasy">奇幻</ion-select-option>
|
|
|
+ <ion-select-option value="romance">言情</ion-select-option>
|
|
|
+ <ion-select-option value="mystery">悬疑</ion-select-option>
|
|
|
+ <ion-select-option value="sci-fi">科幻</ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </ion-item>
|
|
|
+
|
|
|
+ <ion-item>
|
|
|
+ <ion-label position="stacked">您每周阅读小说的频率:</ion-label>
|
|
|
+ <ion-radio-group value="daily">
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>每天</ion-label>
|
|
|
+ <ion-radio slot="start" value="daily"></ion-radio>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>每周几次</ion-label>
|
|
|
+ <ion-radio slot="start" value="weekly"></ion-radio>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>偶尔</ion-label>
|
|
|
+ <ion-radio slot="start" value="occasionally"></ion-radio>
|
|
|
+ </ion-item>
|
|
|
+ </ion-radio-group>
|
|
|
+ </ion-item>
|
|
|
+
|
|
|
+ <ion-item>
|
|
|
+ <ion-label position="stacked">您最喜欢的小说作者:</ion-label>
|
|
|
+ <ion-input type="text" placeholder="请输入"></ion-input>
|
|
|
+ </ion-item>
|
|
|
+
|
|
|
+ <ion-item>
|
|
|
+ <ion-label position="stacked">您希望小说中包含的元素:</ion-label>
|
|
|
+ <ion-textarea placeholder="请输入"></ion-textarea>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+
|
|
|
+ <ion-button expand="block" color="primary">提交</ion-button>
|
|
|
+ </ion-card-content>
|
|
|
+</ion-card>
|
|
|
+<!-- 个人表单填写 -->
|
|
|
+<!-- 个人推荐 -->
|
|
|
+<ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col >
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-header>
|
|
|
+ 个人推荐
|
|
|
+ </ion-card-header>
|
|
|
+ <ion-card-content>
|
|
|
+ <!-- 弹性布局的六行一列金刚区按钮 -->
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6" *ngFor="let item of customItems">
|
|
|
+ <ion-button expand="block">{{ item.title }}</ion-button>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ <!-- 图文及评分标准、浏览量 -->
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6">
|
|
|
+ <ion-img src="assets/img/人间烟火.jpg" ></ion-img>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col size="6">
|
|
|
+ <ion-card>
|
|
|
+ <ion-card-header>
|
|
|
+ 图书名称:人间烟火
|
|
|
+ </ion-card-header>
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-label>评分:5.0</ion-label><br>
|
|
|
+ <ion-label>浏览量:1000</ion-label>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+</ion-grid>
|
|
|
+<!-- 个人推荐 -->
|
|
|
+</ion-content>
|