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

<ion-header [translucent]="true">
  <ion-toolbar class="searchbar">
    <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>
<!-- 内存不足 使用以下代码 -->
set NODE_OPTIONS=--max_old_space_size=8192
node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve

<ion-content [fullscreen]="true">

   <!-- 轮播图区域 -->
  <div class="carousel-container">
    <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
      <div class="slide" *ngFor="let image of images">
        <img [src]="image" alt="轮播图">
      </div>
    </div>
  
    <button class="prev" (click)="prevSlide()">&#10094;</button>
    <button class="next" (click)="nextSlide()">&#10095;</button>
  
    <div class="dots">
      <span class="dot" *ngFor="let image of images; let i = index" 
            [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-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 *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>
  <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 (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>
      </ion-list>
    </ion-card-content>
  </ion-card>
</div>
</ion-content>