fix

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

@@ -1,17 +1,78 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 1
+    <ion-title style="font-family: 'Courier New', Courier, monospace;">
+      AI艺速
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
+  <div style="display: flex;align-items: center;gap: 15px;height: 50px;">
+    <ion-searchbar placeholder="输入搜索内容" style="width: 60%;margin-left: 5px;"></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>
+      <p>签到</p>
+    </div>
+  </div>
+  <div>
+    <!-- 首部导航栏部分开始 -->
+    <ion-toolbar style="height: 40px;">
+      <ion-tabs>
+        <ion-tab-bar slot="top">
+          <ion-tab-button tab="home">
+            <ion-label>首页</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="course">
+            <ion-label>课程</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="test">
+            <ion-label>兴趣测试</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="ebook">
+            <ion-label>电子书</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
     </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 1 page"></app-explore-container>
-</ion-content>
+    <!-- 首部导航栏部分结束 -->
+  </div>
+  <!-- 轮播图部分开始 -->
+  <div
+    style="order: 1; display: flex;align-items: center;width: 90%;justify-content: center;height: 30%;position: absolute;border-radius: 50%;">
+    <!-- <ion-img src="/img/economic1.png"></ion-img> -->
+    <ion-img src="https://docs-demo.ionic.io/assets/madison.jpg"
+      alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
+  </div>
+  <!-- 轮播图部分结束 -->
+  <div>
+    <!-- 中部导航栏部分开始 -->
+    <ion-toolbar style="order: 2">
+      <ion-tabs>
+        <ion-tab-bar slot="top">
+          <ion-tab-button tab="business">
+            <ion-icon name="logo-usd"></ion-icon>
+            <ion-label>商业</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="workplace">
+            <ion-icon name="briefcase"></ion-icon>
+            <ion-label>职场</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="history">
+            <ion-icon name="book"></ion-icon>
+            <ion-label>历史</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="psychology">
+            <ion-icon name="heart"></ion-icon>
+            <ion-label>心理学</ion-label>
+          </ion-tab-button>
+          <ion-tab-button tab="sports">
+            <ion-icon name="football"></ion-icon>
+            <ion-label>运动</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    </ion-toolbar>
+    <!-- 中部导航栏部分结束 -->
+  </div>
+</ion-content>

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

@@ -1,14 +1,15 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg],
 })
 export class Tab1Page {
-  constructor() {}
+  constructor() { }
 }

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

@@ -14,4 +14,4 @@
   </ion-header>
 
   <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+</ion-content>

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

@@ -1,7 +1,7 @@
 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 } from 'ionicons/icons';
+import { compass, book, storefront, person, document, mailOutline, calendarOutline, logoUsd, briefcase, heart, football } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +14,6 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ compass, book, storefront, person, document });
+    addIcons({ compass, book, storefront, person, document, mailOutline, calendarOutline, logoUsd, briefcase, heart, football });
   }
 }