src/app/app-routing.module.ts

@@ -19,8 +19,6 @@ const routes: Routes = [
     path: "tree",
     loadChildren: () => import('../modules/tab/tree/tree.module').then(m => m.TreePageModule)
   },
-
-
 ];
 @NgModule({
   imports: [

src/app/tab1/tab1.page.html

@@ -49,59 +49,23 @@
 
 
   <!-- 每日小习惯 -->
-  <div class="daily-habit">
-    <div class="daily-habit-line"></div>
-    <div class="daily-habit-text">每日小习惯</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>
+   <!-- 每日小习惯按钮 -->
+   <div class="button-container">
+    <ion-button *ngFor="let button of buttons; let i = index" (click)="onButtonClick(i)" [color]="button.color" class="custom-button">
+      <ion-icon [name]="button.icon"></ion-icon>
+      <p>{{ button.text }}</p>
+    </ion-button>
+  </div>
+  <div class="habit-text-div">
+      <p class="habit-text centered" [ngClass]="{'success-text': allButtonsSuccess, 'failure-text': anyButtonFailure}">{{ habitText }}</p>
+  </div>
+
 </ion-content>
   
 

src/app/tab1/tab1.page.scss

@@ -100,39 +100,75 @@ ion-searchbar {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 0.8em;
-  margin: 10px 0;
-  background-color: #fff;
-  border: 2px solid #000;
-  border-radius: 50%;
-  transition: background-color 0.3s;
+  cursor: pointer;
+  transition: transform 0.3s ease-in-out;
+  color: #ffffff;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }
 
-.habit-button ion-icon {
-  font-size: 1.5em;
-}
+/* @keyframes wave {
+  0% {
+    transform: translateX(-50%) translateY(-50%) rotate(0deg);
+  }
+  100% {
+    transform: translateX(-50%) translateY(-50%) rotate(360deg);
+  }
+} */
 
-.habit-label {
-  text-align: center;
-  font-size: 0.8em;
-  color: #666;
-  margin-top: 5px;
-}
 
-.habit-button.blue {
-  background-color: #007bff; /* 蓝色背景 */
-}
 
-.habit-button.white {
-  background-color: #fff; /* 白色背景 */
+//每日习惯css
+.button-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .custom-button {
+    margin: 10px;
+    width: calc(33.33% - 20px);
+    border-radius: 20px;
+  }
+
+  ion-icon {
+    margin-bottom: 10px; // 调整图标与文字之间的间距
+  }
+
+  p {
+    text-align: center;
+    font-weight: bold;
+    display: flex;
+    justify-content: center; // 水平居中
+    align-items: center; // 垂直居中
+    flex-wrap: wrap; // 允许文字换行
+    line-height: 1; // 保持文字垂直居中
+  }
 }
 
-// .habit-button div {
-//   font-size: 0.8em;
-//   margin-top: 5px;
-// }
 
-.habit-button:active {
-  transform: scale(0.9);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  .success-text {
+    color: #32db64; // 荧光绿
+  }
+
+  .failure-text {
+    color: #ff4d4f; // 荧光红
+  }
+
+
+.habit-text {
+  margin-left: 10px;
+  text-align: center;
+  margin-top: 20px;
+  font-weight: bold;
+  height: 50px; // 设置固定高度以垂直居中
+
+  &.centered {
+    
+    justify-content: right; // 水平居中
+    align-items: center; // 垂直居中
+  }
 }
+.daily-habit{
+  margin-left: 10px;
+}

src/app/tab1/tab1.page.ts

@@ -160,6 +160,55 @@ export class Tab1Page implements OnInit,OnDestroy {
     this.blueColor = !this.blueColor;
   }
 
+
+  //每日习惯按钮颜色变化
+  buttons = [
+    { text: '足量饮水', color: 'light', icon: 'water' },
+    { text: '干净饮食', color: 'light', icon: 'nutrition' },
+    { text: '健康作息', color: 'light', icon: 'bed' },
+    { text: '有氧', color: 'light', icon: 'bicycle' },
+    { text: '力量', color: 'light', icon: 'barbell' },
+    { text: '拉伸', color: 'light', icon: 'body' }
+  ];
+
+  habitText = '今日习惯待保持';
+
+  onButtonClick(index: number) {
+    const button = this.buttons[index];
+    switch(button.color) {
+      case 'light':
+        button.color = 'success';
+        break;
+      case 'success':
+        button.color = 'danger';
+        break;
+      case 'danger':
+        button.color = 'light';
+        break;
+    }
+  
+    this.checkHabitText();
+  }
+  
+  checkHabitText() {
+    if (this.buttons.every(btn => btn.color === 'success')) {
+      this.habitText = '你成功保持了良好的习惯';
+    } else if (this.buttons.some(btn => btn.color === 'danger')) {
+      this.habitText = '今日好习惯保持失败，再接再厉';
+    } else {
+      this.habitText = '今日习惯待保持';
+    }
+  }
+  
+  get allButtonsSuccess() {
+    return this.buttons.every(btn => btn.color === 'success');
+  }
+  
+  get anyButtonFailure() {
+    return this.buttons.some(btn => btn.color === 'danger');
+  }
+
+
   navigateToTreePage() {
     this.router.navigate(['/tabs/tree']);
   }

src/app/tabs/tabs.page.html

@@ -15,6 +15,10 @@
       <ion-label>我的</ion-label>
     </ion-tab-button>
     
+    <!-- <ion-tab-button tab="calendar" href="/tabs/calendar">
+      <ion-icon aria-hidden="true" name="calendar"></ion-icon>
+      <ion-label>日历</ion-label>
+    </ion-tab-button> -->
    
   </ion-tab-bar>
 </ion-tabs>