web3-202226701052/src/app/tab1/tab1.page.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-avatar>
        <img src="../../assets/images/user-avatar.png" alt="User Avatar" />
      </ion-avatar>
      <ion-button fill="clear">
        <ion-label>登录/注册</ion-label>
      </ion-button>
    </ion-buttons>
    <ion-title>
      1分钟了解健康服务
    </ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" routerLink="/appointment">
        <ion-icon name="medical"></ion-icon>
        <ion-label>预约服务</ion-label>
        <ion-icon name="chevron-forward-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="health-banner">
    <div class="banner-content">
      <div class="banner-header">
        获取健康礼包，开启健康生活
      </div>
      <div class="banner-body">
        <div class="avatar-stack">
          <img src="../../assets/images/user-avatar.png" alt="Doctor 1" class="avatar" />
          <img src="../../assets/images/user-avatar.png" alt="Doctor 2" class="avatar" />
          <img src="../../assets/images/user-avatar.png" alt="Doctor 3" class="avatar" />
        </div>
        <div class="expert-info">
          10位专家在线等待咨询
        </div>
      </div>
      <div class="banner-footer">
        <ion-button expand="block" color="danger">立即咨询</ion-button>
      </div>
      <div class="banner-bottom">
        <div class="bottom-content">
          <div class="left-content">
            昨天 下午3点 张医生 正在提供咨询服务
          </div>
          <div class="right-content">
            <ion-button fill="clear" color="light">点击了解更多</ion-button>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- 推荐医生区域 -->
<div class="recommended-doctors">
  <div class="header">
    <div class="title">今日推荐医生</div>
    <div class="subtitle">每日更新</div>
  </div>
  <div class="scroll-container" id="carousel" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)" [ngStyle]="{ transform: 'translateX(' + currentTranslate + 'px)' }">
    <ng-container *ngFor="let doctor of doctors; let i = index">
      <div class="card">
        <div class="tag">专家</div>
        <img src="{{ doctor.avatar }}" alt="Doctor Avatar" class="avatar" />
        <div class="name">{{ doctor.name }}</div>
        <div class="specialty">{{ doctor.specialty }}</div>
        <ion-button expand="full" color="primary">在线咨询</ion-button>
      </div>
    </ng-container>
  </div>
  <div class="controls">
    <button (click)="prevSlide()">上一张</button>
    <button (click)="nextSlide()">下一张</button>
  </div>
</div>


<!-- 功能区 -->
<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 class="floating-action-button" (click)="publishHealthInfo()">
  <ion-icon name="add"></ion-icon>
  <div class="label">发布</div>
</div>
  
  <!-- 其他页面内容 -->
</ion-content>