update

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

@@ -1,35 +1,124 @@
+<ion-content>
+  <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> 
+  <div class="appslabel">
+    <ion-grid>
+      <ion-row>
+        <ion-col size="3">
+          <ion-button fill="clear">
+            <img src="../../assets/icon/ideals.png">
+          </ion-button>
+          <p>减肥方法</p>
+        </ion-col>
+        <ion-col size="3">
+          <ion-button fill="clear">
+            <img src="../../assets/icon/activity.png">
+          </ion-button>
+          <p>活动中心</p>
+        </ion-col>
+        <ion-col size="3">
+          <ion-button fill="clear">
+            <img src="../../assets/icon/book.png">
+          </ion-button>
+          <p>查食谱</p>
+        </ion-col>
+        <ion-col size="3">
+          <ion-button fill="clear">
+            <img src="../../assets/icon/forward.png">
+          </ion-button>
+          <p>食物排行榜</p>
+        </ion-col>
+      </ion-row>
+    </ion-grid>  
+  </div>
+  
+  <div class="community">
+    <ion-grid>
 
-  <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>
+      <ion-row>
+        <h4>社区动态</h4>
+      </ion-row>
+
+      <ion-row>
+          <ion-card>
+            <ion-card-content>
+              <ion-grid>
+
+                <ion-row class="title">
+                  <ion-col size="3">
+                    <img src="../../assets/icon/smile.png">
+                  </ion-col>
+                  <ion-col class="username" size="3">
+                    <h4>张三</h4>
+                  </ion-col>                 
+                </ion-row>
+
+                <ion-row class="usertext">
+                  <p>小体重减脂减重阶段，自己动手做健康美味的减脂餐，互相交流监督呀！</p>
+                </ion-row>
+
+                <ion-row>
+                  <ion-col size="3">
+                    <img src="../../assets/icon/book.png">
+                  </ion-col>
+                  <ion-col size="3">
+                    <img src="../../assets/icon/book.png">
+                  </ion-col>
+                  <ion-col size="3">
+                    <img src="../../assets/icon/book.png">
+                  </ion-col>
+                  <ion-col size="3">
+                    <img src="../../assets/icon/book.png">
+                  </ion-col>
+                </ion-row>
+                                              
+              </ion-grid>
+            </ion-card-content>
+          </ion-card>
+      </ion-row>
+      
+      <ion-row>
+        <ion-card>
+          <ion-card-content>
+            <ion-grid>
+
+              <ion-row class="title">
+                <ion-col size="3">
+                  <img src="../../assets/icon/smile.png">
+                </ion-col>
+                <ion-col class="username" size="3">
+                  <h4>张三</h4>
+                </ion-col>                 
+              </ion-row>
+
+              <ion-row class="usertext">
+                <p>小体重减脂减重阶段，自己动手做健康美味的减脂餐，互相交流监督呀！</p>
+              </ion-row>
+
+              <ion-row>
+                <ion-col size="3">
+                  <img src="../../assets/icon/book.png">
+                </ion-col>
+                <ion-col size="3">
+                  <img src="../../assets/icon/book.png">
+                </ion-col>
+                <ion-col size="3">
+                  <img src="../../assets/icon/book.png">
+                </ion-col>
+                <ion-col size="3">
+                  <img src="../../assets/icon/book.png">
+                </ion-col>
+              </ion-row>
+                                            
+            </ion-grid>
+          </ion-card-content>
+        </ion-card>
+      </ion-row>
+
+    </ion-grid>
+  </div>     
+</ion-content>
 
 

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

@@ -1,28 +1,81 @@
-ion-title {
-    color: #003cff;
-    font-size: large;
-    font-weight: bold;
+.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: #0054e9;
+      }  
+  }
+.appslabel {
+    display: flex;
+    ion-col {
+        ion-button {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 0;
+            margin: 0px;
+            max-height: 100px;
+        }
+        p {
+            font-size: small;
+            text-align: center;
+            margin: 0px;
+        }
+    }    
 }
-ion-searchbar {
-    width: 390px;
-    height: 70px;
+.community {
+    display: flex;
+    margin-top: 0px;
+    h4 {
+        margin-left: 20px;
+        margin-bottom: 0px;
+        font-weight: bold;
+    }
+    ion-card {
+        border-radius: 20px;
+        margin-bottom: 5px;
+        background-color: #ffecd1;
+    }
+    ion-card-content {
+        padding-top: 0px;
+        padding-bottom: 5px;
+        .title {
+            display: flex;
+            align-items: center;
+            max-height: 70px;
+            margin-bottom: 10px;
+            .username {
+                display: flex;
+                align-items: center;
+                h4 {
+                    font-size: 18px;
+                    font-weight: bold;
+                    margin-left: 10px;
+                    color: #000;
+                }
+            }
+        }
+        .usertext {
+            display: flex;
+            p {
+                font-size: 18px;
+                color: #000;
+            }
+        }
+
+    }
+    
+    
+
+
 }
-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/home/home.page.html

@@ -57,6 +57,7 @@
           <h4>睡眠记录</h4>
           <ion-icon name="moon"></ion-icon>
           <p>睡眠时长: <span>{{ sleepData.sleepHours }}</span>小时</p>
+          <p>深度睡眠：<span>24</span>小时</p>
         </ion-card-content>
       </ion-card>
     </ion-col>

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

@@ -11,12 +11,12 @@
 }  
   
 .search-icon {  
-  font-size: 30px; 
-  color: #003ccf;
+  font-size: 35px; 
+  color: #0054e9;
 }
 ion-card {
     margin-top: 0px;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
     border-radius: 20px;
     margin-left: 0px;
     margin-right: 0px;
@@ -46,7 +46,7 @@ ion-card {
     font-size: 40px; 
     margin-right: 5px; 
     flex: 0 0 auto; 
-    color: #003ccf; 
+    color: #0054e9; 
   }
 }
 .sportData {

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

@@ -1,37 +0,0 @@
-<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/plan/plan.page.html

@@ -6,7 +6,7 @@
   </div> 
   <ion-card class="planList">
     <ion-card-content>
-      <div>
+      <div class="header">
         <h4>制定新的计划</h4>
         <ion-button shape="round">
           <ion-icon slot="icon-only" name="arrow-up"></ion-icon>

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

@@ -10,22 +10,34 @@
     }
     .search-icon {  
         font-size: 35px; 
-        color: #003ccf;
+        color: #0054e9;
       }  
   }
   .planList {
+    border-radius: 20px;
     margin:25px;
     margin-top: 5px;
     padding: 10px;
     display: flex;
     ion-card-content {
         flex: 1;
-        h4 {
-            margin: 0px;
-            font-size: 20px;
-            font-weight: bold;
-            color: black;
-            padding: 10px;
+        .header {
+            display: flex;  
+            align-items: center; 
+            position: relative; 
+            h4 {
+                margin: 0px;
+                margin-right: 40px;
+                font-size: 20px;
+                font-weight: bold;
+                color: black;
+                padding: 5px;
+            }
+            ion-button {
+                font-size: 15px;
+                margin-left: 80px;            
+            }
+
         }
         ion-item {
             display: flex;