123

FitMind-app/src/app/page-bmi/page-bmi.component.html

@@ -10,49 +10,38 @@
 </ion-header>
 
 <ion-content>
+  <!-- 身高体重输入框 -->
   <div class="info-section">
-    <div class="input-row1">
+    <div class="input-row">
       <div class="input-group">
-        <label class="font1">身高:</label>
-        <input type="number" [(ngModel)]="height" placeholder="" class="input-box" />
+        <label>身高:</label>
+        <input type="number" [(ngModel)]="height" placeholder="请输入身高" class="input-box" />
         <span class="unit">CM</span>
       </div>
-
     </div>
-    
-    <div class="input-row2">
+    <div class="input-row">
       <div class="input-group">
-        <label class="font1">体重:</label>
-        <input type="number" [(ngModel)]="weight" placeholder="" class="input-box" />
+        <label>体重:</label>
+        <input type="number" [(ngModel)]="weight" placeholder="请输入体重" class="input-box" />
         <span class="unit">KG</span>
       </div>
-
     </div>
   </div>
 
+  <!-- BMI输出框 -->
   <div class="info-section">
-    
-    <div class="input-row3">
+    <div class="input-row">
       <div class="input-group">
-        <label class="font1">BMI:</label>
+        <label>BMI:</label>
         <div class="output-box">{{ bmi | number: '1.1-1' }}</div>
         <span class="unit">KG/M<sup>2</sup></span>
       </div>
-
     </div>
   </div>
 
-  <div class="center">
-  <ion-button fill="clear"
-  class="analysis-button" 
-  (click)="calculateBMI()" >
-BMI计算
-</ion-button>
-  
-<ion-button fill="clear"
-class="analysis-button" 
-(click)="resetForm()" >
-清空
-</ion-button>
-</div>
-</ion-content>
+  <!-- 按钮区 -->
+  <div class="center-button">
+    <ion-button fill="clear" class="analysis-button" (click)="calculateBMI()">计算BMI</ion-button>
+    <ion-button fill="clear" class="analysis-button" (click)="resetForm()">清空</ion-button>
+  </div>
+</ion-content>

FitMind-app/src/app/page-bmi/page-bmi.component.scss

@@ -1,99 +1,158 @@
-ion-toolbar{
-width: 100%;
-height: 60px;
-
-display: flex; /* 使用 flexbox 布局 */
-align-items: center;
-justify-content: center;//使内容在水平方向上居中。
-}
+/* 变量定义 */
+$primary-color: #3880ff; // 主色调
+$secondary-color: #f4f4f4; // 辅助色调
+$accent-color: #ff4081; // 强调色
+$font-family: 'Helvetica Neue', Arial, sans-serif;
 
+/* 主样式 */
+ion-header {
+  background-color: $primary-color;
+  color: white;
 
-.info-section {
-    background-color: white; /* 背景色为白色 */
-    padding: 16px;
-    border-radius: 8px; /* 圆角 */
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
-    margin-top: 16px; /* 与导航栏的间距 */
-  }
-  
-  .input-row1 {
-    display: flex; /* 使用 flexbox 布局 */
-    justify-content: space-between; /* 在行内均匀分布 */
+  ion-toolbar {
+    display: flex;
+    justify-content: center;
     align-items: center;
-    margin-bottom: 25px; /* 每一行的间距 */
-    margin-left: 70px;
-  }
 
-  .input-row2{
-    display: flex; /* 使用 flexbox 布局 */
-    justify-content: space-between; /* 在行内均匀分布 */
-    align-items: center;
-    margin-left: 70px;
-  }
-  
-  .input-row3{
-    display: flex; /* 使用 flexbox 布局 */
-    justify-content: space-between; /* 在行内均匀分布 */
-    align-items: center;
-    margin-left: 70px;
+    ion-title {
+      font-size: 24px;
+      font-weight: bold;
+    }
   }
-  .input-group {
+}
+
+ion-content {
+  padding: 16px;
+  background-color: $secondary-color;
+
+  /* 自定义段落样式 */
+  .custom-segment {
     display: flex;
-    align-items: center;
-  }
-  
-  .input-group label {
-    flex: 1; /* 标签占据剩余空间 */
+    justify-content: space-around;
+    margin-bottom: 16px;
+
+    .nav-button {
+      flex: 1;
+      text-align: center;
+      padding: 10px;
+      font-size: 16px;
+      color: $primary-color;
+
+      &.activated {
+        background-color: $primary-color;
+        color: white;
+      }
+    }
   }
-  
-  .input-box {
-    border-radius: 15px; /* 圆角矩形 */
-    border: none; /* 去掉边框 */
-    padding: 8px 12px; /* 内边距 */
-    margin-left: 15px; /* 标签与输入框之间的间距 */
-    background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */
-    width: 90px;
-    height: 45px;
-    font-size: 32px;
+
+  /* 输入框和显示区域 */
+  .info-section {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+
+    .input-row {
+      display: flex;
+      justify-content: center; /* 水平居中 */
+      margin-bottom: 16px;
+
+      .input-group {
+        width: 60%; /* 控制输入框的宽度为60% */
+        max-width: 300px; /* 限制最大宽度 */
+        display: flex;
+        flex-direction: column; /* 垂直排列标签和输入框 */
+        align-items: center; /* 内容居中对齐 */
+
+        label {
+          font-weight: bold;
+          margin-bottom: 4px;
+          display: block;
+          text-align: center; /* 标签居中 */
+        }
+
+        .input-box {
+          width: 100%;
+          padding: 8px;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+        }
+
+        .unit {
+          font-size: 14px;
+          margin-top: 4px;
+        }
+      }
+    }
   }
 
-  .output-box {
-    border-radius: 15px; /* 圆角矩形 */
-    border: none; /* 去掉边框 */
-    padding: 8px 12px; /* 内边距 */
-    margin-left: 19px; /* 标签与输入框之间的间距 */
-    background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */
-    width: 90px;
-    height: 45px;
-    font-size: 32px;
+  /* BMI输出框 */
+  .textarea-section {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+
+    .textarea-input {
+      width: 100%;
+      height: 120px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 8px;
+      resize: none;
+    }
   }
 
-  .unit {
-    margin-left: 10px; /* 输入框与单位之间的间距 */
-    font-size: 27px;
+  /* 按钮 */
+  .analysis-button {
+    width: 100%;
+    margin-top: 16px;
+    background-color: $primary-color;
+    color: white;
+    padding: 12px;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: background-color 0.3s;
+
+    &.generating {
+      background-color: $accent-color;
+    }
+
+    &:hover {
+      background-color: darken($primary-color, 10%);
+    }
   }
-  
 
-  .font1{
-    font-size: 27px;
-    font-weight: bold;
+  /* 内容框 */
+  .bigbox1 {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-top: 16px;
 
+    .content-style {
+      font-size: 16px;
+      line-height: 1.5;
+    }
   }
 
-  .analysis-button {
-    --background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */
-    color: white; /* 文字颜色为白色 */
-    border-radius: 8px; /* 圆角矩形 */
-    margin-top: 16px; /* 与上方区域的距离 */
-    width: 40%; /* 按钮宽度100% */
-    padding: 10px; /* 内边距 */
-    text-align: center; /* 文本居中 */
-    font-size: 20px;
-    font-weight: bold;
+  /* 居中按钮容器 */
+  .center-button {
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: flex-start; /* 垂直居中，但靠上 */
+    width: 100%; /* 父容器宽度占满 */
+    height: 100%; /* 父容器高度占满，确保垂直居中 */
+    text-align: center; /* 按钮文本居中 */
+    padding-top: 40px; /* 增加顶部的间距，确保按钮距离顶部有一定空间 */
   }
 
-  .center{
-    display: flex; /* 使用 flexbox 布局 */
-    justify-content: space-between; /* 在行内均匀分布 */
-    align-items: center;
-  }
+  .center-button ion-button {
+    font-size: 18px; /* 增大字体 */
+    padding: 14px 24px; /* 增大按钮内边距，增大按钮大小 */
+    border-radius: 8px; /* 使按钮角度更加圆润 */
+  }
+}

FitMind-app/src/app/page-bmi/page-bmi.component.ts

@@ -55,7 +55,7 @@ export class PageBmiComponent  implements OnInit {
 
   // 返回上一个页面
   goBack() {
-    this.router.navigate(['/tabs/tab3'], { replaceUrl: true }); // 使用 replaceUrl 强制重载页面
+    this.router.navigate(['/tabs/tab2'], { replaceUrl: true }); // 使用 replaceUrl 强制重载页面
   }
 }
 

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

@@ -103,11 +103,10 @@
   </div>
   
   <!--测试-->
-  <div *ngIf="selectedSegment === 'test'">
-    <ion-button  (click)="goBmipage()">BMI</ion-button>
-
+  <div *ngIf="selectedSegment === 'test'" class="center-button">
+    <ion-button (click)="goBmipage()">测测你的BMI</ion-button>
   </div>
-
+  
 
 
 

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

@@ -150,4 +150,18 @@ ion-content {
       line-height: 1.5;
     }
   }
-}
+}.center-button {
+  display: flex; /* 使用 Flexbox 布局 */
+  justify-content: center; /* 水平居中 */
+  align-items: flex-start; /* 垂直居中，但靠上 */
+  width: 100%; /* 父容器宽度占满 */
+  height: 100%; /* 父容器高度占满，确保垂直居中 */
+  text-align: center; /* 按钮文本居中 */
+  padding-top: 40px; /* 增加顶部的间距，确保按钮距离顶部有一定空间 */
+}
+
+.center-button ion-button {
+  font-size: 18px; /* 增大字体 */
+  padding: 14px 24px; /* 增大按钮内边距，增大按钮大小 */
+  border-radius: 8px; /* 使按钮角度更加圆润 */
+}