App.1.1

package-lock.json

@@ -21,9 +21,10 @@
         "@capacitor/haptics": "6.0.0",
         "@capacitor/keyboard": "6.0.0",
         "@capacitor/status-bar": "6.0.0",
-        "@ionic/angular": "^8.0.0",
+        "@ionic/angular": "^8.2.2",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.4",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -3204,11 +3205,11 @@
       "dev": true
     },
     "node_modules/@ionic/angular": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.2.0.tgz",
-      "integrity": "sha512-47y/J3yqLwzHqe+50QTTIr+9AYbjpu9IR+p33bRbxJhUEaUCl5VKzLwjL94bVi+eTVwr786eu2kK8TRTaPyEBw==",
+      "version": "8.2.2",
+      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.2.2.tgz",
+      "integrity": "sha512-c8siqeWN5iWvu7LlechiIYSWRAlvjL2dEKjB19xspAzZv+9aXrT9YWPz+DTeS2eTO6CnwvHJpG0tPlVxgjpr1g==",
       "dependencies": {
-        "@ionic/core": "8.2.0",
+        "@ionic/core": "8.2.2",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -3247,9 +3248,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.2.0.tgz",
-      "integrity": "sha512-+TjHDFluiGYVNiQZOLsETCE+om5FKYbaOKkfmCQYvRGxlg4WtOwaX6YCrpP4MMuerGt36PA196oh/JTcVe9ByA==",
+      "version": "8.2.2",
+      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.2.2.tgz",
+      "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==",
       "dependencies": {
         "@stencil/core": "^4.17.2",
         "ionicons": "^7.2.2",
@@ -14273,6 +14274,24 @@
         "node": ">= 0.4"
       }
     },
+    "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",

package.json

@@ -26,9 +26,10 @@
     "@capacitor/haptics": "6.0.0",
     "@capacitor/keyboard": "6.0.0",
     "@capacitor/status-bar": "6.0.0",
-    "@ionic/angular": "^8.0.0",
+    "@ionic/angular": "^8.2.2",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

src/app/app.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { register } from 'swiper/element/bundle';
+
+register();
 
 @Component({
   selector: 'app-root',
@@ -6,5 +9,5 @@ import { Component } from '@angular/core';
   styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
-  constructor() {}
+  constructor() { }
 }

src/app/app.module.ts

@@ -6,11 +6,13 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [AppComponent],
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }

src/app/tab1/tab1.module.ts

@@ -7,7 +7,11 @@ import { ExploreContainerComponentModule } from '../explore-container/explore-co
 
 import { Tab1PageRoutingModule } from './tab1-routing.module';
 
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+
   imports: [
     IonicModule,
     CommonModule,
@@ -17,4 +21,4 @@ import { Tab1PageRoutingModule } from './tab1-routing.module';
   ],
   declarations: [Tab1Page]
 })
-export class Tab1PageModule {}
+export class Tab1PageModule { }

src/app/tab1/tab1.page.html

@@ -4,66 +4,108 @@
       知食有味
     </ion-title>
     <ion-buttons slot="end">
-      <ion-button>
-        <ion-icon name="search-outline" size="large"></ion-icon>
+      <ion-button shape="round">
+        <ion-icon name="notifications-outline" size="large"></ion-icon>
       </ion-button>
     </ion-buttons>
+
   </ion-toolbar>
 </ion-header>
 <ion-content color="light">
+
+  <!--虚拟身份-->
+  <ion-card>
+    <ion-card-header>
+      <ion-item lines="full">
+        <ion-avatar slot="start">
+          <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ion-avatar>
+        <ion-label>
+          <ion-note>虚拟身份名</ion-note>
+        </ion-label>
+        <ion-buttons slot="end">
+          <ion-button shape="round">
+            <ion-icon name="swap-horizontal-outline"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item lines="none">身份标签</ion-item>
+    </ion-card-header>
+    <ion-card-content>
+      你的目标内容
+    </ion-card-content>
+  </ion-card>
+
+  <!--三餐记录-->
   <ion-card>
     <ion-card-header>
       <ion-card-title>今日三餐</ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-            <ion-card>
-              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
-              <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>
-              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
-              <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>
-              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
-              <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>
-              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
-              <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 lines="none">
+        <ion-label>
+          <h1>早饭</h1>
+          <p>五彩虾仁炒饭,营养丰富，早餐最爱</p>
+        </ion-label>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label>
+          <h1>中饭</h1>
+          <p>蜜汁烤五花肉，经典家常，上桌就光盘</p>
+        </ion-label>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label>
+          <h1>晚饭</h1>
+          <p>凉拌西蓝花，鲜香可口，美味下饭</p>
+        </ion-label>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-buttons slot="end">
+          <ion-button fill="solid" shape="round" size="large">
+            <ion-note color="black">编辑</ion-note>
+          </ion-button>
+        </ion-buttons>
+      </ion-item>
+    </ion-card-content>
+  </ion-card>
+  <!--AI推荐-->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>AI推荐</ion-card-title>
+    </ion-card-header>
+    <!--推荐内容-->
+    <ion-card-content>
+      <swiper-container>
+        <swiper-slide>
+          <ion-card>
+            <img alt="图像" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+            <ion-card-header>
+              <ion-card-title>AI推荐食物名 1</ion-card-title>
+              <ion-card-subtitle>标签 </ion-card-subtitle>
+            </ion-card-header>
+          </ion-card>
+        </swiper-slide>
+        <swiper-slide>
+          <ion-card>
+            <img alt="图像" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+            <ion-card-header>
+              <ion-card-title>AI推荐食物名 2</ion-card-title>
+              <ion-card-subtitle>标签 </ion-card-subtitle>
+            </ion-card-header>
+          </ion-card>
+        </swiper-slide>
+        <swiper-slide>
+          <ion-card>
+            <img alt="图像" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+            <ion-card-header>
+              <ion-card-title>AI推荐食物名 3</ion-card-title>
+              <ion-card-subtitle>标签 </ion-card-subtitle>
+            </ion-card-header>
+          </ion-card>
+        </swiper-slide>
+      </swiper-container>
+
     </ion-card-content>
   </ion-card>
 

src/app/tab2/tab2.page.html

@@ -3,9 +3,16 @@
     <ion-title>
       社区
     </ion-title>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="search-outline" size="large"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
+
 <ion-content color="light">
+  <!-- 热搜 -->
   <ion-card>
     <ion-card-header>
       <ion-card-title>今日热搜</ion-card-title>
@@ -18,4 +25,85 @@
       </ion-item>
     </ion-card-content>
   </ion-card>
+
+  <!-- 分栏 -->
+  <ion-card class="navbar">
+    <ion-toolbar>
+      <ion-segment value="推荐">
+        <ion-segment-button value="推荐" (click)="cate='推荐'">
+          <ion-label>相关推荐</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="附近" (click)="cate='附近'">
+          <ion-label>附近门店</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    </ion-toolbar>
+  </ion-card>
+
+  <!-- 分栏详情 -->
+  <ng-container *ngIf="cate=='推荐'">
+    <ion-grid>
+      <ion-row>
+        <ion-col size="6">
+          <ion-card>
+            <ion-card-header>
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+            </ion-card-header>
+            <ion-card-content>
+              推荐菜肴1
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+        <ion-col size="6">
+          <ion-card>
+            <ion-card-header>
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+            </ion-card-header>
+            <ion-card-content>
+              推荐菜肴2
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+        <ion-col size="6">
+          <ion-card>
+            <ion-card-header>
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+            </ion-card-header>
+            <ion-card-content>
+              推荐菜肴3
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ng-container>
+
+  <ng-container *ngIf="cate=='附近'">
+    <ion-list lines="inset">
+      <ion-item>
+        <ion-thumbnail slot="start"><img alt="附近店面图"
+            src="https://ionicframework.com/docs/img/demos/avatar.svg" /></ion-thumbnail>
+        <ion-label>
+          <strong>附近食品商户名1</strong>
+          <p>评分：5.0分</p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail slot="start"><img alt="附近店面图"
+            src="https://ionicframework.com/docs/img/demos/avatar.svg" /></ion-thumbnail>
+        <ion-label>
+          <strong>附近食品商户名2</strong>
+          <p>评分：5.0分</p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail slot="start"><img alt="附近店面图"
+            src="https://ionicframework.com/docs/img/demos/avatar.svg" /></ion-thumbnail>
+        <ion-label>
+          <strong>附近食品商户名3</strong>
+          <p>评分：5.0分</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </ng-container>
 </ion-content>

src/app/tab2/tab2.page.ts

@@ -5,8 +5,14 @@ import { Component } from '@angular/core';
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss']
 })
+
 export class Tab2Page {
 
-  constructor() {}
+  constructor() { }
+
+  cate: string = "推荐"
 
 }
+
+
+

src/app/tab3/tab3.page.html

@@ -1,10 +1,7 @@
 <ion-header>
   <ion-toolbar>
     <!-- 编辑信息按钮 -->
-    <ion-buttons slot="end">
-      <ion-button>
-        <ion-icon slot="start" name="create-outline"></ion-icon>
-      </ion-button>
+    <ion-buttons slot="start">
       <ion-button id="myMenu">
         <ion-icon name="menu-outline"></ion-icon>
       </ion-button>
@@ -27,6 +24,11 @@
         </ng-template>
       </ion-popover>
     </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon slot="start" name="create-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 <ion-content color="light">
@@ -41,9 +43,6 @@
           <ion-note>昵称</ion-note>
         </ion-label>
       </ion-item>
-      <ion-item lines="none">
-        <ion-badge slot="start">标签</ion-badge>
-      </ion-item>
       <ion-item lines="none">
         <ion-label color="medium">
           <ion-note>介绍一下自己吧</ion-note>
@@ -57,13 +56,20 @@
     <ion-list [inset]="true">
       <ion-item button detail="true">
         <ion-label>
-          <ion-note>关注</ion-note>
+          <ion-note>身份档案</ion-note>
+        </ion-label>
+      </ion-item>
+      <ion-item button detail="true">
+        <ion-label>
+          <ion-note>收藏目录</ion-note>
         </ion-label>
       </ion-item>
       <ion-item button detail="true">
         <ion-label>
-          <ion-note>收藏</ion-note>
+          <ion-note>浏览记录</ion-note>
         </ion-label>
       </ion-item>
     </ion-list>
-  </ion-card>
+  </ion-card>
+  <!--退出 -->
+  <ion-button expand="block">退出</ion-button>