优化了我的页面

src/app/tab3/tab3.page.html

@@ -1,39 +1,47 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 3
+      智慧老年通
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
-  <div class="profile">
-    <ion-avatar>
-      <img src="assets/avatar.jpg" alt="My Avatar">
-    </ion-avatar>
-  </div>
+<ion-content>
+  <!-- 用户登入信息 -->
+  <ion-card class="login-info-card" (click)="viewUserProfile()">
+    <ion-card-header>
+      <ion-card-title>用户登入信息</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-avatar slot="center">
+        <img src="assets/img/avatar.jpg">
+      </ion-avatar>
+      <p>{{ currentUser.nickname }}</p>
+    </ion-card-content>
+  </ion-card>
 
-  <ion-list>
-    <ion-item>
-      <ion-label>微信账号</ion-label>
-      <ion-input type="text" value="yourWeChatAccount" disabled></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label>微信密码</ion-label>
-      <ion-input type="password" value="yourWeChatPassword" disabled></ion-input>
-    </ion-item>
-    <!-- Add more account and password fields here -->
-  </ion-list>
+  <!-- 用户收藏的教程合集 -->
+  <ion-card class="tutorial-collection-card">
+    <ion-card-header>
+      <ion-card-title>用户收藏的教程合集</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item (click)="viewTutorial(tutorial)" *ngFor="let tutorial of favoriteTutorials">
+          <ion-icon [name]="tutorial.icon" slot="start"></ion-icon>
+          <ion-label>{{ tutorial.title }}</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
 
-  <ion-list>
-    <ion-item button (click)="openTutorial('微信视频聊天')">
-      <ion-label>微信视频聊天</ion-label>
-      <ion-icon slot="end" name="videocam"></ion-icon>
-    </ion-item>
-    <ion-item button (click)="openTutorial('微信转账')">
-      <ion-label>微信转账</ion-label>
-      <ion-icon slot="end" name="cash"></ion-icon>
-    </ion-item>
-    <!-- Add more tutorial items here -->
-  </ion-list>
+  <!-- 用户反馈与建议 -->
+  <ion-card class="feedback-card" (click)="openFeedbackForm()">
+    <ion-card-header>
+      <ion-card-title>用户反馈与建议</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <!-- 在此处添加用户反馈与建议的表单或内容 -->
+    </ion-card-content>
+  </ion-card>
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -1,11 +1,31 @@
-.profile {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-  
-    img {
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
-    }
-  }
+.login-info-card, .tutorial-collection-card, .feedback-card {
+  margin: 10px;
+  cursor: pointer;
+}
+
+.login-info-card ion-avatar {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-info-card ion-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.tutorial-collection-card ion-list {
+  padding: 0;
+}
+
+.tutorial-collection-card ion-item {
+  border-bottom: 1px solid #ccc;
+}
+
+.feedback-card {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}

src/app/tab3/tab3.page.ts

@@ -7,21 +7,29 @@ import { AlertController } from '@ionic/angular';
   styleUrls: ['tab3.page.scss']
 })
 export class Tab3Page {
+  currentUser = {
+    nickname: 'Alice Smith'
+  };
 
-  constructor(private alertController: AlertController) {}
+  favoriteTutorials = [
+    { title: '微信视频通话', icon: 'chatbubble-ellipses-outline' },
+    { title: '支付宝入门教程', icon: 'wallet-outline' }
+  ];
 
-  openTutorial(tutorial: string) {
-    this.presentAlert(`打开${tutorial}教程`);
-  }
+  constructor() {}
 
-  async presentAlert(message: string) {
-    const alert = await this.alertController.create({
-      header: '提示',
-      message: message,
-      buttons: ['好的']
-    });
+  viewUserProfile() {
+    // 在此处编写查看用户个人信息的逻辑
+    console.log('查看用户个人信息');
+  }
 
-    await alert.present();
+  viewTutorial(tutorial: { title: string; }) {
+    // 在此处编写查看教程详情的逻辑
+    console.log('查看教程：' + tutorial.title);
   }
 
-}
+  openFeedbackForm() {
+    // 在此处编写打开反馈表单的逻辑
+    console.log('打开用户反馈与建议表单');
+  }
+}