fix

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

@@ -38,41 +38,86 @@
     <!-- 首部导航栏部分结束 -->
   </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 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>
+    <ion-segment-view>
+      <ion-segment-content>First</ion-segment-content>
+      <ion-segment-content>Second</ion-segment-content>
+      <ion-segment-content>Third</ion-segment-content>
+    </ion-segment-view>
   </div>
   <!-- 轮播图部分结束 -->
+  <!-- 中部导航栏部分开始 -->
+  <div style="display: flex;align-items: center;justify-content: center;">
+    <div class="ion-activatable ripple-parent rounded-rectangle">
+      <ion-icon name="logo-usd"></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-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-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-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-ripple-effect></ion-ripple-effect>
+    </div>
+  </div>
+
+  <div style="display: flex;align-items: center;justify-content: center;">
+    <div class="ion-activatable ripple-parent rounded-rectangle">
+      <ion-icon name="logo-usd"></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-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-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-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-ripple-effect></ion-ripple-effect>
+    </div>
+  </div>
+  <!-- 中部导航栏部分结束 -->
+  <!-- <ion-thumbnail>
+    <img alt="wu" src="/img/economic1.png" />
+  </ion-thumbnail> -->
   <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.scss

@@ -0,0 +1,35 @@
+.wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+
+    height: 170px;
+    width: 400px;
+
+    margin: 0 auto;
+}
+
+.ripple-parent {
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+}
+
+.rounded-rectangle {
+    width: 75px;
+    height: 50px;
+    border-radius: 8px;
+}
+
+.circle {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+}

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

@@ -1,5 +1,9 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg } from '@ionic/angular/standalone';
+import {
+  IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon,
+  IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg, IonSegmentView,
+  IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton, IonRippleEffect
+} from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 
@@ -8,7 +12,9 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg,
+    IonSegmentView, IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton, IonRippleEffect],
 })
 export class Tab1Page {
   constructor() { }