优化搜索框、医生模块

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

@@ -1,7 +1,17 @@
 <ion-header [translucent]="true">
   <ion-toolbar class="searchbar">
-      <ion-searchbar [value]="searchContent" (ionInput)="handleInput($event)" placeholder="输入您的疾病" [debounce]="100" ></ion-searchbar>
-      <ion-button color="light" size="large" (click)="search()">搜索</ion-button>
+    <div class="searchbar-container">
+      <ion-searchbar 
+        [value]="searchContent" 
+        (ionInput)="handleInput($event)" 
+        placeholder="输入您的疾病" 
+        [debounce]="100">
+      </ion-searchbar>
+      <ion-button 
+        color="primary" 
+        size="default" 
+        (click)="search()">搜索</ion-button>
+    </div>
   </ion-toolbar>
 </ion-header>
 <!-- 内存不足 使用以下代码 -->
@@ -9,35 +19,33 @@
 <!-- node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -->
 
 <ion-content [fullscreen]="true">
-  <div class="inquery" style="margin-top: 10px">
+  <div class="inquery">
     <div class="inquery-ai">
       <ion-button color="light" size="large" (click)="goToPage1()">
         <ion-list>
           <ion-item>
+            <img src="../../assets/image/ai.png" alt="AI问诊">
             <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="light" size="large" (click)="goToPage2()">
         <ion-list>
           <ion-item>
+            <img src="../../assets/image/askdoct.jpg" alt="找医生">
             <p>找医生</p>
-            <img src="../../assets/image/askdoct.jpg" alt="这是找医生的图片">
-        </ion-item>
-      </ion-list>
+          </ion-item>
+        </ion-list>
       </ion-button>
     </div>
-
   </div>
 
 
-  <ion-button expand="block" color="light" size="large" (click)="goToPicture()">
+  <!-- <ion-button expand="block" color="light" size="large" (click)="goToPicture()">
     生成图片
-  </ion-button>
+  </ion-button> -->
 
   <!-- 功能区 -->
 <div class="function-area">
@@ -62,7 +70,6 @@
   </div>
 </div>
 
-
 <div>
   <ion-card>
     <ion-card-header>
@@ -71,72 +78,15 @@
     </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-item *ngFor="let doctor of doctors" lines="none">
           <ion-thumbnail slot="start">
-            <img alt="Silhouette of mountains" src="../../assets/image/doctor1.png" />
+            <img [src]="doctor.image" [alt]="doctor.name" />
           </ion-thumbnail>
-          <ion-list>
-            <ion-label>
-              姓名：张伟 年龄：45 岁 
-            </ion-label>
-            <ion-label>
-              职位：主任医师 科室：神经内科
-            </ion-label>
-            <ion-label>
-              医院：XX 市中心医院
-            </ion-label>
-          </ion-list>
+          <div class="doctor-info">
+            <h3>{{ doctor.name }}({{ doctor.age }}岁)</h3>
+            <p>{{ doctor.position }},{{ doctor.department }}</p>
+            <p>{{ doctor.hospital }}</p>
+          </div>
         </ion-item>
       </ion-list>
     </ion-card-content>

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

@@ -1,67 +1,19 @@
-.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-container {
+  display: flex; /* 使用 Flexbox 布局 */
+  align-items: center; /* 垂直居中 */
+  gap: 2px; /* 搜索框和按钮之间的间距 */
 }
 
-.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-container ion-searchbar {
+  flex: 1; /* 搜索框占满剩余空间 */
 }
 
-.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-container ion-button {
+  flex-shrink: 0; /* 按钮宽度保持固定 */
+  padding: 0 16px; /* 增加按钮的左右内边距 */
+  font-size: 16px; /* 调整按钮字体大小 */
 }
 
-// .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;
@@ -109,6 +61,38 @@
   border-radius: 10px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
+ion-item {
+  margin-bottom: 12px; /* 增加医生卡片之间的间距 */
+  padding: 12px; /* 调整卡片内边距 */
+  border-radius: 8px; /* 圆角设计 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加卡片阴影 */
+  background-color: #ffffff; /* 卡片背景色 */
+}
+
+ion-thumbnail {
+  width: 60px; /* 缩略图宽度 */
+  height: 60px; /* 缩略图高度 */
+  border-radius: 50%; /* 圆形头像 */
+}
+
+.doctor-info {
+  margin-left: 12px; /* 缩略图与文字的间距 */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.doctor-info h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.doctor-info p {
+  margin: 4px 0;
+  font-size: 14px;
+  color: #666; /* 字体颜色 */
+}
 
 // 功能区
 .function-area {

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

@@ -80,6 +80,32 @@ export class Tab1Page {
     { label: '健康资讯', icon: 'newspaper', route: '/health-news' },
     { label: '智慧社区', icon: 'people', route: '/health-community' }
   ];
+  doctors = [
+    {
+      name: '余海涛',
+      age: 20,
+      position: '主任医师',
+      department: '中医草药科',
+      hospital: '南昌市江西师范医院',
+      image: '../../assets/image/doctor3.png',
+    },
+    {
+      name: '王强',
+      age: 50,
+      position: '副主任医师',
+      department: '骨科',
+      hospital: 'YY市人民医院',
+      image: '../../assets/image/doctor4.png',
+    },
+    {
+      name: '李芳',
+      age: 40,
+      position: '主治医师',
+      department: '心血管内科',
+      hospital: 'XX市第一医院',
+      image: '../../assets/image/doctor2.png',
+    },
+  ];
 
   // 导航到指定路由
   navigateTo(route: string) {