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

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="goBack()" fill="clear">
        <ion-icon aria-hidden="true" name="chevron-back-outline" style="color: black; font-size: 24px;"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>BMI 测试</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 身高体重输入框 -->
  <div class="info-section">
    <div class="input-row">
      <div class="input-group">
        <label>身高:</label>
        <input type="number" [(ngModel)]="height" placeholder="请输入身高" class="input-box" />
        <span class="unit">CM</span>
      </div>
    </div>
    <div class="input-row">
      <div class="input-group">
        <label>体重:</label>
        <input type="number" [(ngModel)]="weight" placeholder="请输入体重" class="input-box" />
        <span class="unit">KG</span>
      </div>
    </div>
  </div>

  <!-- BMI 输出框 -->
  <div class="info-section" *ngIf="bmi !== null">
    <div class="input-row">
      <div class="input-group">
        <label>BMI:</label>
        <div class="output-box">{{ bmi | number: '1.1-1' }}</div>
        <span class="unit">KG/M<sup>2</sup></span>
      </div>
    </div>
    <!-- BMI 分类提示 -->
    <div *ngIf="bmiStatus" class="status-box">
      <p>{{ bmiStatus }}</p>
    </div>
  </div>

  <!-- 按钮区 -->
  <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>