app-work/myapp/src/app/tab1/tab1.page.html

<ion-header [translucent]="true" class="health-header">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-avatar>
        <img src="assets/avatar.png" />
        <ion-badge color="warning" class="health-badge">优</ion-badge>
      </ion-avatar>
    </ion-buttons>
    
    <ion-title class="location-title">
      <ion-icon name="location-sharp"></ion-icon>
      <span>井冈山革命博物馆</span>
      <ion-note>28°C 晴</ion-note>
    </ion-title>
    
    <ion-buttons slot="end">
      <ion-button fill="clear" (click)="openNotifications()">
        <ion-icon name="notifications" slot="icon-only"></ion-icon>
        <ion-badge color="danger" *ngIf="hasEmergency">!</ion-badge>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="health-content">
  <!-- 健康仪表盘 -->
  <ion-card class="health-dashboard">
    <ion-card-header>
      <ion-card-title>健康状态监测</ion-card-title>
      <ion-card-subtitle>最后更新: {{ lastUpdate | date:'HH:mm' }}</ion-card-subtitle>
    </ion-card-header>
    
    <ion-card-content>
      <div class="gauge-container">
        <canvas #healthGauge width="240" height="240"></canvas>
        <div class="gauge-center">
          <div class="gauge-value">{{ healthScore }}</div>
          <div class="gauge-label">健康指数</div>
        </div>
      </div>
      
      <div class="health-stats">
        <div class="stat-item">
          <ion-icon name="heart" color="danger"></ion-icon>
          <div>{{ currentHeartRate }}</div>
          <div>心率</div>
        </div>
        <div class="stat-item">
          <ion-icon name="water" color="primary"></ion-icon>
          <div>{{ bloodOxygen }}%</div>
          <div>血氧</div>
        </div>
        <div class="stat-item">
          <ion-icon name="walk" color="success"></ion-icon>
          <div>{{ steps }}/8000</div>
          <div>步数</div>
        </div>
      </div>
    </ion-card-content>
    
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button color="danger" (click)="emergencyCall()">
        <ion-icon name="alert"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </ion-card>

  <!-- 快捷功能入口 -->
  <ion-grid class="quick-actions">
    <ion-row>
      <ion-col size="6" *ngFor="let action of quickActions">
        <ion-button expand="block" fill="clear" (click)="actionClick(action)">
          <div class="action-button">
            <ion-icon [name]="action.icon" color="primary"></ion-icon>
            <div>{{ action.label }}</div>
          </div>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 健康预警卡片 -->
  <ion-card *ngIf="showWarning" class="warning-card" @fadeIn>
    <ion-card-header>
      <ion-card-title color="danger">
        <ion-icon name="warning"></ion-icon>
        健康预警
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-item lines="none">
        <ion-icon slot="start" name="heart" color="danger"></ion-icon>
        <ion-label>您的心率超过安全阈值</ion-label>
      </ion-item>
      <ion-button expand="block" fill="solid" color="danger">
        查看处理建议
      </ion-button>
    </ion-card-content>
  </ion-card>

  <!-- 红色文旅推荐 -->
  <ion-card class="red-tourism">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="star" color="warning"></ion-icon>
        今日红色足迹
      </ion-card-title>
    </ion-card-header>
    
    <ion-card-content>
      <swiper-container [slidesPerView]="1.2" [spaceBetween]="10" class="tourism-swiper">
        <swiper-slide *ngFor="let spot of tourismSpots">
          <div class="spot-card" [style.background-image]="'url(' + spot.image + ')'">
            <div class="spot-overlay">
              <div class="spot-title">{{ spot.name }}</div>
              <div class="spot-difficulty">
                <ion-icon name="star" *ngFor="let i of [].constructor(spot.difficulty)"></ion-icon>
              </div>
              <ion-badge *ngFor="let tag of spot.tags" color="light">{{ tag }}</ion-badge>
            </div>
          </div>
        </swiper-slide>
      </swiper-container>
    </ion-card-content>
  </ion-card>

  <!-- 历史上的今天 -->
  <ion-card class="history-today">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="calendar" color="medium"></ion-icon>
        历史上的今天
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="history-content">
        <div class="history-text">{{ todayHistory }}</div>
        <ion-button fill="outline" size="small">学习更多</ion-button>
      </div>
      <div class="health-tip">
        <ion-icon name="bulb" color="warning"></ion-icon>
        {{ healthTip }}
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-segment value="home" color="danger">
      <ion-segment-button value="home">
        <ion-icon name="home"></ion-icon>
        <ion-label>首页</ion-label>
      </ion-segment-button>
      <ion-segment-button value="report">
        <ion-icon name="document-text"></ion-icon>
        <ion-label>健康报告</ion-label>
      </ion-segment-button>
      <ion-segment-button value="map">
        <ion-icon name="map"></ion-icon>
        <ion-label>红色地图</ion-label>
      </ion-segment-button>
      <ion-segment-button value="profile">
        <ion-icon name="person"></ion-icon>
        <ion-label>我的</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-footer>