new15

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

@@ -8,7 +8,8 @@
 
 <ion-content [fullscreen]="true">
 
-  <ion-item>
+
+  <ion-item lines="none">
     <ion-thumbnail slot="start">
       <img alt="头像" src="https://cdn.dribbble.com/userupload/8724892/file/original-262c901f17794fa6f91d0e961224d6c8.jpg?resize=1024x682&vertical=center" />
     </ion-thumbnail>
@@ -20,116 +21,138 @@
   </ion-item>
 
   <div class="stats">
-    <span><strong>12</strong> 我的关注</span>
-    <span><strong>5</strong> 我的粉丝</span>
-    <span><strong>1.5w</strong> 获赞与收藏</span>
+    <ion-grid>
+      <ion-row>
+        <ion-col>
+          <h4><strong>12</strong></h4>
+          <p>我的关注</p>
+        </ion-col>
+        <ion-col>
+          <h4><strong>5</strong></h4>
+          <p>我的粉丝</p>
+        </ion-col>
+        <ion-col>
+          <h4><strong>1.5w</strong> </h4>
+          <p>获赞与收藏</p>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
   </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>
+  <div class="card-container">
+    <ion-grid>
+      <ion-row>
+        <ion-col>
+          <!-- 第一张卡片 -->
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>我的卡券</ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              兑换券/换购券
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+        <ion-col>
+          <!-- 第二张卡片 -->
+          <ion-card>
+            <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>
+  </div>
 
-  <ion-item>
+  <!--我的订单-->
+  <ion-item lines="none">
     <ion-label>
       <h1>我的订单</h1>
     </ion-label>
   </ion-item>
-  
+
   <ion-card>
     <ion-grid>
       <ion-row>
-        <ion-col size="3">
-          <ion-icon name="wallet"></ion-icon>
-          <ion-label>全部订单</ion-label>
+        <ion-col size="3" text-center>
+          <ion-icon name="document-text" size="large"></ion-icon>
+          <p>全部订单</p>
         </ion-col>
-        <ion-col size="3">
-          <ion-icon name="person" size="large"></ion-icon>
-          <ion-label>门票预约</ion-label>
+
+
+
+        <ion-col size="3" text-center>
+          <ion-icon name="calendar" size="large"></ion-icon>
+          <p>门票预约</p>
         </ion-col>
-        <ion-col size="3">
-          <ion-icon name="chatbubbles" size="large"></ion-icon>
-          <ion-label>退款售后</ion-label>
+        <ion-col size="3" text-center>
+          <ion-icon name="chatbox-ellipses" size="large"></ion-icon>
+          <p>退款售后</p>
         </ion-col>
-        <ion-col size="3">
-          <ion-icon name="settings" size="large"></ion-icon>
-          <ion-label>待评价</ion-label>
+        <ion-col size="3" text-center>
+          <ion-icon name="information-circle" size="large"></ion-icon>
+          <p>待评价</p>
         </ion-col>
       </ion-row>
     </ion-grid>
   </ion-card>
 
-  <ion-list lines="none">
-    <ion-item>
-      <ion-label></ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-label>门票预约</ion-label>
-    </ion-item>
-    <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-item lines="none">
+    <ion-label>
+      <h1>我的服务</h1>
+    </ion-label>
+  </ion-item>
+
+  <ion-card>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="3" size-md="4" size-lg="2" class="icon-text-container" routerLink="https://jwc.jxnu.edu.cn/Portal/Index.aspx">
+          <ion-icon name="settings" size="large"></ion-icon>
+          <p>账号设置</p>
+      </ion-col>
+
+      <ion-col size="3" size-md="4" size-lg="2">
+          <ion-icon name="create" size="large"></ion-icon>
+          <p>我的创作</p>
+      </ion-col>
+
+      <ion-col size="3" size-md="4" size-lg="2">
+          <ion-icon name="gift" size="large"></ion-icon>
+          <p>活动参与</p>
+      </ion-col>
+
+      <ion-col size="3" size-md="4" size-lg="2">
+          <ion-icon name="walk" size="large"></ion-icon>
+          <p>我的行程</p>
+      </ion-col>
+
+      <ion-col size="3" size-md="4" size-lg="2">
+          <ion-icon name="notifications" size="large"start></ion-icon>
+          <p>我的创作</p>
+      </ion-col>
+
+      <ion-col size="3" size-md="4" size-lg="2">
+          <ion-icon name="document" size="large"></ion-icon>
+          <p>问题建议</p>
+      </ion-col>
+
+      <ion-col size="3" size-md="4" size-lg="2">
+          <ion-icon name="call" size="large"></ion-icon>
+          <p>投诉反馈</p>
+      </ion-col>
+
+      <ion-col size="3" size-md="4" size-lg="2">
+          <ion-icon name="share-social" size="large"></ion-icon>
+          <p>分享好友</p>  
+      </ion-col>
+
+    </ion-row>
+  </ion-grid>
+</ion-card>
+
 </ion-content>

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

@@ -1,58 +1,24 @@
-.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;
+    .card-container ion-card {
+        margin: 5px; /* 或者更小的值 */
     }
-  }
-}
-
-ion-card {
-  margin: 10px;
-  box-shadow: none;
-}
-
-ion-item {
-  --background: transparent;
-  --border-style: none;
-}
-
-ion-note {
-  font-size: 14px;
-  color: #999;
+    /*定义icon和文本居中放置*/
+      ion-col {
+        text-align: center; /* 使列内的文本和图标水平居中 */
+      }
+      
+      ion-icon {
+        display: inline-block; /* 确保图标作为内联块元素显示 */
+      }
+      ion-content {
+        --background: #FEFAE0;
+      }
+      ion-item {
+        --background: #FEFAE0;
+      }
+      ion-button {
+        text-align: center; /* 使列内的文本和图标水平居中 */
+        color: #FEFAE0;
+      }
+h1 {
+    margin-bottom: -20px;
 }
-

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

@@ -1,6 +1,10 @@
 import { Component } from '@angular/core';
-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 { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, NavController, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonIcon, IonNote, IonThumbnail, IonGrid, IonRow, IonCol, IonButton } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { addIcons } from 'ionicons';
+import { documentText,calendar,chatboxEllipses,informationCircle,settings,create,
+  gift,walk,notifications,document,call,shareSocial
+} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tab4',
@@ -9,33 +13,20 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   standalone: true,
   imports: [IonHeader,IonContent,IonToolbar, IonTitle, ExploreContainerComponent,IonCard,
     IonCardContent,IonCardHeader,IonCardSubtitle,IonCardTitle,
-    IonIcon,IonNote,IonThumbnail,IonGrid,IonRow,IonCol,
+    IonIcon,IonNote,IonThumbnail,IonGrid,IonRow,IonCol,IonButton,
     IonList, IonItem, IonLabel, IonAvatar],
 })
-export class Tab4Page {
-  
 
-  user: any = {
-    name: '张三',
-    email: 'zhangsan@example.com'
-  };
 
-  constructor(private navCtrl: NavController) {}
 
-  editProfile() {
-    // Navigate to the edit profile page
-    this.navCtrl.navigateForward('/edit-profile');
-  }
+export class Tab4Page {
 
-  viewSettings() {
-    // Navigate to the settings page
-    this.navCtrl.navigateForward('/settings');
+  constructor() {
+    addIcons({ documentText,calendar,chatboxEllipses,informationCircle,settings,create,
+      gift,walk,notifications,document,call,shareSocial
+    });
   }
 
-  logout() {
-    // Perform logout actions
-    // For example, clear user data and navigate to the login page
-    // localStorage.removeItem('user');
-    this.navCtrl.navigateRoot('/login');
-  }
+
+
 }

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

@@ -21,3 +21,4 @@
     </ion-tab-button>
   </ion-tab-bar>
 </ion-tabs>
+

travel-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 { home, reader, chatbubbles,person } from 'ionicons/icons';
+import { home, reader, chatbubbles,person} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +14,6 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ home, reader, chatbubbles,person });
+    addIcons({ home, reader, chatbubbles,person});
   }
 }

travel-app/src/theme/variables.scss

@@ -1,2 +1,2 @@
 // For information on how to create your own theme, please see:
-// http://ionicframework.com/docs/theming/
+// http://ionicframework.com/docs/theming/