new13

travel-app/src/app/tab4/tab4.page.html

@@ -1,27 +1,32 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 4
-    </ion-title>
-  </ion-toolbar>
+<ion-header>
+
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 4</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+ 
+
+  <ion-card>
+    <img alt="Silhouette of mountains" src="https://cdn.dribbble.com/userupload/8724892/file/original-262c901f17794fa6f91d0e961224d6c8.jpg?resize=1024x682&vertical=center" />
+    <ion-card-header>
+      <ion-card-title>Card Title</ion-card-title>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+    </ion-card-header>
+  
+    <ion-card-content>
+      <ion-item>
+        <ion-avatar slot="start">
+          <img src="assets/img/头像.jpg">
+        </ion-avatar>
+        <ion-label>
+          <h2>{{ user.name }}</h2>
+          <p>{{ user.email }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-card-content>
+  </ion-card>
+
   <ion-list>
-    <ion-item>
-      <ion-avatar slot="start">
-        <img src="assets/img/头像.jpg">
-      </ion-avatar>
-      <ion-label>
-        <h2>{{ user.name }}</h2>
-        <p>{{ user.email }}</p>
-      </ion-label>
-    </ion-item>
+
     <ion-item detail="true" (click)="editProfile()">
       编辑个人资料
     </ion-item>
@@ -33,5 +38,5 @@
     </ion-item>
   </ion-list>
 
-  <app-explore-container name="Tab 4 page"></app-explore-container>
+
 </ion-content>

travel-app/src/app/tab4/tab4.page.scss

@@ -9,5 +9,6 @@ ion-content {
         }
       }
     }
+
   }
   

travel-app/src/app/tab4/tab4.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, NavController } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, NavController, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
@@ -7,7 +7,8 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   templateUrl: 'tab4.page.html',
   styleUrls: ['tab4.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+  imports: [IonHeader,IonContent,IonToolbar, IonTitle, ExploreContainerComponent,IonCard,IonCardContent,
+    IonCardHeader,IonCardSubtitle,IonCardTitle,
     IonList, IonItem, IonLabel, IonAvatar],
 })
 export class Tab4Page {