update

app-myapp

@@ -1 +0,0 @@
-Subproject commit 158d111904e321692321734c37fe718c557e0740

src/app/tab1/tab1.page.html

@@ -1,93 +1,64 @@
-<!-- <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<!-- <ion-header>
     <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 1 page"></app-explore-container>
-</ion-content> -->
-<ion-header>
-    <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-button>
-                <ion-icon name="person-circle"></ion-icon>
-                登录
-            </ion-button>
-
-        </ion-buttons>
-        <ion-title>1小时玩转平台宝典</ion-title>
-        <ion-buttons slot="end">
-            <ion-button>
-                <ion-icon name="cube"></ion-icon>
-                购买
-                <ion-icon name="chevron-forward"></ion-icon>
-            </ion-button>
-        </ion-buttons>
+        <ion-title>阅读</ion-title>
     </ion-toolbar>
 </ion-header>
 
 <ion-content>
-    <!-- 活动横幅 -->
-    <div class="activity-banner">
-        <!-- 信封上部 -->
-        <div class="envelope-top">
-            <p>领取卖货福利红包，开启卖货之旅</p>
-            <div class="envelope-content">
-                <div class="user-images">
-                    <!-- 用户头像 -->
-                </div>
-                <p>20名采购商正在等你联系</p>
-            </div>
-            <ion-button expand="block">免费发布</ion-button>
-        </div>
-        <!-- 信封底部 -->
-        <div class="envelope-bottom">
-            <div class="left-info">3天前 兴盛果蔬 158****8660 正在采购 桃</div>
-            <div class="right-info">等你来聊</div>
-        </div>
-    </div>
+    <ion-segment [(ngModel)]="selectedCategory" (ionChange)="segmentChanged()">
+        <ion-segment-button value="male">
+            男生
+        </ion-segment-button>
+        <ion-segment-button value="female">
+            女生
+        </ion-segment-button>
+    </ion-segment>
 
-    <!-- 推荐客户区域 -->
-    <div class="recommend-customers">
-        <div class="title-row">
-            <h2>推荐客户</h2>
-            <p>每天早8点/晚6点更新</p>
-        </div>
-        <div class="carousel">
-            <!-- 商机卡片 -->
-        </div>
+    <div *ngFor="let category of categories">
+        <ion-card>
+            <ion-card-header>
+                {{category.title}}
+            </ion-card-header>
+            <ion-card-content>
+                <ion-row *ngFor="let subCategory of category.subCategories" (click)="navigateToDetail(subCategory)">
+                    <ion-col size="6">
+                        <img src="{{subCategory.image}}" alt="{{subCategory.title}}">
+                        <p></p>
+                    </ion-col>
+                </ion-row>
+            </ion-card-content>
+        </ion-card>
     </div>
+</ion-content> -->
 
-    <!-- 金刚区 -->
-    <div class="quick-actions">
-        <!-- 第一行金刚区按钮 -->
-        <div class="action-row">
-            <!-- 按钮图标 -->
-        </div>
-        <!-- 第二行金刚区按钮 -->
-        <div class="action-row">
-            <!-- 按钮图标 -->
-        </div>
-    </div>
 
-    <!-- 轮播图区域 -->
-    <div class="carousel-area">
-        <!-- 促销海报轮播 -->
-    </div>
 
-</ion-content>
+<ion-header>
+    <ion-toolbar>
+        <ion-title>阅读APP</ion-title>
+    </ion-toolbar>
+</ion-header>
+
+<ion-content>
+    <ion-segment [(ngModel)]="selectedCategory" (ionChange)="segmentChanged()">
+        <ion-segment-button value="male">
+            男生
+        </ion-segment-button>
+        <ion-segment-button value="female">
+            女生
+        </ion-segment-button>
+    </ion-segment>
 
-<ion-fab vertical="bottom" horizontal="end">
-    <ion-fab-button>
-        <ion-icon name="add"></ion-icon>
-    </ion-fab-button>
-</ion-fab>
+    <ion-card *ngFor="let category of categories">
+        <ion-card-header>
+            {{category.title}}
+        </ion-card-header>
+        <ion-card-content>
+            <ion-list>
+                <ion-item *ngFor="let subCategory of category.subCategories" (click)="viewBookDetail(subCategory)">
+                    {{subCategory.title}}
+                </ion-item>
+            </ion-list>
+        </ion-card-content>
+    </ion-card>
+</ion-content>

src/app/tab1/tab1.page.scss

@@ -1,58 +1,59 @@
-.red-envelope {
-    position: relative;
-    width: 200px;
-    height: 120px;
-    background: linear-gradient(135deg, #ff5c5c 0%, #ff0000 100%);
-    border-top-left-radius: 30px;
-    border-top-right-radius: 30px;
-    color: white;
-    padding: 10px;
-    box-sizing: border-box;
+// .red-envelope {
+//     position: relative;
+//     width: 200px;
+//     height: 120px;
+//     background: linear-gradient(135deg, #ff5c5c 0%, #ff0000 100%);
+//     border-top-left-radius: 30px;
+//     border-top-right-radius: 30px;
+//     color: white;
+//     padding: 10px;
+//     box-sizing: border-box;
+// }
+// .red-envelope .top {
+//     font-size: 14px;
+//     font-weight: bold;
+//     margin-bottom: 10px;
+// }
+// .red-envelope .avatars {
+//     display: flex;
+// }
+// .red-envelope .avatars img {
+//     width: 30px;
+//     height: 30px;
+//     border-radius: 50%;
+//     margin-right: -10px;
+// }
+// .red-envelope .right {
+//     font-size: 12px;
+// }
+// .button {
+//     position: absolute;
+//     bottom: 10px;
+//     left: 50%;
+//     transform: translateX(-50%);
+//     padding: 5px 10px;
+//     background: white;
+//     color: #ff5c5c;
+//     border: none;
+//     border-radius: 5px;
+//     font-weight: bold;
+//     cursor: pointer;
+// }
+// .bottom {
+//     position: absolute;
+//     bottom: 0;
+//     width: 100%;
+//     background: rgba(0, 0, 0, 0.5);
+//     color: white;
+//     padding: 5px;
+//     border-bottom-left-radius: 10px;
+//     border-bottom-right-radius: 10px;
+//     font-size: 12px;
+// }
+ion-card {
+    margin: 10px;
 }
 
-.red-envelope .top {
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.red-envelope .avatars {
-    display: flex;
-}
-
-.red-envelope .avatars img {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    margin-right: -10px;
-}
-
-.red-envelope .right {
-    font-size: 12px;
-}
-
-.button {
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 5px 10px;
-    background: white;
-    color: #ff5c5c;
-    border: none;
-    border-radius: 5px;
-    font-weight: bold;
+ion-item {
     cursor: pointer;
-}
-
-.bottom {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    color: white;
-    padding: 5px;
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-    font-size: 12px;
 }

src/app/tab1/tab1.page.ts

@@ -6,9 +6,61 @@
 //   styleUrls: ['tab1.page.scss']
 // })
 // export class Tab1Page {
+//   selectedCategory: string = 'male';
+
+//   categories = [
+//     {
+//       title: '热门',
+//       subCategories: [
+//         { title: '大国科技', image: '.../.../.../picture/tupian.jpg' },
+//         { title: '科幻', image: 'assets/kehuan.jpg' },
+//         { title: '历史争霸', image: 'assets/lishizhengba.jpg' },
+//         { title: '天才', image: 'assets/tiancai.jpg' },
+//         { title: '脑洞', image: 'assets/naodong.jpg' },
+//         { title: '都市修真', image: 'assets/dushixiuzhen.jpg' }
+//       ]
+//     },
+//     {
+//       title: '题材',
+//       subCategories: [
+//         { title: '都市', image: 'assets/dushi.jpg' },
+//         { title: '同人', image: 'assets/tongren.jpg' },
+//         { title: '科幻', image: 'assets/kehuan.jpg' },
+//         { title: '玄幻', image: 'assets/xuanhuan.jpg' },
+//         { title: '游戏', image: 'assets/youxi.jpg' },
+//         { title: '悬疑', image: 'assets/xuanyi.jpg' }
+//       ]
+//     },
+//     {
+//       title: '情节',
+//       subCategories: [
+//         { title: '江湖', image: 'assets/jianghu.jpg' },
+//         { title: '校园', image: 'assets/xiaoyuan.jpg' },
+//         { title: '重生', image: 'assets/chongsheng.jpg' },
+//         { title: '僵尸', image: 'assets/jiangshi.jpg' },
+//         { title: '三国', image: 'assets/sanguo.jpg' },
+//         { title: '修炼', image: 'assets/xiulian.jpg' }
+//       ]
+//     },
+//     {
+//       title: '风格',
+//       subCategories: [
+//         { title: '励志', image: 'assets/lizhi.jpg' },
+//         { title: '现实', image: 'assets/xianshi.jpg' },
+//         { title: '烧脑', image: 'assets/shaonao.jpg' }
+//       ]
+//     }
+//   ];
 
 //   constructor() {}
 
+//   segmentChanged() {
+//     // Handle segment change logic here
+//   }
+
+//   navigateToDetail(subCategory: any) {
+//     // 导舨到详情页面的逻辑
+//   }
 // }
 
 import { Component } from '@angular/core';
@@ -19,10 +71,59 @@ import { Component } from '@angular/core';
   styleUrls: ['tab1.page.scss']
 })
 export class Tab1Page {
-  constructor() {}
+  selectedCategory: string = 'male';
 
-  // 模拟数据
-}
+  categories = [
+    {
+      title: '热门',
+      subCategories: [
+        { title: '大国科技' },
+        { title: '科幻' },
+        { title: '历史争霸' },
+        { title: '天才' },
+        { title: '脑洞' },
+        { title: '都市修真' }
+      ]
+    },
+    {
+      title: '题材',
+      subCategories: [
+        { title: '都市' },
+        { title: '同人' },
+        { title: '科幻' },
+        { title: '玄幻' },
+        { title: '游戏' },
+        { title: '悬疑' }
+      ]
+    },
+    {
+      title: '情节',
+      subCategories: [
+        { title: '江湖' },
+        { title: '校园' },
+        { title: '重生' },
+        { title: '僵尸' },
+        { title: '三国' },
+        { title: '修炼' }
+      ]
+    },
+    {
+      title: '风格',
+      subCategories: [
+        { title: '励志' },
+        { title: '现实' },
+        { title: '烧脑' }
+      ]
+    }
+  ];
 
+  constructor() {}
 
+  segmentChanged() {
+    // Handle segment change logic here
+  }
 
+  viewBookDetail(subCategory: any) {
+    // 实现查看书籍详情的逻辑
+  }
+}

src/app/tab2/tab2.page.html

@@ -1,17 +1,65 @@
-<ion-header [translucent]="true">
+<!-- <ion-header>
     <ion-toolbar>
-        <ion-title>
-            Tab 2
-        </ion-title>
+        <ion-title></ion-title>
+        <ion-searchbar></ion-searchbar>
     </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>
+    <ion-segment [(ngModel)]="selectedCategory" (ionChange)="segmentChanged()">
+        <ion-segment-button value="default">
+            默认
+        </ion-segment-button>
+        <ion-segment-button value="update">
+            更新
+        </ion-segment-button>
+        <ion-segment-button value="progress">
+            进度
+        </ion-segment-button>
+        <ion-segment-button value="recommend">
+            推荐
+        </ion-segment-button>
+    </ion-segment>
 
-    <app-explore-container name="Tab 2 page"></app-explore-container>
+    <ion-grid>
+        <ion-row *ngFor="let row of bookRows">
+            <ion-col size="4" *ngFor="let book of row">
+                <ion-card>
+                    <img src="{{book.cover}}" alt="{{book.title}}">
+                    <ion-card-header>
+                        {{book.title}}
+                    </ion-card-header>
+                </ion-card>
+            </ion-col>
+        </ion-row>
+    </ion-grid>
+</ion-content> -->
+
+<ion-header>
+    <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+    </ion-toolbar>
+</ion-header>
+
+<ion-content>
+    <ion-segment [(ngModel)]="selectedCategory" (ionChange)="segmentChanged()">
+        <ion-segment-button value="default">
+            默认
+        </ion-segment-button>
+        <ion-segment-button value="update">
+            更新
+        </ion-segment-button>
+        <ion-segment-button value="progress">
+            进度
+        </ion-segment-button>
+        <ion-segment-button value="recommend">
+            推荐
+        </ion-segment-button>
+    </ion-segment>
+
+    <ion-list>
+        <ion-item *ngFor="let book of books" (click)="viewBookDetail(book)">
+            {{book.title}}
+        </ion-item>
+    </ion-list>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,16 @@
+// ion-segment {
+//     margin: 10px;
+// }
+// ion-card {
+//     margin: 10px;
+// }
+// img {
+//     width: 100%;
+// }
+// ion-card-header {
+//     text-align: center;
+// }
+ion-item {
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+}

src/app/tab2/tab2.page.ts

@@ -1,4 +1,28 @@
+// import { Component } from '@angular/core';
+
+// @Component({
+//   selector: 'app-tab2',
+//   templateUrl: 'tab2.page.html',
+//   styleUrls: ['tab2.page.scss']
+// })
+// export class Tab2Page {
+//   selectedCategory: string = 'default';
+  
+//   bookRows: Array<Array<any>> = [
+//     [{title: 'Book 1', cover: 'assets/book1.jpg'}, {title: 'Book 2', cover: 'assets/book2.jpg'}, {title: 'Book 3', cover: 'assets/book3.jpg'}],
+//     [{title: 'Book 4', cover: 'assets/book4.jpg'}, {title: 'Book 5', cover: 'assets/book5.jpg'}, {title: 'Book 6', cover: 'assets/book6.jpg'}]
+//   ];
+
+//   constructor() {}
+
+//   segmentChanged() {
+//     // Handle segment change logic here
+//   }
+// }
+
+
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab2',
@@ -6,7 +30,25 @@ import { Component } from '@angular/core';
   styleUrls: ['tab2.page.scss']
 })
 export class Tab2Page {
+  selectedCategory: string = 'default';
+
+  books = [
+    { title: 'Book 1' },
+    { title: 'Book 2' },
+    { title: 'Book 3' },
+    { title: 'Book 4' },
+    { title: 'Book 5' },
+    { title: 'Book 6' }
+  ];
+
+  constructor(private router: Router) {}
 
-  constructor() {}
+  segmentChanged() {
+    // Handle segment change logic here
+  }
 
-}
+  viewBookDetail(book: any) {
+    // 实现跳转到书籍详情页面的逻辑
+    this.router.navigate(['/book-detail', book.id]); // 假设路由为 '/book-detail/:id'
+  }
+}

src/app/tab3/tab3.page.html

@@ -1,17 +1,111 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
-  </ion-toolbar>
+<!-- <ion-header>
+    <ion-toolbar>
+        <ion-title>首页</ion-title>
+        <ion-buttons slot="end">
+            <ion-button (click)="goToRegister()">登录/注册</ion-button>
+        </ion-buttons>
+    </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-content>
+    <ion-card (click)="viewReadingRank()" class="clickable-card">
+        <ion-card-header>
+            读书排行榜
+        </ion-card-header>
+    </ion-card>
+
+    <ion-card>
+        <ion-card-header>
+            在读书籍
+        </ion-card-header>
+        <ion-card-content>
+            <ion-row>
+                <ion-col size="6" *ngFor="let book of readingBooks" (click)="viewBookDetail(book)">
+                    <ion-card>
+                        <img src="{{book.image}}" alt="{{book.title}}">
+                        <ion-card-header>
+                            {{book.title}}
+                        </ion-card-header>
+                    </ion-card>
+                </ion-col>
+            </ion-row>
+        </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+        <ion-card-header>
+            已读书籍
+        </ion-card-header>
+        <ion-card-content>
+            <ion-row>
+                <ion-col size="6" *ngFor="let book of completedBooks" (click)="viewBookDetail(book)">
+                    <ion-card>
+                        <img src="{{book.image}}" alt="{{book.title}}">
+                        <ion-card-header>
+                            {{book.title}}
+                        </ion-card-header>
+                    </ion-card>
+                </ion-col>
+            </ion-row>
+        </ion-card-content>
+    </ion-card>
+</ion-content> -->
+
+
+
+<ion-header>
     <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
+        <ion-title>首页</ion-title>
+        <ion-buttons slot="end">
+            <ion-button (click)="goToRegister()">登录/注册</ion-button>
+        </ion-buttons>
     </ion-toolbar>
-  </ion-header>
+</ion-header>
+
+<ion-content>
+    <ion-card (click)="viewReadingRank()">
+        <ion-card-header>
+            读书排行榜
+        </ion-card-header>
+    </ion-card>
+
+    <ion-card>
+        <ion-card-header>
+            阅读时长
+        </ion-card-header>
+        <ion-card-content>
+            阅读时长: {{readingTime}} 分钟
+        </ion-card-content>
+    </ion-card>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+    <ion-row>
+        <ion-col size="6">
+            <ion-card>
+                <ion-card-header>
+                    在读书籍
+                </ion-card-header>
+                <ion-card-content>
+                    <ion-list>
+                        <ion-item *ngFor="let book of readingBooks">
+                            {{book.title}}
+                        </ion-item>
+                    </ion-list>
+                </ion-card-content>
+            </ion-card>
+        </ion-col>
+        <ion-col size="6">
+            <ion-card>
+                <ion-card-header>
+                    读完书籍
+                </ion-card-header>
+                <ion-card-content>
+                    <ion-list>
+                        <ion-item *ngFor="let book of completedBooks">
+                            {{book.title}}
+                        </ion-item>
+                    </ion-list>
+                </ion-card-content>
+            </ion-card>
+        </ion-col>
+    </ion-row>
+</ion-content>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,21 @@
+// ion-card {
+//     margin: 10px;
+// }
+// img {
+//     width: 100%;
+//     height: 200px;
+//     /* 调整图片高度 */
+// }
+// .clickable-card {
+//     cursor: pointer;
+// }
+// .clickable-card:active {
+//     opacity: 0.8;
+// }
+ion-card {
+    margin: 10px;
+}
+
+ion-item {
+    text-align: center;
+}

src/app/tab3/tab3.page.ts

@@ -1,4 +1,43 @@
+// import { Component } from '@angular/core';
+// import { Router } from '@angular/router';
+
+// @Component({
+//   selector: 'app-tab3',
+//   templateUrl: 'tab3.page.html',
+//   styleUrls: ['tab3.page.scss']
+// })
+// export class Tab3Page {
+//   readingBooks = [
+//     { title: '', image: '/tupian.jpg' },
+//     { title: '', image: 'assets/book2.jpg' },
+//     { title: '', image: 'assets/book3.jpg' }
+//   ];
+
+//   completedBooks = [
+//     { title: '', image: 'assets/book4.jpg' },
+//     { title: '', image: 'assets/book5.jpg' },
+//     { title: '', image: 'assets/book6.jpg' }
+//   ];
+
+//   constructor(private router: Router) {}
+
+//   goToRegister() {
+//     // 实现跳转到注册页面的逻辑
+//   }
+
+//   viewReadingRank() {
+//     this.router.navigate(['/reading-rank']); // 假设路由为 '/reading-rank'
+//   }
+
+//   viewBookDetail(book: any) {
+//     // 实现查看书籍详情的逻辑
+//   }
+// }
+
+
+
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab3',
@@ -6,7 +45,27 @@ import { Component } from '@angular/core';
   styleUrls: ['tab3.page.scss']
 })
 export class Tab3Page {
+  readingTime: number = 264; // 模拟阅读时长为 264 分钟
+
+  readingBooks = [
+    { title: 'Book 1' },
+    { title: 'Book 2' },
+    { title: 'Book 3' }
+  ];
+
+  completedBooks = [
+    { title: 'Book 4' },
+    { title: 'Book 5' },
+    { title: 'Book 6' }
+  ];
+
+  constructor(private router: Router) {}
 
-  constructor() {}
+  goToRegister() {
+    // 实现跳转到注册页面的逻辑
+  }
 
-}
+  viewReadingRank() {
+    this.router.navigate(['/reading-rank']); // 假设路由为 '/reading-rank'
+  }
+}