增加了主页内容，

wisdom-app/src/app/tab1/tab1.page.html

@@ -1,12 +1,7 @@
 <ion-header [translucent]="true">
-  <ion-toolbar class="title">
-      <ion-title>智养人生</ion-title>
-  </ion-toolbar>
   <ion-toolbar class="searchbar">
-      <ion-searchbar [value]="searchContent" (ionInput)="handleInput($event)" placeholder="输入您的疾病" [debounce]="1000" ></ion-searchbar>
-  </ion-toolbar>
-  <ion-toolbar class="searchbut">
-    <ion-button expand="block" color="primary" (click)="search()">搜索</ion-button>
+      <ion-searchbar [value]="searchContent" (ionInput)="handleInput($event)" placeholder="输入您的疾病" [debounce]="100" ></ion-searchbar>
+      <ion-button color="light" size="large" (click)="search()">搜索</ion-button>
   </ion-toolbar>
 </ion-header>
 <!-- 内存不足 使用以下代码 -->
@@ -16,17 +11,135 @@
 <ion-content [fullscreen]="true">
   <div class="inquery" style="margin-top: 10px">
     <div class="inquery-ai">
-      <ion-button color="primary" size="large" (click)="goToPage1()">
-        AI问诊
+      <ion-button color="light" size="large" (click)="goToPage1()">
+        <ion-list>
+          <ion-item>
+            <p>AI问诊</p>
+            <img src="../../assets/image/ai.png" alt="这是ai问诊的图片">
+          </ion-item>
+        </ion-list>
       </ion-button>
     </div>
+
     <div class="inquery-human">
-      <ion-button color="primary" size="large" (click)="goToPage2()">
-        找医生
+      <ion-button color="light" size="large" (click)="goToPage2()">
+        <ion-list>
+          <ion-item>
+            <p>找医生</p>
+            <img src="../../assets/image/askdoct.jpg" alt="这是找医生的图片">
+        </ion-item>
+      </ion-list>
       </ion-button>
     </div>
+
   </div>
-  <ion-button expand="block" color="primary" size="large" (click)="goToPicture()">
+
+
+  <ion-button expand="block" color="light" size="large" (click)="goToPicture()">
     生成图片
   </ion-button>
+
+  <!-- 功能区 -->
+<div class="function-area">
+  <!-- 第一行功能按钮 -->
+  <div class="function-row">
+    <div class="function-item" *ngFor="let item of functionItems1" (click)="navigateTo(item.route)">
+      <div class="icon">
+        <ion-icon [name]="item.icon"></ion-icon>
+      </div>
+      <div class="label">{{ item.label }}</div>
+    </div>
+  </div>
+
+  <!-- 第二行功能按钮 -->
+  <div class="function-row">
+    <div class="function-item" *ngFor="let item of functionItems2" (click)="navigateTo(item.route)">
+      <div class="icon">
+        <ion-icon [name]="item.icon"></ion-icon>
+      </div>
+      <div class="label">{{ item.label }}</div>
+    </div>
+  </div>
+</div>
+
+
+<div>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>权威医生</ion-card-title>
+      <ion-card-subtitle>医生简介</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="../../assets/image/doctor4.png" />
+          </ion-thumbnail>
+          <ion-list>
+            <ion-label>
+              姓名：张伟 年龄：45 岁 
+            </ion-label>
+            <ion-label>
+              职位：主任医师 科室：神经内科
+            </ion-label>
+            <ion-label>
+              医院：XX 市中心医院
+            </ion-label>
+          </ion-list>
+        </ion-item>
+  
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="../../assets/image/doctor2.png" />
+          </ion-thumbnail>
+          <ion-list>
+            <ion-label>
+              姓名：张伟 年龄：45 岁 
+            </ion-label>
+            <ion-label>
+              职位：主任医师 科室：神经内科
+            </ion-label>
+            <ion-label>
+              医院：XX 市中心医院
+            </ion-label>
+          </ion-list>
+        </ion-item>
+  
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="../../assets/image/doctor3.png" />
+          </ion-thumbnail>
+          <ion-list>
+            <ion-label>
+              姓名：张伟 年龄：45 岁 
+            </ion-label>
+            <ion-label>
+              职位：主任医师 科室：神经内科
+            </ion-label>
+            <ion-label>
+              医院：XX 市中心医院
+            </ion-label>
+          </ion-list>
+        </ion-item>
+  
+        <ion-item lines="none">
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="../../assets/image/doctor1.png" />
+          </ion-thumbnail>
+          <ion-list>
+            <ion-label>
+              姓名：张伟 年龄：45 岁 
+            </ion-label>
+            <ion-label>
+              职位：主任医师 科室：神经内科
+            </ion-label>
+            <ion-label>
+              医院：XX 市中心医院
+            </ion-label>
+          </ion-list>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</div>
 </ion-content>

wisdom-app/src/app/tab1/tab1.page.scss

@@ -1,30 +1,152 @@
+.searchbar {
+  --background: #f5f5f5;
+  --border-radius: 10px;
+  --placeholder-color: #999;
+  --placeholder-opacity: 0.8;
+  --color: #333;
+  --icon-color: #333;
+  --clear-color: #333;
+  --input-padding-start: 16px;
+  width: 100%;
+  height: 60px;
+}
 
+.searchbar ion-searchbar {
+  --background: #f5f5f5;
+  --border-radius: 10px;
+  --placeholder-color: #999;
+  --placeholder-opacity: 0.8;
+  --color: #333;
+  --icon-color: #333;
+  --clear-color: #333;
+  --input-padding-start: 16px;
+  width: 80%;
+  height: 60px;
+  display: inline-block;
+  margin-top: 10px;
+}
 
+.searchbar ion-button {
+  --background: #f5f5f5;
+  --border-radius: 10px;
+  --placeholder-color: #999;
+  --placeholder-opacity: 0.8;
+  // --color: #333;
+  // --icon-color: #333;
+  // --clear-color: #333;
+  // --input-padding-start: 16px;
+  width: 20%; // 设置按钮宽度为 20%
+  --height:100%;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+
+// .searchbar ion-button img {
+//   width: 100%;
+//   height: 100%;
+//   margin: 0;
+//   padding: 0;
+// }
+
+// // 轮播图
+// .carousel {
+//   width: 100%;
+// }
+
+// 搜索框
+// .search-box {
+//   display: flex;
+//   justify-content: space-between;
+//   align-items: center;
+//   margin: 16px 0;
+//   padding: 0 16px;
+// }
 .inquery{
-    width:100%;
-    height:100px;
-    // background-color: #fd0000;
-    padding: 5px 0px;
-    box-sizing: border-box;
-    margin: 0px 0px;
-    ion-button{
-        width: 100%;
-        height: 100%;
-        background-color: crimson;
-        display: inline-block;
-    }
-    .inquery-ai{
-        height: 100%;
-        width: 48%;
-        display: inline-block;
-        margin: 0;
-        padding: 0;
-    }
-    .inquery-human{
-        height: 100%;
-        width: 48%;
-        display: inline-block;
-        margin-left: 2%;
-        padding: 0;
+  width:100%;
+  height:100px;
+  // --background-color: #fd0000;
+  padding: 5px 0px;
+  box-sizing: border-box;
+  margin: 0px 0px;
+  ion-button{
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+  }
+}
+
+.inquery-ai{
+  height: 100%;
+  width: 48%;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+
+.inquery-ai img{
+  width:50%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.inquery-human{
+  height: 100%;
+  width: 48%;
+  display: inline-block;
+  margin-left: 2%;
+  padding: 0;
+}
+
+.inquery-human img{
+  width:50%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+// 功能区
+.function-area {
+    margin: 16px 0;
+    padding: 0 16px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 960px; /* 最大宽度 */
+  }
+  
+  .function-row {
+    display: flex; // 使用 Flexbox 布局
+    justify-content: space-between; // 按空间均匀分布
+    align-items: center; // 垂直居中
+    overflow-x: auto; // 允许水平滚动
+    scroll-snap-type: x mandatory; // 启用滚动捕捉
+    -webkit-overflow-scrolling: touch; // 平滑滚动
+    padding: 16px 0;
+  
+    .function-item {
+      flex: 1 0 20%; // 每个项目占 20% 宽度
+      min-width: 0; // 确保项目可以缩小
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      scroll-snap-align: start; // 滚动时对齐
+  
+      .icon {
+        font-size: 24px;
+        margin-bottom: 8px;
+      }
+  
+      .label {
+        font-size: 14px;
+        color: #333;
+      }
     }
-}
+  }

wisdom-app/src/app/tab1/tab1.page.ts

@@ -1,12 +1,18 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonTabButton, IonSearchbar, IonLabel, IonItem, IonList } from '@ionic/angular/standalone';
+import { IonCardHeader, IonHeader, IonToolbar, IonTitle, IonContent, IonTabButton, IonSearchbar, IonLabel, IonItem, IonList, NavController, IonCard, IonCardTitle, IonCardSubtitle, IonCardContent, IonThumbnail } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { IonButton } from '@ionic/angular/standalone';
 import { IonIcon } from '@ionic/angular/standalone';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
-
-
+import { ModalController } from '@ionic/angular';
+import { HttpClient } from '@angular/common/http';
+import { addIcons } from 'ionicons';
+import { documentText, chatbubbles, person, calendar, newspaper,
+   medkit,clipboard, podium, videocam, people } from 'ionicons/icons';
+addIcons({ documentText, chatbubbles, person, calendar, newspaper,
+   medkit,clipboard, podium, videocam, people
+ });
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -14,15 +20,18 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, IonTabButton, IonButton,
-    IonIcon,IonSearchbar,IonLabel,IonItem,IonList,CommonModule
+    IonIcon,IonSearchbar,IonLabel,IonItem,IonList,CommonModule,IonCard,IonCardHeader,IonCardTitle,IonCardSubtitle,
+    IonCardContent, IonThumbnail, 
   ],
 })
 export class Tab1Page {
 
-
-
-  constructor(private router: Router) {}
-
+  constructor(
+    private router: Router,
+    // private modalController: ModalController,
+    // private navCtrl: NavController,
+    // private http: HttpClient // 注入 HttpClient
+  ) {}
   /**
    * Go to the ai page
    */
@@ -57,6 +66,27 @@ export class Tab1Page {
     }
   }
 
+  // 功能按钮数据
+  functionItems1 = [
+    { label: '我的健康', icon: 'document-text', route: '/medical-records' },
+    { label: '健康档案', icon: 'person', route: '/health-profile' },
+    { label: '电话问诊', icon: 'calendar', route: '/appointment' },
+    { label: '购买药品', icon: 'medkit', route: '/telemedicine' },
+  ];
+
+  functionItems2 = [
+    { label: '专业男科', icon: 'clipboard', route: '/medicine-purchase' },
+    { label: '权威专家', icon: 'podium', route: '/expert-lectures' },
+    { label: '健康资讯', icon: 'newspaper', route: '/health-news' },
+    { label: '智慧社区', icon: 'people', route: '/health-community' }
+  ];
+
+  // 导航到指定路由
+  navigateTo(route: string) {
+    // this.router.navigate([route]);
+    console.log("route: ",route)
+
+  }
 
   ngOnInit() {}
 }

wisdom-app/src/app/tab2/tab2.page.ts

@@ -17,9 +17,6 @@ addIcons({ airplane, bluetooth, call, wifi });
   ]
 })
 export class Tab2Page {
-
-  constructor(private modalCtrl:ModalController) {
-
+  constructor() {
   }
-
 }