new14

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

@@ -1,42 +1,135 @@
-<ion-header>
-
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      
+    </ion-title>
+  </ion-toolbar>
 </ion-header>
 
-<ion-content>
- 
+<ion-content [fullscreen]="true">
 
-  <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-item>
+    <ion-thumbnail slot="start">
+      <img alt="头像" src="https://cdn.dribbble.com/userupload/8724892/file/original-262c901f17794fa6f91d0e961224d6c8.jpg?resize=1024x682&vertical=center" />
+    </ion-thumbnail>
+
+    <ion-label>
+      <h2>用户昵称</h2>
+      <p>158****6846</p>
+    </ion-label>
+  </ion-item>
+
+  <div class="stats">
+    <span><strong>12</strong> 我的关注</span>
+    <span><strong>5</strong> 我的粉丝</span>
+    <span><strong>1.5w</strong> 获赞与收藏</span>
+  </div>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col size="6">
+        <!-- 第一张卡片 -->
+        <ion-card color="primary">
+          <ion-card-header>
+            <ion-card-title>我的卡券</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            兑换券/换购券
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+      <ion-col size="6">
+        <!-- 第二张卡片 -->
+        <ion-card color="primary">
+          <ion-card-header>
+            <ion-card-title>我的收藏</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            票点攻略/笔记故事
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <ion-item>
+    <ion-label>
+      <h1>我的订单</h1>
+    </ion-label>
+  </ion-item>
   
-    <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-grid>
+      <ion-row>
+        <ion-col size="3">
+          <ion-icon name="wallet"></ion-icon>
+          <ion-label>全部订单</ion-label>
+        </ion-col>
+        <ion-col size="3">
+          <ion-icon name="person" size="large"></ion-icon>
+          <ion-label>门票预约</ion-label>
+        </ion-col>
+        <ion-col size="3">
+          <ion-icon name="chatbubbles" size="large"></ion-icon>
+          <ion-label>退款售后</ion-label>
+        </ion-col>
+        <ion-col size="3">
+          <ion-icon name="settings" size="large"></ion-icon>
+          <ion-label>待评价</ion-label>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
   </ion-card>
 
-  <ion-list>
-
-    <ion-item detail="true" (click)="editProfile()">
-      编辑个人资料
+  <ion-list lines="none">
+    <ion-item>
+      <ion-label></ion-label>
     </ion-item>
-    <ion-item detail="true" (click)="viewSettings()">
-      设置
+    <ion-item>
+      <ion-label>门票预约</ion-label>
     </ion-item>
-    <ion-item detail="true" (click)="logout()">
-      退出登录
+    <ion-item>
+      <ion-label>退款售后</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>待评价</ion-label>
     </ion-item>
   </ion-list>
 
 
+
+  <ion-list inset>
+    <ion-item>
+      <ion-icon name="settings" item-start></ion-icon>
+      账号设置
+    </ion-item>
+    <ion-item>
+      <ion-icon name="create" item-start></ion-icon>
+      我的创作
+    </ion-item>
+    <ion-item>
+      <ion-icon name="gift" item-start></ion-icon>
+      活动参与
+    </ion-item>
+    <ion-item>
+      <ion-icon name="walk" item-start></ion-icon>
+      我的行程
+    </ion-item>
+    <ion-item>
+      <ion-icon name="notifications" item-start></ion-icon>
+      我的消息
+    </ion-item>
+    <ion-item>
+      <ion-icon name="document" item-start></ion-icon>
+      问题建议
+    </ion-item>
+    <ion-item>
+      <ion-icon name="call" item-start></ion-icon>
+      投诉反馈
+    </ion-item>
+    <ion-item>
+      <ion-icon name="share-alt" item-start></ion-icon>
+      分享好友
+    </ion-item>
+  </ion-list>
 </ion-content>

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

@@ -1,14 +1,58 @@
-ion-content {
-    ion-list {
-      ion-item {
-        --ion-item-background: #f5f5f5;
-        --ion-item-border-color: #ddd;
-        
-        ion-avatar img {
-          border-radius: 50%;
-        }
-      }
-    }
+.user-profile {
+  text-align: center;
+  padding: 20px;
+
+  img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    margin-bottom: 10px;
+    overflow: hidden; // 确保图片不会超出圆形边界
+  }
+
+  h2 {
+    font-size: 18px;
+    margin: 0;
+  }
+
+  p {
+    margin: 8px 0;
+    color: #666;
+  }
 
+  button {
+    margin-top: 16px;
   }
-  
+}
+
+.stats {
+  display: flex;
+  justify-content: space-around;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+
+  span {
+    strong {
+      font-weight: normal;
+      color: #333;
+    }
+  }
+}
+
+ion-card {
+  margin: 10px;
+  box-shadow: none;
+}
+
+ion-item {
+  --background: transparent;
+  --border-style: none;
+}
+
+ion-note {
+  font-size: 14px;
+  color: #999;
+}
+

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, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, NavController, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonIcon, IonNote, IonThumbnail, IonGrid, IonRow, IonCol } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
@@ -7,8 +7,9 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   templateUrl: 'tab4.page.html',
   styleUrls: ['tab4.page.scss'],
   standalone: true,
-  imports: [IonHeader,IonContent,IonToolbar, IonTitle, ExploreContainerComponent,IonCard,IonCardContent,
-    IonCardHeader,IonCardSubtitle,IonCardTitle,
+  imports: [IonHeader,IonContent,IonToolbar, IonTitle, ExploreContainerComponent,IonCard,
+    IonCardContent,IonCardHeader,IonCardSubtitle,IonCardTitle,
+    IonIcon,IonNote,IonThumbnail,IonGrid,IonRow,IonCol,
     IonList, IonItem, IonLabel, IonAvatar],
 })
 export class Tab4Page {