fix:big

AIart-app/src/app/tab1/tab1.page.html

@@ -7,8 +7,8 @@
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <div style="display: flex;align-items: center;gap: 15px;height: 50px;">
-    <ion-searchbar placeholder="输入搜索内容" style="width: 60%;margin-left: 5px;"></ion-searchbar>
+  <div style="display: flex;align-items: center;justify-content: center;gap: 10px;height: 50px;">
+    <ion-searchbar placeholder="输入搜索内容" style="width: 60%"></ion-searchbar>
     <ion-icon name="mail-outline" style="height: 30px;width: 30px;"></ion-icon>
     <div style="display: flex;align-items: center;">
       <ion-icon name="calendar-outline" style="height: 25px;width: 30px;"></ion-icon>
@@ -38,86 +38,98 @@
     <!-- 首部导航栏部分结束 -->
   </div>
   <!-- 轮播图部分开始 -->
-  <div style="height: 50%;">
-    <ion-segment>
-      <ion-segment-button>
-        <ion-label>First</ion-label>
-      </ion-segment-button>
-      <ion-segment-button>
-        <ion-label>Second</ion-label>
-      </ion-segment-button>
-      <ion-segment-button>
-        <ion-label>Third</ion-label>
-      </ion-segment-button>
-    </ion-segment>
+  <div>
     <ion-segment-view>
-      <ion-segment-content>First</ion-segment-content>
-      <ion-segment-content>Second</ion-segment-content>
-      <ion-segment-content>Third</ion-segment-content>
+      <img alt="wu" src="../../assets/img/study.png" style="border-radius: 8px;position: relative;margin: 15px;display:flex ;align-items: center;
+    justify-content: center;height: 150px;width: 90%;" />
     </ion-segment-view>
   </div>
   <!-- 轮播图部分结束 -->
   <!-- 中部导航栏部分开始 -->
-  <div style="display: flex;align-items: center;justify-content: center;">
+  <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 5px;">
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="logo-usd"></ion-icon>
+      <ion-icon name="storefront-outline"></ion-icon>
       <ion-label>商业</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="briefcase"></ion-icon>
+      <ion-icon name="business-outline"></ion-icon>
       <ion-label>职场</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="book"></ion-icon>
+      <ion-icon name="book-outline"></ion-icon>
       <ion-label>历史</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon name="heart-outline"></ion-icon>
       <ion-label>心理学</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="football"></ion-icon>
+      <ion-icon name="football-outline"></ion-icon>
       <ion-label>运动</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
   </div>
 
-  <div style="display: flex;align-items: center;justify-content: center;">
+  <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 15px;">
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="logo-usd"></ion-icon>
+      <ion-icon name="rocket-outline"></ion-icon>
       <ion-label>训练营</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="briefcase"></ion-icon>
+      <ion-icon name="documents-outline"></ion-icon>
       <ion-label>清单广场</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="book"></ion-icon>
+      <ion-icon name="sparkles-outline"></ion-icon>
       <ion-label>兴趣视频</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="heart"></ion-icon>
-      <ion-label>全部分类</ion-label>
+      <ion-icon name="medal-outline"></ion-icon>
+      <ion-label>会员专享</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
     <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="football"></ion-icon>
-      <ion-label>运动</ion-label>
+      <ion-icon name="list-outline"></ion-icon>
+      <ion-label>全部分类</ion-label>
       <ion-ripple-effect></ion-ripple-effect>
     </div>
   </div>
   <!-- 中部导航栏部分结束 -->
-  <!-- <ion-thumbnail>
-    <img alt="wu" src="/img/economic1.png" />
-  </ion-thumbnail> -->
-  <div>
-
+  <!-- 下面轮播图展示部分开始 -->
+  <div class="mid-nav">
+    <div style="font-weight: bold;">
+      最近在学
+    </div>
+    <div class="under_slide">
+      <ion-label>查看全部</ion-label>
+      <ion-ripple-effect></ion-ripple-effect>
+      <ion-icon name="chevron-forward-outline"></ion-icon>
+    </div>
+  </div>
+  <div class="book_img">
+    <div class="book_item">
+      <img src="../../assets/img/book1.png" alt="book1" style="height: 100px;width: 200px;">
+      <p>城南旧事</p>
+    </div>
+    <div class="book_item">
+      <img src="../../assets/img/book2.png" alt="book2" style="height: 100px;width: 200px;">
+      <p>朝花夕拾</p>
+    </div>
+    <div class="book_item">
+      <img src="../../assets/img/book3.png" alt="book3" style="height: 100px;width: 200px;">
+      <p>狂人日记</p>
+    </div>
+    <div class="book_item">
+      <img src="../../assets/img/book4.png" alt="book4" style="height: 100px;width: 200px;">
+      <p>彷徨</p>
+    </div>
   </div>
+  <!-- 下面轮播图展示部分结束 -->
 </ion-content>

AIart-app/src/app/tab1/tab1.page.scss

@@ -20,11 +20,12 @@
     position: relative;
     overflow: hidden;
     user-select: none;
+    flex-direction: column;
 }
 
 .rounded-rectangle {
     width: 75px;
-    height: 50px;
+    height: 35px;
     border-radius: 8px;
 }
 
@@ -32,4 +33,36 @@
     width: 120px;
     height: 120px;
     border-radius: 50%;
+}
+
+.mid-nav {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 15px;
+    margin-right: 15px;
+
+}
+
+.under_slide {
+    display: flex;
+    align-items: center;
+    text-align: right;
+    font-size: smaller;
+}
+
+.book_img {
+    margin-top: 0;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    position: absolute;
+}
+
+.book_item p {
+    margin-top: 5px;
+    font-size: 14px;
+    font-weight: bold;
+    text-align: center;
 }

AIart-app/src/app/tab1/tab1.page.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 import {
   IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon,
   IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg, IonSegmentView,
-  IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton, IonRippleEffect
+  IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton, IonRippleEffect,
+  IonBackButton
 } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
@@ -14,7 +15,8 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
     IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg,
-    IonSegmentView, IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton, IonRippleEffect],
+    IonSegmentView, IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton,
+    IonRippleEffect, IonBackButton],
 })
 export class Tab1Page {
   constructor() { }

AIart-app/src/app/tabs/tabs.page.ts

@@ -1,7 +1,12 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { compass, book, storefront, person, document, mailOutline, calendarOutline, logoUsd, briefcase, heart, football } from 'ionicons/icons';
+import {
+  compass, bookOutline, book, storefront, person, document, mailOutline,
+  calendarOutline, logoUsd, briefcaseOutline, heartOutline, footballOutline,
+  chevronForwardOutline, storefrontOutline, businessOutline, documentsOutline,
+  rocketOutline, sparklesOutline, medalOutline, listOutline
+} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +19,11 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ compass, book, storefront, person, document, mailOutline, calendarOutline, logoUsd, briefcase, heart, football });
+    addIcons({
+      compass, bookOutline, book, storefront, person, document,
+      mailOutline, calendarOutline, logoUsd, briefcaseOutline, heartOutline,
+      footballOutline, chevronForwardOutline, storefrontOutline, businessOutline,
+      documentsOutline, rocketOutline, sparklesOutline, medalOutline, listOutline
+    });
   }
 }