123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <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>
|