feat:first

src/app/tab2/tab2.page.html

@@ -1,17 +1,128 @@
-<ion-header [translucent]="true">
+<!-- 创作页面整体布局 -->
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title>创作</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <!-- 功能区域 -->
+  <div class="function-area">
+    <ion-grid>
+      <ion-row>
+        <ion-col size="12">
+          <ion-card>
+            <ion-card-header>
+              短片关于传统美德小说创作
+            </ion-card-header>
+            <ion-card-content>
+              <!-- 视频播放器 -->
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="12">
+          <ion-card>
+            <ion-card-header>
+              小说配图
+            </ion-card-header>
+            <ion-card-content>
+              <!-- 图片展示区域 -->
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </div>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+  <!-- 书架 -->
+  <ion-grid>
+    <!-- 顶部Tabs -->
+    <ion-row>
+      <ion-col size="3">
+        <!-- 小说的LOGO -->
+      </ion-col>
+      <ion-col size="6">
+        <ion-segment>
+          <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-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">
+    <ion-card (click)="onClick()">
+      <ion-img src="assets/book1.jpg"></ion-img>
+      <ion-card-header>
+        <ion-card-title>狂野小农民</ion-card-title>
+      </ion-card-header>
+    </ion-card>
+  </ion-col>
+  <ion-col size="6">
+    <ion-card>
+      <ion-img src="assets/book2.jpg"></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>
+      <ion-img src="assets/community1.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>商品价格</ion-label>
+        <ion-label>新旧程度</ion-label>
+      </ion-card-content>
+    </ion-card>
+  </ion-col>
+</ion-row>
+</ion-content>

src/app/tab2/tab2.page.ts

@@ -8,5 +8,8 @@ import { Component } from '@angular/core';
 export class Tab2Page {
 
   constructor() {}
+  onClick(){
+    alert("666")
+  }
 
 }