update

AppWeb/package-lock.json

@@ -24,6 +24,7 @@
         "@ionic/angular": "^8.0.0",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.4",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -15482,6 +15483,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-4.0.0.tgz",

AppWeb/package.json

@@ -29,6 +29,7 @@
     "@ionic/angular": "^8.0.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

AppWeb/src/app/app-routing.module.ts

@@ -6,10 +6,6 @@ const routes: Routes = [
     path: '',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
   },
-  {
-    path: 'tab-mine',
-    loadChildren: () => import('./tab-mine/tab-mine.module').then( m => m.TabMinePageModule)
-  }
 ];
 @NgModule({
   imports: [

AppWeb/src/app/tab1/tab1-routing.module.ts → AppWeb/src/app/community/community-routing.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { Tab1Page } from './tab1.page';
+import { CommunityPage } from './community.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: Tab1Page,
+    component: CommunityPage,
   }
 ];
 
@@ -13,4 +13,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class Tab1PageRoutingModule {}
+export class CommunityPageRoutingModule {}

AppWeb/src/app/tab1/tab1.module.ts → AppWeb/src/app/community/community.module.ts

@@ -2,10 +2,9 @@ import { IonicModule } from '@ionic/angular';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Tab1Page } from './tab1.page';
+import { CommunityPage } from './community.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
-
-import { Tab1PageRoutingModule } from './tab1-routing.module';
+import { CommunityPageRoutingModule } from './community-routing.module';
 
 @NgModule({
   imports: [
@@ -13,8 +12,8 @@ import { Tab1PageRoutingModule } from './tab1-routing.module';
     CommonModule,
     FormsModule,
     ExploreContainerComponentModule,
-    Tab1PageRoutingModule
+    CommunityPageRoutingModule
   ],
-  declarations: [Tab1Page]
+  declarations: [CommunityPage]
 })
-export class Tab1PageModule {}
+export class CommunityPageModule {}

AppWeb/src/app/community/community.page.html

@@ -0,0 +1,35 @@
+
+  <ion-header [translucent]="true">
+    <ion-toolbar>
+      <ion-title>社区</ion-title>
+      <ion-buttons slot="end">
+        <ion-button>
+          <ion-icon name="chatbubble-ellipses"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content [fullscreen]="true">
+    <ion-searchbar></ion-searchbar>
+    <ion-item>
+      <ion-button fill="clear"><h5>好友圈</h5></ion-button>
+    </ion-item>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>好友动态</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item *ngFor="let friend of friends">
+            <ion-label>{{ friend.name }}</ion-label>
+            <ion-thumbnail slot="end">
+              <img [src]="friend.profilePic">
+            </ion-thumbnail>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </ion-content>
+
+

AppWeb/src/app/community/community.page.scss

@@ -0,0 +1,28 @@
+ion-title {
+    color: #003cff;
+    font-size: large;
+    font-weight: bold;
+}
+ion-searchbar {
+    width: 390px;
+    height: 70px;
+}
+ion-icon {
+    color: #003cff;
+}
+ion-content {
+    background-color: #003cff;
+}
+ion-card {
+    margin: 10px;
+}
+  
+ion-item {
+    border-bottom: 1px solid #ccc;
+}
+  
+ion-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+}

AppWeb/src/app/tab3/tab3.page.spec.ts → AppWeb/src/app/community/community.page.spec.ts

@@ -3,7 +3,7 @@ import { IonicModule } from '@ionic/angular';
 
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
-import { Tab3Page } from './tab3.page';
+import { Tab3Page } from './community.page';
 
 describe('Tab3Page', () => {
   let component: Tab3Page;

AppWeb/src/app/community/community.page.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-community',
+  templateUrl: 'community.page.html',
+  styleUrls: ['community.page.scss']
+})
+export class CommunityPage {
+    friends = [
+      { name: 'Alice', profilePic: 'assets/profiles/alice.jpg' },
+      { name: 'Bob', profilePic: 'assets/profiles/bob.jpg' },
+      { name: 'Charlie', profilePic: 'assets/profiles/charlie.jpg' },
+    ];
+
+  constructor() {}
+
+}

AppWeb/src/app/tab3/tab3-routing.module.ts → AppWeb/src/app/home/home-routing.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { Tab3Page } from './tab3.page';
+import { homePage } from './home.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: Tab3Page,
+    component: homePage,
   }
 ];
 
@@ -13,4 +13,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class Tab3PageRoutingModule {}
+export class homePageRoutingModule {}

AppWeb/src/app/tab2/tab2.module.ts → AppWeb/src/app/home/home.module.ts

@@ -2,10 +2,9 @@ import { IonicModule } from '@ionic/angular';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Tab2Page } from './tab2.page';
+import { homePage } from './home.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
-
-import { Tab2PageRoutingModule } from './tab2-routing.module';
+import { homePageRoutingModule } from './home-routing.module';
 
 @NgModule({
   imports: [
@@ -13,8 +12,8 @@ import { Tab2PageRoutingModule } from './tab2-routing.module';
     CommonModule,
     FormsModule,
     ExploreContainerComponentModule,
-    Tab2PageRoutingModule
+    homePageRoutingModule
   ],
-  declarations: [Tab2Page]
+  declarations: [homePage]
 })
-export class Tab2PageModule {}
+export class homePageModule {}

AppWeb/src/app/home/home.page.html

@@ -0,0 +1,75 @@
+
+<ion-content class="ion-padding">
+  <div class="search-container">
+    <ion-icon name="add-circle" slot="start" class="search-icon"></ion-icon>  
+    <ion-searchbar placeholder="211减肥法" class="search-input"></ion-searchbar>
+    <ion-icon name="filter-circle" slot="end" class="search-icon"></ion-icon>  
+  </div> 
+  <ion-grid>
+    <ion-row>
+      <ion-col size="12">
+        <ion-card class="phyData">
+          <ion-card-content>
+            <ion-icon name="accessibility"></ion-icon>
+            <p>身高: <span>{{ phyData.height }}</span>cm</p>
+            <p>体重: <span>{{ phyData.weight }}</span>kg</p>
+            <p>BMI: <span>{{ phyData.BMI }}</span></p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  <ion-row>
+    <ion-col size="6">
+      <ion-card class="sportData">
+        <ion-card-content>
+          <h4>运动记录</h4>
+          <ion-icon name="walk"></ion-icon> 
+          <p>步数: <span>{{ sportData.steps }}</span>步</p>
+          <p>消耗热量: <span>{{ sportData.deCalories }}</span>卡</p>
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+    <ion-col size="6">  
+      <ion-card class="eatData">  
+        <ion-card-content>
+          <h4>饮食记录</h4>
+          <ion-icon name="restaurant"></ion-icon>
+          <p>还可以吃：<span>{{eatData.neCalories}}</span>卡</p>
+          <p>摄入热量: <span>{{ eatData.inCalories }}</span>卡</p>
+        </ion-card-content>
+      </ion-card>  
+    </ion-col>  
+  </ion-row>
+  <ion-row>
+    <ion-col size="6">
+      <ion-card class="weightData">
+        <ion-card-content>
+          <h4>体重记录</h4>
+          <ion-icon name="barbell"></ion-icon>
+          <p>目标体重: <span>{{ weightData.targetWeight }}</span>kg</p>
+          <p>当前体重: <span>{{ weightData.currentWeight }}</span>kg</p>
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+    <ion-col size="6">
+      <ion-card class="sleepData">
+        <ion-card-content>
+          <h4>睡眠记录</h4>
+          <ion-icon name="moon"></ion-icon>
+          <p>睡眠时长: <span>{{ sleepData.sleepHours }}</span>小时</p>
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col size="12">
+      <ion-card class="searchPi">
+        <ion-card-content>
+          <ion-icon name="pizza"></ion-icon>
+          <h4>食物热量查询</h4>
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+</ion-content>

AppWeb/src/app/home/home.page.scss

@@ -0,0 +1,161 @@
+.search-container {  
+  display: flex;  
+  align-items: center; 
+  position: relative;  
+}  
+  
+.search-input {  
+  flex: 1; 
+  padding-left: 20px; 
+  padding-right: 20px; 
+}  
+  
+.search-icon {  
+  font-size: 30px; 
+  color: #003ccf;
+}
+ion-card {
+    margin-top: 0px;
+    margin-bottom: 5px;
+    border-radius: 20px;
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
+.phyData {
+  background-color: #e2eaff;
+  ion-card-content {
+    display: flex;
+    max-height: 100px;  
+    flex-direction: row;  
+    align-items: center;
+    padding: 15px; 
+  }
+  p {
+    margin: 0; 
+    padding: 0; 
+    flex: 1; 
+    text-align: center; 
+    span {
+      font-weight: bold;
+      color: black;
+      font-size: 20px;
+    }  
+  }
+  ion-icon {
+    font-size: 40px; 
+    margin-right: 5px; 
+    flex: 0 0 auto; 
+    color: #003ccf; 
+  }
+}
+.sportData {
+  ion-card-content {
+    padding-right: 10px;
+    h4 {
+      margin: 0px;
+      padding-top: 5px;
+      padding-bottom: 10px;
+      font-size: 20px;
+      font-weight: bold;
+      color: black;
+    }
+    ion-icon {
+      font-size: 35px;
+      color: rgba(255, 111, 33, 0.879);
+    }
+    span {
+      font-weight: bold;
+      color: black;
+      font-size: 18px;
+    }
+  }
+}
+.eatData {
+  ion-card-content {
+    padding-right: 10px;
+    h4 {
+      margin: 0px;
+      padding-top: 5px;
+      padding-bottom: 10px;
+      font-size: 20px;
+      font-weight: bold;
+      color: black;
+    }
+    ion-icon {
+      font-size: 35px;
+      color: rgb(23, 93, 0);
+    }
+    span {
+      font-weight: bold;
+      color: black;
+      font-size: 18px;
+    }
+  }
+}
+.weightData {
+  ion-card-content {
+    padding-right: 10px;
+    h4 {
+      margin: 0px;
+      padding-top: 5px;
+      padding-bottom: 10px;
+      font-size: 20px;
+      font-weight: bold;
+      color: black;
+    }
+    ion-icon {
+      font-size: 35px;
+      color: rgb(190, 174, 2);
+    }
+    span {
+      font-weight: bold;
+      color: black;
+      font-size: 18px;
+    }
+  }
+}
+.sleepData {
+  ion-card-content {
+    padding-right: 10px;
+    h4 {
+      margin: 0px;
+      padding-top: 5px;
+      padding-bottom: 10px;
+      font-size: 20px;
+      font-weight: bold;
+      color: black;
+    }
+    ion-icon {
+      font-size: 35px;
+      color: rgb(146, 2, 190);
+    }
+    span {
+      font-weight: bold;
+      color: black;
+      font-size: 18px;
+    }
+  }
+}
+.searchPi {
+  ion-card-content {
+    display: flex;
+    max-height: 100px;  
+    flex-direction: row;  
+    align-items: center;
+    padding: 15px; 
+    h4 {
+      margin: 0; 
+      padding: 0; 
+      font-size: 20px;
+      font-weight: bold;
+      color: black;
+    }
+    ion-icon {
+      font-size: 40px;
+      color: rgb(255, 107, 49);
+      padding-left: 55px;
+      padding-right: 20px;
+    }
+  }
+}

AppWeb/src/app/tab2/tab2.page.spec.ts → AppWeb/src/app/home/home.page.spec.ts

@@ -3,19 +3,19 @@ import { IonicModule } from '@ionic/angular';
 
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
-import { Tab2Page } from './tab2.page';
+import { homePage } from './home.page';
 
-describe('Tab2Page', () => {
-  let component: Tab2Page;
-  let fixture: ComponentFixture<Tab2Page>;
+describe('homePage', () => {
+  let component: homePage;
+  let fixture: ComponentFixture<homePage>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [Tab2Page],
+      declarations: [homePage],
       imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(Tab2Page);
+    fixture = TestBed.createComponent(homePage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

AppWeb/src/app/home/home.page.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: `app-home`,
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss']
+})
+export class homePage {
+
+  phyData = {
+    height: '180',
+    weight: '100',
+    BMI: '24.1',
+  };
+
+  sportData = {
+    steps: '10000',
+    deCalories: '10000',
+  };
+
+  eatData = {
+    inCalories: '20000',
+    neCalories:'10000',
+  };
+
+  weightData = {
+    targetWeight: '700',
+    currentWeight: '750',
+  };
+
+  sleepData = {
+    sleepHours: '24',
+  };
+
+  foodCalorie = {
+
+  };
+  constructor() {}
+
+
+}

AppWeb/src/app/tab-mine/tab-mine-routing.module.ts → AppWeb/src/app/mine/mine-routing.module.ts

@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-
-import { TabMinePage } from './tab-mine.page';
+import { minePage } from './mine.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: TabMinePage
+    component: minePage
   }
 ];
 
@@ -14,4 +13,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class TabMinePageRoutingModule {}
+export class minePageRoutingModule {}

AppWeb/src/app/tab-mine/tab-mine.module.ts → AppWeb/src/app/mine/mine.module.ts

@@ -1,20 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-
 import { IonicModule } from '@ionic/angular';
-
-import { TabMinePageRoutingModule } from './tab-mine-routing.module';
-
-import { TabMinePage } from './tab-mine.page';
+import { minePageRoutingModule } from './mine-routing.module';
+import { minePage } from './mine.page';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    TabMinePageRoutingModule
+    minePageRoutingModule,
   ],
-  declarations: [TabMinePage]
+  declarations: [minePage]
 })
-export class TabMinePageModule {}
+export class minePageModule {}

AppWeb/src/app/mine/mine.page.html

@@ -0,0 +1,37 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>我的</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>健康档案</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-row>
+        <ion-col size="2">
+          <ion-img src="assets/avatar.jpg"></ion-img>
+        </ion-col>
+        <ion-col size="10">
+          <ion-row>
+            <ion-col>
+              <ion-label>身高: 180cm</ion-label>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-label>体重: 75kg</ion-label>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-label>BMI: 23.1</ion-label>
+            </ion-col>
+          </ion-row>
+        </ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

AppWeb/src/app/mine/mine.page.scss

@@ -0,0 +1,22 @@
+
+ion-title {
+    color: #003cff;
+}
+ion-card {
+    margin: 10px;
+}
+  
+  ion-img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+}
+  
+  ion-row {
+    padding: 10px;
+}
+  
+  ion-col {
+    display: flex;
+    align-items: center;
+}

AppWeb/src/app/tab-mine/tab-mine.page.spec.ts → AppWeb/src/app/mine/mine.page.spec.ts

@@ -1,12 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TabMinePage } from './tab-mine.page';
+import { minePage } from './mine.page';
 
-describe('TabMinePage', () => {
-  let component: TabMinePage;
-  let fixture: ComponentFixture<TabMinePage>;
+describe('minePage', () => {
+  let component: minePage;
+  let fixture: ComponentFixture<minePage>;
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TabMinePage);
+    fixture = TestBed.createComponent(minePage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

AppWeb/src/app/mine/mine.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-mine',
+  templateUrl: './mine.page.html',
+  styleUrls: ['./mine.page.scss'],
+})
+export class minePage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

AppWeb/src/app/tab2/tab2-routing.module.ts → AppWeb/src/app/plan/plan-routing.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { Tab2Page } from './tab2.page';
+import { PlanPage } from './plan.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: Tab2Page,
+    component: PlanPage,
   }
 ];
 
@@ -13,4 +13,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class Tab2PageRoutingModule {}
+export class PlanPageRoutingModule {}

AppWeb/src/app/tab3/tab3.module.ts → AppWeb/src/app/plan/plan.module.ts

@@ -2,10 +2,10 @@ 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 { PlanPage } from './plan.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
-import { Tab3PageRoutingModule } from './tab3-routing.module';
+import { PlanPageRoutingModule } from './plan-routing.module';
 
 @NgModule({
   imports: [
@@ -13,8 +13,8 @@ import { Tab3PageRoutingModule } from './tab3-routing.module';
     CommonModule,
     FormsModule,
     ExploreContainerComponentModule,
-    Tab3PageRoutingModule
+    PlanPageRoutingModule
   ],
-  declarations: [Tab3Page]
+  declarations: [PlanPage]
 })
-export class Tab3PageModule {}
+export class PlanPageModule {}

AppWeb/src/app/plan/plan.page.html

@@ -0,0 +1,51 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>计划</ion-title>
+    <ion-buttons slot="start">
+      <ion-input placeholder="搜索"></ion-input>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button (click)="addPlan()">
+        <ion-icon name="add"></ion-icon>
+        添加计划
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-card>
+    <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">Slide 1</div>
+        <div class="swiper-slide">Slide 2</div>
+        <div class="swiper-slide">Slide 3</div>
+      </div>
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+    </div>
+  </ion-card>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>制定新的计划</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-item>
+        <ion-label position="floating">睡眠时长</ion-label>
+        <ion-input type="number" placeholder="请输入睡眠时长"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label position="floating">运动步数</ion-label>
+        <ion-input type="number" placeholder="请输入运动步数"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label position="floating">摄入热量</ion-label>
+        <ion-input type="number" placeholder="请输入摄入热量"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label position="floating">体重变化</ion-label>
+        <ion-input type="number" placeholder="请输入体重变化"></ion-input>
+      </ion-item>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

AppWeb/src/app/plan/plan.page.scss

@@ -0,0 +1,34 @@
+.swiper-container {
+    width: 100%;
+    height: 300px;
+  }
+  
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .swiper-button-prev,
+  .swiper-button-next {
+    position: absolute;
+    top: 50%;
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    text-align: center;
+    line-height: 30px;
+  }
+  
+  .swiper-button-prev {
+    left: 10px;
+  }
+  
+  .swiper-button-next {
+    right: 10px;
+  }

AppWeb/src/app/tab1/tab1.page.spec.ts → AppWeb/src/app/plan/plan.page.spec.ts

@@ -3,19 +3,19 @@ import { IonicModule } from '@ionic/angular';
 
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
-import { Tab1Page } from './tab1.page';
+import { PlanPage } from './plan.page';
 
-describe('Tab1Page', () => {
-  let component: Tab1Page;
-  let fixture: ComponentFixture<Tab1Page>;
+describe('PlanPage', () => {
+  let component: PlanPage;
+  let fixture: ComponentFixture<PlanPage>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [Tab1Page],
+      declarations: [PlanPage],
       imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(Tab1Page);
+    fixture = TestBed.createComponent(PlanPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

AppWeb/src/app/plan/plan.page.ts

@@ -0,0 +1,33 @@
+import { Component, ViewChild, AfterViewInit,ElementRef } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+import Swiper from 'swiper';
+
+@Component({
+  selector: 'app-plan',
+  templateUrl: 'plan.page.html',
+  styleUrls: ['plan.page.scss']
+})
+export class PlanPage implements AfterViewInit {
+  @ViewChild('.swiper-container', { read: ElementRef })
+  swiperContainer!: ElementRef;
+  ngAfterViewInit() {
+    setTimeout(() => {
+    new Swiper(this.swiperContainer.nativeElement, {
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+    });
+  },0)
+  }
+  constructor(public alertController: AlertController) {}
+  async addPlan() {
+    const alert = await this.alertController.create({
+      header: '添加计划',
+      message: '您点击了添加计划按钮',
+      buttons: ['OK']
+    });
+
+    await alert.present();
+}
+}

AppWeb/src/app/tab-mine/tab-mine.page.html

@@ -1,13 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>tab-mine</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">tab-mine</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>

AppWeb/src/app/tab-mine/tab-mine.page.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-tab-mine',
-  templateUrl: './tab-mine.page.html',
-  styleUrls: ['./tab-mine.page.scss'],
-})
-export class TabMinePage implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

AppWeb/src/app/tab1/tab1.page.html

@@ -1,39 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      首页
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-searchbar show-clear-button="always" value="搜索"></ion-searchbar>
-  <ion-card class="simple-linear">
-    <ion-card-header>
-      <ion-card-title>心率监测</ion-card-title>
-      <ion-card-subtitle>Heart rate monitoring</ion-card-subtitle>
-    </ion-card-header>
-    <ion-card-content> 查看您的心率监测记录</ion-card-content>
-  </ion-card>
-  <ion-card color="danger">
-    <ion-card-header>
-      <ion-card-title>血压监测</ion-card-title>
-      <ion-card-subtitle>Heart rate monitoring</ion-card-subtitle>
-    </ion-card-header>
-    <ion-card-content> 查看您的心率监测记录</ion-card-content>
-  </ion-card>
-  <ion-card color="success">
-    <ion-card-header>
-      <ion-card-title>饮食健康</ion-card-title>
-      <ion-card-subtitle>Heart rate monitoring</ion-card-subtitle>
-    </ion-card-header>
-    <ion-card-content> 查看您的心率监测记录</ion-card-content>
-  </ion-card>
-  <ion-card color="tertiary">
-    <ion-card-header>
-      <ion-card-title>BMI指数</ion-card-title>
-      <ion-card-subtitle>Heart rate monitoring</ion-card-subtitle>
-    </ion-card-header>
-    <ion-card-content> 查看您的心率监测记录</ion-card-content>
-  </ion-card>
-</ion-content>

AppWeb/src/app/tab1/tab1.page.scss

@@ -1,6 +0,0 @@
-.simple-linear {
-    background: linear-gradient(to bottom right, rgba(207, 161, 86,0.3), rgba(202, 44, 44,0.3));
-  }
-.simple-linear ion-card-title {
-    color: white;
-}

AppWeb/src/app/tab1/tab1.page.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tab1',
-  templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss']
-})
-export class Tab1Page {
-
-  constructor() {}
-
-}

AppWeb/src/app/tab2/tab2.page.html

@@ -1,17 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>

AppWeb/src/app/tab2/tab2.page.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tab2',
-  templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss']
-})
-export class Tab2Page {
-
-  constructor() {}
-
-}

AppWeb/src/app/tab3/tab3.page.html

@@ -1,17 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>

AppWeb/src/app/tab3/tab3.page.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tab3',
-  templateUrl: 'tab3.page.html',
-  styleUrls: ['tab3.page.scss']
-})
-export class Tab3Page {
-
-  constructor() {}
-
-}

AppWeb/src/app/tabs/tabs-routing.module.ts

@@ -1,38 +1,37 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { TabsPage } from './tabs.page';
-
 const routes: Routes = [
   {
     path: 'tabs',
     component: TabsPage,
     children: [
       {
-        path: 'tab1',
-        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
+        path: 'home',
+        loadChildren: () => import('../home/home.module').then(m => m.homePageModule)
       },
       {
-        path: 'tab2',
-        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
+        path: 'plan',
+        loadChildren: () => import('../plan/plan.module').then(m => m.PlanPageModule)
       },
       {
-        path: 'tab3',
-        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
+        path: 'community',
+        loadChildren: () => import('../community/community.module').then(m => m.CommunityPageModule)
       },
       {
-        path: 'tab-mine',
-        loadChildren: () => import('../tab-mine/tab-mine.module').then(m => m.TabMinePageModule)
+        path: 'mine',
+        loadChildren: () => import('../mine/mine.module').then(m => m.minePageModule)
       },
       {
         path: '',
-        redirectTo: '/tabs/tab1',
+        redirectTo: '/tabs/home',
         pathMatch: 'full'
       }
     ]
   },
   {
     path: '',
-    redirectTo: '/tabs/tab1',
+    redirectTo: '/tabs/home',
     pathMatch: 'full'
   }
 ];

AppWeb/src/app/tabs/tabs.page.html

@@ -1,24 +1,22 @@
 <ion-tabs>
-
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="home-outline"></ion-icon>
-      <ion-label>首页</ion-label>
+    <ion-tab-button tab="home" href="/tabs/home">
+      <ion-icon aria-hidden="true" name="home"></ion-icon>
+      <span>首页</span>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="calendar-outline"></ion-icon>
-      <ion-label>计划</ion-label>
+    <ion-tab-button tab="plan" href="/tabs/plan">
+      <ion-icon aria-hidden="true" name="calendar"></ion-icon>
+      <span>计划</span>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="business-outline"></ion-icon>
-      <ion-label>社区</ion-label>
+    <ion-tab-button tab="community" href="/tabs/community">
+      <ion-icon aria-hidden="true" name="business"></ion-icon>
+      <span>社区</span>
     </ion-tab-button>
-    <ion-tab-button tab="tab-mine" href="/tabs/tab-mine">
-      <ion-icon aria-hidden="true" name="person-outline"></ion-icon>
-      <ion-label>我的</ion-label>
+    <ion-tab-button tab="mine" href="/tabs/mine">
+      <ion-icon aria-hidden="true" name="person"></ion-icon>
+      <span>我的</span>
     </ion-tab-button>
   </ion-tab-bar>
-
 </ion-tabs>

AppWeb/src/app/tabs/tabs.page.scss

@@ -1 +1,4 @@
-
+ion-tab-bar {
+    flex: 1;
+    max-height: 65px;
+}

AppWeb/src/global.scss

@@ -34,4 +34,4 @@
 
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
-@import "@ionic/angular/css/palettes/dark.system.css";
+@import "@ionic/angular/css/palettes/dark.system.css";

AppWeb/src/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 
 <head>
+  <link rel="stylesheet" href="assets/swiper/swiper.min.css">
   <meta charset="utf-8" />
   <title>App-HealthTrack</title>
 

AppWeb/src/theme/variables.scss

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

README.md

@@ -94,39 +94,59 @@
 - 社区
 - 我的
 ## 健康追踪产品结构
-- 首页
-   - 顶部导航
-      - 搜索框
-   - 功能区域
-      - 身体评估
-         - BMI指数
-         - 心率监测
-         - 血压监测
-         - 身体维度检测
-   - 底部导航
-- 计划
-   - 顶部导航
-   - 功能区域
-      - 饮食计划
-      - 体重控制
-      - 训练计划
-   - 底部导航
-- 社区
-   - 顶部导航
-   - 功能区域
-      - 同城
-      - 好友小组
-      - 热门帖子
-   - 底部导航
-- 我的
- - 顶部导航
- - 功能区域
-   - 个人信息
-   - 身体数据记录
-   - 身体能力测评 
 ## 信息结构图梳理
-
- 
+  - 首页：home(page)
+    - PhyData:身体数据详情(card)
+        - 身高
+        - 体重
+        - BMI
+    - SportData:运动记录(card)
+        - 今日运动步数
+        - 今日热量消耗
+    - EatData:饮食记录(card)
+        - 今日摄入热量
+    - WeightData:体重记录（card）
+        - 目标体重
+        - 当前体重
+    - SleepData:睡眠记录(card)
+        - 今日睡眠时长
+    - FoodCalorie:食物热量查询(card)
+        - 查询各类食物热量
+ - 计划：plan(page)
+    - 顶部
+        - 左侧：搜索框
+        - 右侧：添加计划（button）
+    - 轮播图
+    - 中间（card）
+        - 顶部
+            - 标题：制定新的计划
+        - item
+            - 睡眠时长：输入框
+            - 运动步数：输入框
+            - 摄入热量：输入框
+            - 体重变化：输入框
+ - 社区：community
+    - 搜索好友(serach)
+    - 消息(icon)
+    - 社区动态
+        - 图文展示
+            - 人物昵称
+            - 日常图片
+ - 我的：mine（page）
+    - 登录/注册
+        - 用户的注册及登录
+            - 忘记密码
+        - 资料编辑
+            - 文字
+            - 图片编辑
+        - 我的
+            - 登陆状态
+                - 登录
+                    - 会员卡片
+                - 未登录
+                    - 占位卡片
+   
+      
 ## 各页面对标竞品截图梳理
 ## 运动界面对标：