202226701011/FitMind-app/src/app/page-ytb/page-ytb.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>腰臀比测试</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)]="hip" 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)]="waist" placeholder="请输入腰围" class="input-box" />
        <span class="unit">CM</span>
      </div>
    </div>
  </div>

  <!-- 腰臀比输出框 -->
  <div class="info-section" *ngIf="whr !== null">
    <div class="output-box">
      <h3>腰臀比</h3>
      <p>{{ whr | number: '1.2-2' }}</p>
    </div>
    <!-- 弹出腰臀比提示 -->
    <div *ngIf="whrStatus" class="status-box">
      <p>{{ whrStatus }}</p>
    </div>
  </div>

  <!-- 按钮区 -->
  <div class="center-button">
    <ion-button fill="clear" class="analysis-button" (click)="calculateWhr()">计算腰臀比</ion-button>
    <ion-button fill="clear" class="analysis-button" (click)="resetForm()">清空</ion-button>
  </div>
</ion-content>