update

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

@@ -1,51 +1,47 @@
-<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>
+  <div class="search-container">
+    <ion-searchbar placeholder="211减肥法" class="search-input"></ion-searchbar>
+    <ion-icon name="filter-circle" slot="end" class="search-icon"></ion-icon>  
+  </div> 
+  <ion-card class="planList">
     <ion-card-content>
+      <div>
+        <h4>制定新的计划</h4>
+        <ion-button shape="round">
+          <ion-icon slot="icon-only" name="arrow-up"></ion-icon>
+        </ion-button>
+      </div>
+      
       <ion-item>
-        <ion-label position="floating">睡眠时长</ion-label>
-        <ion-input type="number" placeholder="请输入睡眠时长"></ion-input>
+        <ion-label>
+          <h5>睡眠时长<span>/小时</span></h5>
+          <ion-input type="number" placeholder="请输入睡眠时长"></ion-input>
+        </ion-label>
       </ion-item>
+
       <ion-item>
-        <ion-label position="floating">运动步数</ion-label>
-        <ion-input type="number" placeholder="请输入运动步数"></ion-input>
+        <ion-label>
+          <h5>运动步数<span>/步</span></h5>
+          <ion-input type="number" placeholder="请输入运动步数"></ion-input>
+        </ion-label>
       </ion-item>
+
+
       <ion-item>
-        <ion-label position="floating">摄入热量</ion-label>
-        <ion-input type="number" placeholder="请输入摄入热量"></ion-input>
+        <ion-label>
+          <h5>摄入热量<span>/卡</span></h5>
+          <ion-input type="number" placeholder="请输入摄入热量"></ion-input>
+        </ion-label>        
       </ion-item>
+
       <ion-item>
-        <ion-label position="floating">体重变化</ion-label>
-        <ion-input type="number" placeholder="请输入体重变化"></ion-input>
+        <ion-label>
+          <h5>体重变化<span>/kg</span></h5>
+          <ion-input type="number" placeholder="请输入体重变化"></ion-input>
+        </ion-label>           
       </ion-item>
+
     </ion-card-content>
   </ion-card>
 </ion-content>

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

@@ -1,34 +1,51 @@
-.swiper-container {
-    width: 100%;
-    height: 300px;
+.search-container {  
+    display: flex;  
+    align-items: center; 
+    position: relative;
+    padding: 20px;
+    .search-input {
+        flex: 1; 
+        padding-left: 20px; 
+        padding-right: 20px;
+    }
+    .search-icon {  
+        font-size: 35px; 
+        color: #003ccf;
+      }  
   }
-  
-  .swiper-slide {
-    text-align: center;
-    font-size: 18px;
+  .planList {
+    margin:25px;
+    margin-top: 5px;
+    padding: 10px;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    ion-card-content {
+        flex: 1;
+        h4 {
+            margin: 0px;
+            font-size: 20px;
+            font-weight: bold;
+            color: black;
+            padding: 10px;
+        }
+        ion-item {
+            display: flex;
+            margin-top: 10px;
+            ion-label {
+                margin: 0px;
+                h5 {
+                    margin: 0px;
+                    font-size: 18px;
+                    font-weight: bold;
+                    color: black;
+                    span {
+                        font-size: medium;
+                        font-weight: normal;
+                    }
+                }
+            }
+
+        }
+        
   }
-  
-  .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/plan/plan.page.ts

@@ -7,19 +7,7 @@ import Swiper from 'swiper';
   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)
-  }
+export class PlanPage {
   constructor(public alertController: AlertController) {}
   async addPlan() {
     const alert = await this.alertController.create({