new sw

mcbridge-app/package-lock.json

@@ -25,6 +25,7 @@
         "fmode-ng": "^0.0.63",
         "ionicons": "^7.2.1",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.15",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -17438,6 +17439,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.15.tgz",
+      "integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "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",

mcbridge-app/package.json

@@ -30,6 +30,7 @@
     "fmode-ng": "^0.0.63",
     "ionicons": "^7.2.1",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.15",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

mcbridge-app/src/app/tab1/tab1.page.html

@@ -1,27 +1,39 @@
 <ion-header [translucent]="true">  
   <ion-toolbar>  
     <ion-title>  
-      医护云桥  
+      医护云桥APP 
     </ion-title>  
   </ion-toolbar>  
 </ion-header>  
 
 <ion-content [fullscreen]="true">  
-  <ion-header collapse="condense">  
-    <ion-toolbar>  
-      <ion-title size="large">医护云桥</ion-title>  
-    </ion-toolbar>  
-  </ion-header>  
-
   <!-- 添加搜索框 -->  
   <ion-searchbar placeholder="搜索..." (ionInput)="search($event)"></ion-searchbar>  
 
+     <!-- 轮播图区域 -->
+     <div class="carousel-container">
+      <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
+        <div class="slide" *ngFor="let image of images">
+          <img [src]="image" alt="轮播图">
+        </div>
+      </div>
+    
+      <button class="prev" (click)="prevSlide()">&#10094;</button>
+      <button class="next" (click)="nextSlide()">&#10095;</button>
+    
+      <div class="dots">
+        <span class="dot" *ngFor="let image of images; let i = index" 
+              [class.active]="i === currentSlide" 
+              (click)="goToSlide(i)"></span>
+      </div>
+    </div>
+
   <!-- 按钮容器 -->
   <div class="button-container">
-    <ion-button  size="large" (click)="goToPage1()">
+    <ion-button  size="large" color="light" (click)="goToPage1()">
       智能诊疗
     </ion-button>
-    <ion-button  size="large" (click)="goToPage2()">
+    <ion-button  size="large" color="light" (click)="goToPage2()">
       相似症状图查询
     </ion-button>
   </div>

mcbridge-app/src/app/tab1/tab1.page.scss

@@ -2,7 +2,7 @@ ion-searchbar {
     --background: #f8f9fa;  
     --border-radius: 8px;  
     --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
-    margin: 16px;  
+    margin: 16px 30px 16px 0px;  
     padding: 0 16px;  
     height: 50px;  
   }  
@@ -38,4 +38,67 @@ ion-searchbar {
     margin: 0 5px; /* 按钮之间的间距 */
     color: #f8f9fa;
     background-color: #f9faf8;
-  }
+  }
+
+// 轮播图区域
+.carousel-container {
+  position: relative;
+  max-width: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.carousel {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+  min-width: 100%;
+}
+
+.slide img {
+  width: 100%;
+  height: auto;
+}
+
+.prev, .next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 16px;
+  border: none;
+  cursor: pointer;
+}
+
+.prev {
+  left: 0;
+}
+
+.next {
+  right: 0;
+}
+
+.dots {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+
+.dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 5px;
+  background: #bbb;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.dot.active {
+  background: #717171;
+} 

mcbridge-app/src/app/tab1/tab1.page.ts

@@ -5,7 +5,11 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
 import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
 import { Router } from '@angular/router';
 import { IonButton } from '@ionic/angular/standalone';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { bagAddOutline, imagesOutline } from 'ionicons/icons';
 
+addIcons({ bagAddOutline, imagesOutline}) 
 @Component({  
   selector: 'app-tab1',  
   templateUrl: 'tab1.page.html',  
@@ -16,12 +20,48 @@ import { IonButton } from '@ionic/angular/standalone';
     IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar,   
     IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent,   
     IonItem, IonLabel, IonList, IonFooter, ExploreContainerComponent ,
-    EditRatingStarComponent, IonButton
+    EditRatingStarComponent, IonButton, IonIcon
   ],  
 })  
 export class Tab1Page {
    constructor(private router: Router) {} 
 
+   /**
+  * 轮播图
+  */
+  images = [
+    'https://tse4-mm.cn.bing.net/th/id/OIP-C.ftxfzO1D7K0DPPP4JyNLZgHaE7?w=284&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7',
+    'https://tse1-mm.cn.bing.net/th/id/OIP-C.X4C6ZFTyBCDkb9-aen-XEAHaE7?w=288&h=191&c=7&r=0&o=5&dpr=1.5&pid=1.7',
+    'https://tse1-mm.cn.bing.net/th/id/OIP-C.nYsEpi5tMgJ1toyq77tzFwHaE8?w=296&h=197&c=7&r=0&o=5&dpr=1.5&pid=1.7',
+  ];
+  currentSlide = 0;
+  intervalId: any;
+  setSlidePosition() {
+    // 这里不需要额外的逻辑，因为在 HTML 中已经通过绑定实现
+  }
+
+  nextSlide() {
+    this.currentSlide = (this.currentSlide + 1) % this.images.length;
+  }
+
+  prevSlide() {
+    this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
+  }
+
+  goToSlide(index: number) {
+    this.currentSlide = index;
+  }
+
+  startAutoSlide() {
+    this.intervalId = setInterval(() => this.nextSlide(), 3000);
+  }
+  ngOnDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+
   goToPage1(){
     this.router.navigate(['/tabs/picture'])
   }

mcbridge-app/src/app/tab2/tab2.page.html

@@ -1,78 +1,31 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      任务集执行展示
+      专家咨询
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
- <ion-button (click)="doPoemTask()">执行诗文意境绘制任务集</ion-button>
- <ion-button (click)="doInqueryTask()">执行问诊任务集</ion-button>
-  <ion-button (click)="testJSON()">测试JSON</ion-button>
 
-
- <ul>
-  @for(step of taskList;track step.title;){
-    <div>
-      <!-- 待开始 -->
-      @if(step.progress==0 && !step.error){
-        <ion-icon name="radio-button-off-outline"></ion-icon>
-      }
-      <!-- 进行中 -->
-      @if(step.progress!=0 && step.progress!=1){
-        <ion-icon name="reload-outline"></ion-icon>
-      }
-      <!-- 已完成 -->
-      @if(step.progress==1){
-        <ion-icon name="checkmark-circle-outline"></ion-icon>
-      }
-      <!-- 已出错 -->
-      @if(step.error){
-        <ion-icon name="close-circle-outline"></ion-icon>
-      }
-      {{step.title}}  @if(step.progress){<span>{{step.progress * 100 | number:"2.0-0"}}%</span>}
-
-      @if(step.error){
-        <span style="color:red;">{{step.error}}</span>
-      }
-    </div>   
-  }
-  </ul>
-
-  <!-- 诗词意境绘画生成结果 -->
-  @if(shareData.images) {
-    @for(imageUrl of shareData.images;track imageUrl){
-      <img [src]="imageUrl" alt="" srcset="">
-    }
-  }
-
-  <!-- 问诊报告生成结果 -->
-  @if(shareData.diagResult){
-    <h1>{{shareData.diagResult.title}}</h1>
-    <h2>{{shareData.diagResult.desc}}</h2>
-    <p>{{shareData.diagResult.content}}</p>
-  }
-
-</ion-content>
-
-<ion-card>
-  <ion-card-header>
-    <ion-card-title>其他医生</ion-card-title>
-    <ion-card-subtitle>医生简介</ion-card-subtitle>
-  </ion-card-header>
-  <ion-card-content>
-    <ion-list>
-      <ion-item *ngFor="let doctor of doctorList" lines="none">
-        <ion-thumbnail slot="start">
-          <img [src]="doctor.get('avatar')" [alt]="doctor.get('name')" />
-        </ion-thumbnail>
-        <div class="doctor-info">
-          <h3>{{ doctor.get('name') }}({{ doctor.get('age') }}岁)</h3>
-          <p>{{ doctor.get('title') }},{{ doctor.get('depart')?.name }}</p>
-          <p>飞码互联网医院</p>
-        </div>
-      </ion-item>
-    </ion-list>
-  </ion-card-content>
-</ion-card>
+<ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>专家医生</ion-card-title>
+      <ion-card-subtitle>医生简介</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let doctor of doctorList" lines="none" class="doctor-item">
+          <ion-thumbnail slot="start">
+            <img [src]="doctor.get('avatar')" [alt]="doctor.get('name')" />
+          </ion-thumbnail>
+          <div class="doctor-info">
+            <h3>{{ doctor.get('name') }} ({{ doctor.get('age') }}岁)</h3>
+            <p>{{ doctor.get('title') }}, {{ doctor.get('depart')?.name }}</p>
+            <p>飞码互联网医院</p>
+          </div>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

mcbridge-app/src/app/tab2/tab2.page.scss

@@ -0,0 +1,23 @@
+.doctor-item {
+    display: flex;
+    align-items: center;
+    // padding: 15px; /* 增加内边距 */
+    margin-bottom: 10px; /* 增加每个医生项之间的间距 */
+    border: 1px solid #e0e0e0; /* 添加边框 */
+    border-radius: 8px; /* 圆角边框 */
+    background-color: #f9f9f9; /* 背景颜色 */
+  }
+
+  .doctor-item ion-thumbnail {
+    margin-right: 15px; /* 增加缩略图和文本之间的间距 */
+  }
+
+  .doctor-info h3 {
+    margin: 0; /* 去掉默认的外边距 */
+    font-size: 1.2em; /* 调整字体大小 */
+  }
+
+  .doctor-info p {
+    margin: 5px 0; /* 增加段落之间的间距 */
+    color: #666; /* 调整字体颜色 */
+  }

mcbridge-app/src/app/tab3/tab3.page.html

@@ -1,3 +1,23 @@
+<!-- <ion-menu contentId="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu Content</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">This is the menu content.</ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-menu-button></ion-menu-button>
+      </ion-buttons>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
+</div> -->
+
 <ion-content>
   <div class="profile-container">
     <div class="user-info">
@@ -19,9 +39,9 @@
           <h2>{{currentUser?.get("username")}}</h2>
           <p>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</p>
         </div>
-        <div class="auth-text">
+        <!-- <div class="auth-text">
           <span class="edituser" (click)="editUser()">编辑资料</span>
-        </div>   
+        </div>    -->
     }
     </div>
 
@@ -48,19 +68,25 @@
 
     <!-- 医生关注 -->
       <ion-card-header>
-        <ion-card-title>医生关注</ion-card-title>
+        <ion-card-title>关注的医生</ion-card-title>
       </ion-card-header>
       <ion-card-content>
+        @if(!currentUser?.id){
+          请登录后查看...
+        }
+        @if(currentUser?.id){
         <ion-list>
-          <ion-item>
-            <ion-label>医生姓名 1</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
-          </ion-item>
-          <ion-item>
-            <ion-label>医生姓名 2</ion-label>
-            <ion-icon slot="end" name="chevron-forward"></ion-icon>
+          <ion-item *ngFor="let expert of expertList" lines="none">
+            <ion-thumbnail slot="start">
+              <img [src]="expert.get('avatar')" [alt]="expert.get('name')" />
+            </ion-thumbnail>
+            <div class="doctor-info">
+              <h3>{{ expert.get('name') }}({{ expert.get('age') }}岁)</h3>
+              <p>{{ expert.get('title') }},{{ expert.get('depart') }}</p>
+            </div>
           </ion-item>
         </ion-list>
+      }
       </ion-card-content>
 
     <!-- 常用服务 -->
@@ -83,9 +109,47 @@
           </ion-item>
         </ion-list>
       </ion-card-content>
+
+      <ion-card-content>
+        <ion-list>
+          @if(!currentUser?.id){          
+          <ion-item button id="err">
+            <ion-label>个人信息</ion-label>
+            <ion-icon slot="end" name="chevron-forward"></ion-icon>
+            <ion-alert
+            trigger="err"
+            header="注意"
+            message="你还未登录，请先登录！"
+            [buttons]="alertButtons"
+          ></ion-alert>
+          </ion-item>
+        }
+        @if(currentUser?.id){
+          <ion-item button (click)="editUser()">
+            <ion-label>个人信息</ion-label>
+            <ion-icon slot="end" name="chevron-forward"></ion-icon>
+          </ion-item>
+        }
+          <ion-item button routerLink="/we">
+            <ion-label>关于我们</ion-label>
+            <ion-icon slot="end" name="chevron-forward"></ion-icon>
+          </ion-item>
+          <ion-item button routerLink="/fankui">
+            <ion-label>帮助与反馈</ion-label>
+            <ion-icon slot="end" name="chevron-forward"></ion-icon>
+          </ion-item>
+          <ion-item button routerLink="/shezhi">
+            <ion-label>设置</ion-label>
+            <ion-icon slot="end" name="chevron-forward"></ion-icon>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+
   </div>
+
+
 </ion-content>
 
-@if(currentUser?.id){
+    @if(currentUser?.id){
   <ion-button  (click)="logout()" color="light">登出</ion-button>
-}
+}

mcbridge-app/src/app/tab3/tab3.page.ts

@@ -5,11 +5,15 @@ import { IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonIcon, IonItem,
 import { IonButtons } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { calendarOutline, chatbubbleEllipsesOutline, chatbubbleOutline, documentTextOutline, personOutline, settingsOutline } from 'ionicons/icons';
-import { CloudUser } from 'src/lib/ncloud';
+import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 import { ModalController } from '@ionic/angular/standalone';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
 import { IonMenu, IonMenuButton } from '@ionic/angular/standalone';
+import { IonThumbnail } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { IonModal } from '@ionic/angular/standalone';
+import { IonAlert } from '@ionic/angular/standalone';
 
 addIcons({ settingsOutline, chatbubbleEllipsesOutline, documentTextOutline, calendarOutline, chatbubbleOutline, personOutline}) 
 
@@ -20,10 +24,15 @@ addIcons({ settingsOutline, chatbubbleEllipsesOutline, documentTextOutline, cale
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
     IonButtons, IonIcon, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonList, IonItem, IonLabel,IonButton,
-    IonMenu, IonMenuButton
+    IonMenu, IonMenuButton,
+    IonThumbnail, CommonModule,
+    IonModal, IonAlert
   ],
 })
 export class Tab3Page {
+
+  alertButtons = ['Action'];
+
   currentUser:CloudUser|undefined
   constructor(private modalCtrl:ModalController) {
     this.currentUser = new CloudUser();
@@ -65,4 +74,19 @@ export class Tab3Page {
   //console.log("setTagsValue",ev);
   this.editTags=ev;
 }
+
+  ngOnInit() {
+    // 生命周期：页面加载后，运行专家列表加载函数
+    this.loadExpertList()
+  }
+
+  // 创建用于数据列表存储的属性
+  expertList:Array<CloudObject> = []
+  // 查询并加载医生列表的函数
+  async loadExpertList(){
+    let query = new CloudQuery("Expect");
+    this.expertList = await query.find()
+    console.log(this.expertList)
+  }
+
 }

mcbridge-app/src/app/test-page/test-page.page.html

@@ -1,13 +1,69 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>test-page</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-menu contentId="main-content">
+  <ion-header>
     <ion-toolbar>
-      <ion-title size="large">test-page</ion-title>
+      <ion-title>Menu Content</ion-title>
     </ion-toolbar>
   </ion-header>
-</ion-content>
+  <ion-content class="ion-padding">This is the menu content.</ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-menu-button></ion-menu-button>
+      </ion-buttons>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
+</div>
+
+<!-- <ion-content [fullscreen]="true">
+  <ion-button (click)="doPoemTask()">执行诗文意境绘制任务集</ion-button>
+  <ion-button (click)="doInqueryTask()">执行问诊任务集</ion-button>
+   <ion-button (click)="testJSON()">测试JSON</ion-button>
+ 
+ 
+  <ul>
+   @for(step of taskList;track step.title;){
+     <div> -->
+       <!-- 待开始 -->
+       <!-- @if(step.progress==0 && !step.error){
+         <ion-icon name="radio-button-off-outline"></ion-icon>
+       } -->
+       <!-- 进行中 -->
+       <!-- @if(step.progress!=0 && step.progress!=1){
+         <ion-icon name="reload-outline"></ion-icon>
+       } -->
+       <!-- 已完成 -->
+       <!-- @if(step.progress==1){
+         <ion-icon name="checkmark-circle-outline"></ion-icon>
+       } -->
+       <!-- 已出错 -->
+       <!-- @if(step.error){
+         <ion-icon name="close-circle-outline"></ion-icon>
+       }
+       {{step.title}}  @if(step.progress){<span>{{step.progress * 100 | number:"2.0-0"}}%</span>}
+ 
+       @if(step.error){
+         <span style="color:red;">{{step.error}}</span>
+       }
+     </div>   
+   }
+   </ul> -->
+ 
+   <!-- 诗词意境绘画生成结果 -->
+   <!-- @if(shareData.images) {
+     @for(imageUrl of shareData.images;track imageUrl){
+       <img [src]="imageUrl" alt="" srcset="">
+     }
+   } -->
+ 
+   <!-- 问诊报告生成结果 -->
+   <!-- @if(shareData.diagResult){
+     <h1>{{shareData.diagResult.title}}</h1>
+     <h2>{{shareData.diagResult.desc}}</h2>
+     <p>{{shareData.diagResult.content}}</p>
+   }
+ 
+ </ion-content> -->

mcbridge-app/src/app/test-page/test-page.page.scss

@@ -0,0 +1,62 @@
+
+
+.profile-container {
+    padding: 16px;
+  }
+  
+  .user-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+  
+  .avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    margin-right: 16px;
+  }
+  
+  .auth-text {
+    text-align: center; /* 中间对齐 */
+    margin-left: 16px; /* 与用户信息之间的间距 */
+  }
+
+  .auth-text span{
+    color: blue;
+  }
+
+  ion-card-title {
+    margin: 0px 0;
+    font-size: 20px;
+  }
+  
+  ion-item {
+    --background: transparent; /* 使按钮背景透明 */
+    --box-shadow: none; /* 去掉卡片阴影 */
+  }
+
+  /* 设置顶部工具栏的背景颜色为白色 */
+ion-toolbar {
+    --background: transparent;
+    --color: black; /* 设置文字颜色为黑色 */
+  }
+
+  /* 按钮行样式 */
+.button-row {
+    display: flex;
+    justify-content: space-between; /* 按钮均匀分布 */
+    flex-wrap: wrap; /* 允许换行 */
+  }
+  
+  .button-row ion-button {
+    flex: 1; /* 使按钮均匀分布 */
+    margin: 4px; /* 按钮之间的间距 */
+  }
+
+
+  /* 鼠标按下效果 */
+  .button-row ion-button:active {
+    transform: scale(0.95); /* 按钮缩小 */
+    background-color: gray; /* 按下时背景颜色设为灰色 */
+  }

mcbridge-app/src/app/test-page/test-page.page.ts

@@ -2,13 +2,18 @@ import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonButtons, IonMenu, IonMenuButton } from '@ionic/angular/standalone';
+import { IonCard } from '@ionic/angular/standalone';
+import { IonCardContent } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-test-page',
   templateUrl: './test-page.page.html',
   styleUrls: ['./test-page.page.scss'],
   standalone: true,
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule,
+    IonMenu, IonButtons, IonMenuButton, IonCard, IonCardContent
+  ]
 })
 export class TestPagePage implements OnInit {