test/tab1.page.html

<ion-header [translucent]="true">
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-searchbar placeholder="搜索"></ion-searchbar>
    </ion-toolbar>
  </ion-header>
    
  <!-- 方框 -->
  <ion-card (click)="openModal()">
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col size="3">
            <div class="info-box">初始</div>
            <div class="info-value">--KG</div>
          </ion-col>
          <ion-col size="3">
            <div class="info-box">当前</div>
            <div class="info-value">--KG</div>
          </ion-col>
          <ion-col size="3">
            <div class="info-box">目标</div>
            <div class="info-value">--KG</div>
          </ion-col>
          <ion-col size="3">
            <div class="info-box">赏金</div>
            <div class="info-value">--元</div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

  <!-- 3D效果的圆 -->
  <div class="wave-container">
    <div class="wave-circle">
      <div class="wave">
        <div class="wave-inner"></div>
      </div>
    </div>
  </div>

  <!-- 每日小习惯 -->
  <div class="daily-habit">
    <div class="daily-habit-line"></div>
    <div class="daily-habit-text">每日小习惯</div>
  </div>

  
   <!-- 大方框 -->
  <ion-card>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col size="3">
            <button class="habit-button" (click)="toggleButtonColor('运动')">
              <ion-icon name="dumbbell"></ion-icon>
              <div class="habit-label">运动</div>
            </button>
          </ion-col>
          <ion-col size="3">
            <ion-button shape="round" class="habit-button" (click)="toggleButtonColor('少吃')">
              <ion-icon name="nutrition"></ion-icon>
              <div>少吃</div>
            </ion-button>
          </ion-col>
          <ion-col size="3">
            <ion-button shape="round" class="habit-button" (click)="toggleButtonColor('喝水')">
              <ion-icon name="water"></ion-icon>
              <div>喝水</div>
            </ion-button>
          </ion-col>
          <ion-col size="3">
            <ion-button shape="round" class="habit-button" (click)="toggleButtonColor('吃蔬菜')">
              <ion-icon name="leaf"></ion-icon>
              <div>吃蔬菜</div>
            </ion-button>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="3">
            <ion-button shape="round" class="habit-button" (click)="toggleButtonColor('水果')">
              <ion-icon name="apple"></ion-icon>
              <div>水果</div>
            </ion-button>
          </ion-col>
          <ion-col size="3">
            <ion-button shape="round" class="habit-button" (click)="toggleButtonColor('经常站立')">
              <ion-icon name="walk"></ion-icon>
              <div>经常站立</div>
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
</ion-content>