feat:page over

src/app/book-detail/book-detail.page.html

@@ -18,13 +18,13 @@
       <p>{{novel?.get('intro')}}</p>
       
       <h2>故事背景</h2>
-      <p>《城南旧事》的故事发生在上世纪的南方城市，通过描绘城南的街巷、民居和市井生活，展现了当时城市的风土人情和社会变迁。作品以其细腻的描写和丰富的人物形象，深刻展现了那个时代的生活场景。</p>
+      <p>{{novel?.get('background')}}</p>
       
-      <h2>关于作者 林海音</h2>
-      <p>林海音是中国20世纪著名女作家，以其独特的写作风格和对人性的深刻洞察而闻名。她善于通过生动的描写和细腻的笔触，勾勒出丰富多彩的人物形象和情感世界，使作品充满了生活的细节和情感的共鸣。</p>
+      <h2>关于作者</h2>
+      <p>{{novel?.get('authorinfo')}}</p>
       
       <h2>人生哲理</h2>
-      <p>《城南旧事》不仅仅是一部文学作品，更是作者对人性、生活和社会的深刻思考。作品中蕴含着丰富的人生哲理，引发读者对生命意义和人生价值的思考，展示了作者对人类情感和生命的关怀与探索。</p>
+      <p>{{novel?.get('meaning')}}</p>
     </ion-card-content>
   </ion-card>
 

src/app/tab1/tab1.page.html

@@ -35,17 +35,19 @@
     <ion-row>
       <ion-col size="6">
         <ion-card  >
-          <ion-card-header  >
+          <ion-card-header>
             今日已读___小时__分钟
           </ion-card-header>
         </ion-card>
+
+        
       </ion-col>
 
 
 <!-- 时钟组件 -->
 <ion-card>
   <ion-card-header>
-    <ion-card-title>当前时间</ion-card-title>
+    <ion-card-title ><a style="font-size: 18px; color:black;">当前时间</a></ion-card-title>
   </ion-card-header>
   
   <ion-card-content>
@@ -145,7 +147,7 @@
           <!-- 图文及评分标准、浏览量 -->
           <ion-row>
             <ion-col size="6">
-              <ion-img src="assets/img/人间烟火.jpg" ></ion-img>
+              <ion-img src="assets/img/人间烟火.jpg" style="width: 100%; height: 100%;" ></ion-img>
             </ion-col>
             <ion-col size="6">
               <ion-card>

src/app/tab2/tab2.page.html

@@ -1,7 +1,7 @@
 <!-- 创作页面整体布局 -->
 <ion-header>
   <ion-toolbar>
-    <ion-title>创作</ion-title>
+    <ion-title>书库资源</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -12,7 +12,6 @@
     {{novel?.get("bookname")}}
   </ion-card>
 
-
   <!-- 功能区域 -->
   <div class="function-area">
     <ion-grid>
@@ -45,7 +44,8 @@
           <ion-segment-button value="recommend">
             推荐
           </ion-segment-button>
-          <ion-segment-button value="male">
+          <ion-segment-button value="male" >
+    
             男生类小说
           </ion-segment-button>
           <ion-segment-button value="female">
@@ -62,84 +62,82 @@
     </ion-row>
 <!-- 数组的使用 -->
     <ion-list>
-      <ion-list-header>男生喜欢的图书</ion-list-header>
-      <ion-item-group *ngFor="let book of maleBooks">
-        <ion-item>
-          <ion-label>{{ book.title }}</ion-label>
-        </ion-item>
-      </ion-item-group>
-      
-      <ion-list-header>女生喜欢的图书</ion-list-header>
+      <ion-list-header class="malefavorbooks"  *ngIf="currentTab=='male' || currentTab=='recommend'">男生喜欢的图书
+        <ion-item-group *ngFor="let book of maleBooks">
+          <ion-item>
+            <ion-label>{{ book.title }}</ion-label>
+          </ion-item>
+        </ion-item-group>
+    </ion-list-header>
+      <ion-list-header class="femalefavorbooks" *ngIf="currentTab=='female' || currentTab=='recommend'" >女生喜欢的图书
       <ion-item-group *ngFor="let book of femaleBooks">
         <ion-item>
           <ion-label>{{ book.title }}</ion-label>
         </ion-item>
       </ion-item-group>
+    </ion-list-header>
     </ion-list>
 
 
 
 
 
-    <!-- 排行榜 -->
-    <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" *ngIf="currentTab=='male' || currentTab=='recommend'">
     <ion-card routerLink="/book-detail">
-      <ion-img src="assets/img/侠客江湖.jpg" style="height: 200; width: 400; "></ion-img>
+      <ion-img src="assets/img/侠客江湖.jpg" style="height: 200; width: 400; "></ion-img>  
+      <ion-card-header>
+        <ion-card-title  class="booktitle">侠客江湖</ion-card-title>
+      </ion-card-header>
+   </ion-card>
+
+    <ion-card routerLink="/book-detail" >
+      <ion-img src="assets/img/星际未来.jpg" style="height: 200; width: 400; "></ion-img>
       <ion-card-header>
-        <ion-card-title>侠客江湖</ion-card-title>
+        <ion-card-title  class="booktitle">星际未来</ion-card-title>
       </ion-card-header>
     </ion-card>
+
+
   </ion-col>
   <ion-col size="6"  *ngIf="currentTab=='male' || currentTab=='recommend'">
     <ion-card  routerLink="/book-detail">
-      <ion-img src="assets/img/灵魂.jpg" style="height: 200; width: 400; "></ion-img>
+      <ion-img src="assets/img/你是我的守候.jpg" style="height: 200; width: 400; "></ion-img>
       <ion-card-header>
-        <ion-card-title>每个孤独的灵魂都值得被看见</ion-card-title>
+        <ion-card-title class="booktitle">你是我的守候</ion-card-title>
       </ion-card-header>
+
+     
     </ion-card>
+    <ion-img src="assets/img/未来可期.jpg" style="height: 200; width: 400; "></ion-img>
+    <ion-card-header>
+      <ion-card-title class="booktitle">未来可期</ion-card-title>
+    </ion-card-header>
+    
   </ion-col>
 </ion-row>
 
-<!-- 大家都爱看社区 -->
+<!-- 女生类喜欢的图书 -->
 <ion-row>
   <ion-col size="12"  *ngIf="currentTab=='female' || currentTab=='recommend'">
     <ion-card routerLink="/book-detail">
-      <ion-img src="assets/img/城南旧事.jpg" style="height: 200px; width: 400px;"></ion-img>
-      <ion-card-header>
-        <ion-card-title>书籍名称</ion-card-title>
-        <ion-card-subtitle>发布人</ion-card-subtitle>
-      </ion-card-header>
+      <ion-img src="assets/img/城南旧事.jpg" ></ion-img>
+     
       <ion-card-content>
-        <ion-label>商品价格</ion-label>
-        <ion-label>新旧程度</ion-label>
+        <ion-label>商品价格:666</ion-label><br>
+        <ion-label>新旧程度：新</ion-label>
       </ion-card-content>
-    </ion-card>
+    </ion-card >
+    <ion-card-content>
+    <ion-img src="assets/img/一只猫的前世今生.jpg" ></ion-img>  
+        <ion-label>商品价格:666</ion-label><br>
+        <ion-label>新旧程度:旧</ion-label>
+    </ion-card-content>
   </ion-col>
 </ion-row>
 <!-- 排行榜 -->
@@ -191,21 +189,4 @@
     </ion-card>
   </ion-col>
 </ion-row>
-
-<!-- 大家都爱看社区 -->
-<ion-row>
-  <ion-col size="12">
-    <ion-card  routerLink="/book-detail">
-      <ion-img src="assets/img/你好夏天.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>商品价格：666</ion-label>
-        <ion-label>新旧程度：新</ion-label>
-      </ion-card-content>
-    </ion-card>
-  </ion-col>
-</ion-row>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,21 @@
+.booktitle{
+
+    font-size: 20px;
+    text-align: center;
+}
+ion-card {
+    margin: 10px;
+  }
+  
+  ion-card img {
+    width: 100%;
+    height: auto;
+  }
+  .malefavorbooks{
+
+    font-size: 20px;
+
+  }
+  .femalefavorbooks{
+    font-size: 20px;
+  }

src/app/tab2/tab2.page.ts

@@ -23,14 +23,90 @@ export class Tab2Page implements OnInit{
     this.novelList = list
     }
 
+    books = [
+      { title: 'Book 1', author: 'Author 1', description: 'Description 1', coverUrl: 'path/to/cover1.jpg' },
+      { title: 'Book 2', author: 'Author 2', description: 'Description 2', coverUrl: 'path/to/cover2.jpg' },
+      // Add more book objects as needed
+    ];
+
+
+
   maleBooks = [
-    { title: '三体' },
-    { title: '流浪地球' }
+    {
+      title: '《盗墓笔记》',
+      author: '南派三叔',
+      rating: 4.2,
+      description: '《盗墓笔记》系列是一部以盗墓为主题的冒险小说，讲述了主人公吴邪等人在盗墓过程中的种种奇幻经历，充满神秘和刺激，深受男性读者喜爱。'
+    },
+    {
+      title: '《平凡的世界》',
+      author: '路遥',
+      rating: 4.3,
+      description: '《平凡的世界》是一部中国当代文学经典作品，描写了中国改革开放时期农村人物的生活和命运，情节感人，思考深刻，适合喜欢深入思考人生和社会的男性读者。'
+    },
+    {
+      title: '《鬼吹灯》',
+      author: '天下霸唱',
+      rating: 4.4,
+      description: '《鬼吹灯》系列是一部以探险、古墓为题材的小说，讲述了主人公胡八一等人在寻宝过程中的冒险故事，充满神秘和刺激，深受男性读者喜爱。'
+    },
+    {
+      title: '《人类简史》',
+      author: '尤瓦尔·赫拉利',
+      rating: 4.5,
+      description: '《人类简史》是一部关于人类历史发展的畅销书籍，作者以独特的视角解读人类文明的演进过程，深刻而引人思考，适合对历史和社会感兴趣的男性读者。'
+    },
+    {
+      title: '《小王子》',
+      author: '安托万·德·圣-埃克苏佩里',
+      rating: 4.6,
+      description: '《小王子》是一部经典的童话哲理小说，讲述了小王子在宇宙中的冒险故事，探讨了友情、爱情和人生的意义，深受男性读者喜爱。'
+    },
+    {
+      title: '《何以笙箫默》',
+      author: '顾漫',
+      rating: 4.7,
+      description: '《何以笙箫默》是一部现代都市爱情小说，讲述了一个跌宕起伏的爱情故事，情感细腻真挚，引人入胜，深受男性读者喜爱。'
+    },
   ];
 
   femaleBooks = [
-    { title: '何以笙箫默' },
-    { title: '步步惊心' }
+    {
+      title: '《小时代》',
+      author: '郭敬明',
+      rating: 4.2,
+      description: '《小时代》系列是一部现代都市青春小说，讲述了一群年轻人在都市中的成长、爱情和友情故事，情感细腻，引人入胜，深受女性读者喜爱。'
+    },
+    {
+      title: '《步步惊心》',
+      author: '桐华',
+      rating: 4.1,
+      description: '《步步惊心》是一部穿越、宫斗题材的言情小说，讲述了现代女孩张小凡穿越到古代的故事，充满悬疑和感情纠葛，深受女性读者喜爱。'
+    },
+    {
+      title: '《红楼梦》',
+      author: '曹雪芹',
+      rating: 4.7,
+      description: '《红楼梦》是中国古典文学的经典之作，描绘了贾宝玉、林黛玉等人物的爱情与人生悲喜，情节曲折，人物形象饱满，被广泛认为是中国文学的巅峰之作，吸引了许多女性读者的喜爱。'
+    },
+    {
+      title: '《解忧杂货店》',
+      author: '东野圭吾',
+      rating: 4.6,
+      description: '《解忧杂货店》是一部温暖感人的小说，讲述了一个神秘的杂货店如何帮助人们解决内心的烦恼和困惑，充满温情和启发，深受女性读者喜爱。'
+    },
+    {
+      title: '《三体》',
+      author: '刘慈欣',
+      rating: 4.6,
+      description: '《三体》是一部脍炙人口的硬科幻小说，讲述了地球面临外星文明入侵的故事。它融合了科幻、哲学和文学，引人入胜，深受女性读者喜爱。'
+    },
+    {
+      title: '《何以笙箫默》',
+      author: '顾漫',
+      rating: 4.8,
+      description: '《何以笙箫默》是一部现代都市爱情小说，讲述了一个跌宕起伏的爱情故事，情感细腻真挚，引人入胜，深受女性读者喜爱。'
+    },
   ];
 
 }

src/app/tab3/tab3.page.html

@@ -4,7 +4,7 @@
     
     <ion-buttons slot="start">
       <ion-button>
-        用户名称
+        用户信息
       </ion-button>
       <ion-avatar>
         <ion-img src="assets/img/头像.jpg"></ion-img>
@@ -24,8 +24,8 @@
 <ion-content>
 
 
-  <ion-card>
-    <img alt="" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+  <ion-card class="bianju">
+    <img alt="" src="https://gd-hbimg.huaban.com/db3495ffea73e3551181abbfd45adbeee8b532369f3b3-N2AKKf_fw1200webp" />
     <ion-card-header>
       <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
       <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
@@ -39,23 +39,18 @@
   </ion-card>
 
 
-  <!-- 金刚区 - 一行九列金刚区按钮 -->
+  <!-- 金刚区 - 一行九列金刚区按钮
   <ion-title>我的会员</ion-title>
   <ion-row>
     <ion-col size="2" *ngFor="let item of myItems">
       <ion-button expand="block">{{ item.title }}</ion-button>
     </ion-col>
-  </ion-row>
-
-
-
-
-
-
+  </ion-row> -->
 <!-- 金刚区 - 二行三列 -->
-<ion-row>
-  <ion-col size="4">
-    <ion-label>我的钱包</ion-label>
+<ion-label>我的钱包</ion-label>
+<ion-row >
+  <ion-col size="4" >
+   
     <ion-card>
       <ion-card-content>
         
@@ -63,12 +58,10 @@
       </ion-card-content>
     </ion-card>
   </ion-col>
-  <ion-col size="4">
+  <ion-col size="4" class="location">
     <ion-card>
       <ion-card-content>
-        <ion-label>今日收益</ion-label>
-        <ion-label>0</ion-label>
-       
+        <ion-label>今日收益:100￥</ion-label>
       </ion-card-content>
       
     </ion-card>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,12 @@
+.bianju{
+
+    padding-top: -1px; /* 设置内边距 */
+}
+.location{
+    padding: 0px;
+    height: 20%;
+    width: 100%;}
+
+ion-button:hover {
+        background-color: antiquewhite;
+  }

src/index.html

@@ -12,7 +12,7 @@
   <meta name="format-detection" content="telephone=no" />
   <meta name="msapplication-tap-highlight" content="no" />
 
-  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+  <link rel="icon" type="/src/assets/img/背景.jpg" href="assets/icon/favicon.png" />
 
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />

src/user/mine/mine.page.html

@@ -7,7 +7,7 @@
 <ion-content [fullscreen]="true">
 
   <ion-card>
-    <img alt="" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+    <img alt="" src="/src/assets/img/背景.jpg" />
     <ion-card-header>
       <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
       <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>