page-bmi.component.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <ion-header>
  2. <ion-toolbar>
  3. <ion-buttons slot="start">
  4. <ion-button (click)="goBack()" fill="clear">
  5. <ion-icon aria-hidden="true" name="chevron-back-outline" style="color: black; font-size: 24px;"></ion-icon>
  6. </ion-button>
  7. </ion-buttons>
  8. <ion-title>BMI 测试</ion-title>
  9. </ion-toolbar>
  10. </ion-header>
  11. <ion-content>
  12. <!-- 身高体重输入框 -->
  13. <div class="info-section">
  14. <div class="input-row">
  15. <div class="input-group">
  16. <label>身高:</label>
  17. <input type="number" [(ngModel)]="height" placeholder="请输入身高" class="input-box" />
  18. <span class="unit">CM</span>
  19. </div>
  20. </div>
  21. <div class="input-row">
  22. <div class="input-group">
  23. <label>体重:</label>
  24. <input type="number" [(ngModel)]="weight" placeholder="请输入体重" class="input-box" />
  25. <span class="unit">KG</span>
  26. </div>
  27. </div>
  28. </div>
  29. <!-- BMI 输出框 -->
  30. <div class="info-section" *ngIf="bmi !== null">
  31. <div class="input-row">
  32. <div class="input-group">
  33. <label>BMI:</label>
  34. <div class="output-box">{{ bmi | number: '1.1-1' }}</div>
  35. <span class="unit">KG/M<sup>2</sup></span>
  36. </div>
  37. </div>
  38. <!-- BMI 分类提示 -->
  39. <div *ngIf="bmiStatus" class="status-box">
  40. <p>{{ bmiStatus }}</p>
  41. </div>
  42. </div>
  43. <!-- 按钮区 -->
  44. <div class="center-button">
  45. <ion-button fill="clear" class="analysis-button" (click)="calculateBMI()">计算BMI</ion-button>
  46. <ion-button fill="clear" class="analysis-button" (click)="resetForm()">清空</ion-button>
  47. </div>
  48. </ion-content>