上传文件至 ''

tab3.module.ts

@@ -0,0 +1,20 @@
+import { IonicModule } from '@ionic/angular';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Tab3Page } from './tab3.page';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { Tab3PageRoutingModule } from './tab3-routing.module';
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+    ExploreContainerComponentModule,
+    Tab3PageRoutingModule
+  ],
+  declarations: [Tab3Page]
+})
+export class Tab3PageModule {}

tab3.page.html

@@ -0,0 +1,79 @@
+<ion-header [translucent]="true">
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tab 3</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  
+  <!-- 个人信息板块 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-avatar>
+        <img src="assets/img/head.jpg" class="avatar-img">
+      </ion-avatar>
+      <ion-card-title>昵称：鱼聪明</ion-card-title>
+      <ion-card-subtitle>个性签名：坚持不懈，直到成功</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="6">
+            打卡天数： 天
+          </ion-col>
+          <ion-col size="6">
+            累计减重： kg
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col size="6">
+            当前赏金： 元
+          </ion-col>
+          <ion-col size="6">
+            BMI指数：
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 功能菜单 -->
+  <ion-list>
+    <ion-item button (click)="onItemClick('我的目标')">
+      <ion-icon name="body" slot="start"></ion-icon>
+      我的目标
+    </ion-item>
+    <ion-item button (click)="onItemClick('减肥搭子')">
+      <ion-icon name="people" slot="start"></ion-icon>
+      减肥搭子
+    </ion-item>
+    <ion-item button (click)="onItemClick('赏金商店')">
+      <ion-icon name="cash" slot="start"></ion-icon>
+      赏金商店
+    </ion-item>
+    <ion-item button (click)="onItemClick('我的账户')">
+      <ion-icon name="person" slot="start"></ion-icon>
+      我的账户
+    </ion-item>
+    <ion-item button (click)="onItemClick('背景设置')">
+      <ion-icon name="settings" slot="start"></ion-icon>
+      背景设置
+    </ion-item>
+    <ion-item button (click)="onItemClick('操作手册')">
+      <ion-icon name="book" slot="start"></ion-icon>
+      操作手册
+    </ion-item>
+    <ion-item button (click)="onItemClick('数据备份')">
+      <ion-icon name="cloud-download" slot="start"></ion-icon>
+      数据备份
+    </ion-item>
+    <ion-item button (click)="onItemClick('数据下载')">
+      <ion-icon name="download" slot="start"></ion-icon>
+      数据下载
+    </ion-item>
+  </ion-list>
+  
+</ion-content>

tab3.page.scss

@@ -0,0 +1,21 @@
+.avatar-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+    
+    ion-item.button {
+      --background-hover: rgba(0, 0, 0, 0.1);
+      --background-activated: rgba(0, 0, 0, 0.2);
+      transition: background-color 0.2s;
+    
+      &:hover {
+        background-color: var(--background-hover);
+      }
+    
+      &:active {
+        background-color: var(--background-activated);
+      }
+    }
+    

tab3.page.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { Tab3Page } from './tab3.page';
+
+describe('Tab3Page', () => {
+  let component: Tab3Page;
+  let fixture: ComponentFixture<Tab3Page>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [Tab3Page],
+      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Tab3Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tab3.page.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-tab3',
+  templateUrl: 'tab3.page.html',
+  styleUrls: ['tab3.page.scss']
+})
+export class Tab3Page {
+
+  constructor(private toastController: ToastController) {}
+
+  async onItemClick(item: string) {
+    const toast = await this.toastController.create({
+      message: `Clicked on ${item}`,
+      duration: 2000,
+    });
+    toast.present();
+  }
+
+}