fix: tab 1

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

@@ -20,8 +20,37 @@ node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -->
 
 <ion-content [fullscreen]="true">
 
+  <div class="inquery" style="margin-top: 10px ; margin-bottom: 15px; display: flex; height: 120px;">
+    <div class="inquery-ai" style="margin-left:5px;width: 48%; background-color: rgb(255, 255, 255);border-radius: 10px; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.163), -2px -2px 2px 0px rgba(0, 0, 0, 0.148);">
+      <div style="display: flex; margin: 0; padding: 0;">
+        <div (click)="goToPage1()" style="margin-left: 8px">
+          <!-- <img src="../../assets/image/ai.png" alt="AI问诊"> -->
+          <h1>AI问诊</h1>
+          <p style="margin: 0; font-size: 10px; color: grey">7X24小时 智能AI医生</p>
+          <p style="margin-top:5px; width:50px;color:white;background-color: rgba(214, 10, 10, 0.589); font-size: 8px;">不限次畅聊</p>
+        </div>
+        <div (click)="goToPage1()" style="margin-left: 2px; margin-top: 10px;">
+          <img src="../../assets/image/ai.png" alt="AI问诊" height="95px">
+        </div>
+      </div>
+    </div>
+    <div style="width: 1%;"></div>
+    <div class="inquery-human" style="margin-left:0px;width: 48%; background-color: rgb(255, 255, 255);border-radius: 10px; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.163), -2px -2px 2px 0px rgba(0, 0, 0, 0.148);">
+      <div style="display: flex;">
+        <div (click)="goToPage2()" style="margin-left: 8px">
+          <!-- <img src="../../assets/image/askdoct.jpg" alt="找医生"> -->
+          <h1>  找医生</h1>
+          <p style="margin-left: 0px; margin-top:5px; font-size: 10px; color: grey ">全国66万医生等你来选</p>
+        </div>
+        <div (click)="goToPage2()"  style="margin-left: 2px; margin-top: 10px;">
+          <img src="../../assets/image/askdoct.jpg" alt="找医生" height="95px">
+        </div>
+      </div>
+    </div>
+  </div>
+
    <!-- 轮播图区域 -->
-  <div class="carousel-container">
+  <div class="carousel-container" style="border-radius: 25px;">
     <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
       <div class="slide" *ngFor="let image of images">
         <img [src]="image" alt="轮播图">
@@ -36,40 +65,9 @@ node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -->
             [class.active]="i === currentSlide" 
             (click)="goToSlide(i)"></span>
     </div>
-  </div> 
-
-
-  <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>
-          </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>
-          </ion-item>
-        </ion-list>
-      </ion-button>
-    </div>
   </div>
-
-
-  <!-- <ion-button expand="block" color="light" size="large" (click)="goToPicture()">
-    生成图片
-  </ion-button> -->
-
   <!-- 功能区 -->
-<div class="function-area">
-  <!-- 第一行功能按钮 -->
+<div class="function-area" style="border-radius: 20px; margin-left: 10px; margin-right: 10px;">
   <div class="function-row">
     <div class="function-item" *ngFor="let item of functionItems1" (click)="navigateTo(item.route)">
       <div class="icon">
@@ -78,8 +76,6 @@ node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -->
       <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">
@@ -90,36 +86,13 @@ node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -->
   </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 *ngFor="let doctor of doctors" lines="none">
-          <ion-thumbnail slot="start">
-            <img [src]="doctor.image" [alt]="doctor.name" />
-          </ion-thumbnail>
-          <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>
-  </ion-card>
-</div> -->
-
-<div>
+<div class="aidoctor">
   <ion-card>
-    <ion-card-header>
+    <ion-card-header style="margin: 0; padding: 0;">
       <!-- <ion-card-title>权威医生</ion-card-title> -->
       <div class="mid-nav">
         <div style="font-weight: bold; ">
-          <h1>权威医生</h1>
+          <h1>AI医生</h1>
         </div>
         <div class="under_slide">
           <ion-label (click)="goToViewAll()">查看全部</ion-label>
@@ -128,18 +101,23 @@ node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -->
         </div>
       </div>
     </ion-card-header>
-    <ion-card-content>
+    <ion-card-content style="margin: 0; padding: 0;">
       <ion-list>
-        <ion-item (click)="openInquiry(doctor)" *ngFor="let doctor of doctorList" lines="none">
-          <ion-thumbnail slot="start">
-            <img [src]="doctor.get('avatar') || '../../assets/image/doctor7.png'" [alt]="doctor.get('name')" />
-          </ion-thumbnail>
-          <div class="doctor-info">
-            <h3>{{ doctor.get('name') }}({{ doctor.get('age') }}岁)</h3>
-            <p>{{ doctor.get('title') }},{{ doctor.get('depart')?.name }}</p>
-            <p>飞码互联网医院</p>
-          </div>
-        </ion-item>
+        <div style="display: flex; justify-content: space-between; margin: 0; padding: 0;">
+          <ion-item style="margin: 0; padding: 0;" (click)="openInquiry(doctor)" *ngFor="let doctor of doctorList" lines="none">
+            <div style="margin: 0; padding:0;">
+              <div style="margin:0; padding:0px;">
+                <img height="90px" [src]="doctor.get('avatar') || '../../assets/image/doctor7.png'" [alt]="doctor.get('name')" />
+              </div>
+              <div class="doctor-info" style="margin:0; padding:0px;">
+                <h4 style="text-align:center;margin:0; padding:0px;">{{ doctor.get('name') }}({{ doctor.get('age') }}岁)</h4>
+                <p style="text-align:center;margin:0; padding:0px;">{{ doctor.get('title') }}</p>
+                <p style="text-align:center;margin:0; padding:0px;">{{ doctor.get('depart')?.name }}</p>
+                <p style="width: 100%; margin:0; padding:0px;">飞码互联网医院</p>
+              </div>
+            </div>
+          </ion-item>
+        </div>
       </ion-list>
     </ion-card-content>
   </ion-card>

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

@@ -79,53 +79,53 @@
 
 
 
-.inquery{
-  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);
-}
+// .inquery{
+//   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);
+// }
 
 .mid-nav {
   display: flex;
@@ -147,7 +147,6 @@
 
 
 
-
 ion-item {
   margin-bottom: 12px; /* 增加医生卡片之间的间距 */
   padding: 12px; /* 调整卡片内边距 */

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

@@ -43,7 +43,10 @@ export class Tab1Page {
   images = [
     'https://picsum.photos/800/400?random=1',
     'https://picsum.photos/800/400?random=2',
-    'https://picsum.photos/800/400?random=3'
+    'https://picsum.photos/800/400?random=3',
+    'https://picsum.photos/800/400?random=4',
+    'https://picsum.photos/800/400?random=5',
+    'https://picsum.photos/800/400?random=6',
   ];
   currentSlide = 0;
   intervalId: any;
@@ -139,7 +142,10 @@ export class Tab1Page {
   async loadDoctorList(){
     let query = new CloudQuery("Doctor");
     query.include("depart")
-    this.doctorList = await query.find()
+    let List = await query.find()
+    for(let i = 0; i < 3; i++) {
+      this.doctorList.push(List[i])
+    }
   }
   goToViewAll(){
     console.log(['route'])