<ion-header>
  <ion-toolbar>
    <ion-title>社区</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 游记分享列表 -->
  <ion-card>
    <ion-card-header class="custom-card-header" >
      <div class="card-content">
        游记分享
      </div>
      <div class="search-container">
        <input type="text" class="search-box" placeholder="  搜索...">
      </div>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <h2 class="h1-top">推荐各地攻略交流群</h2>
        <ion-card class="out-card" *ngFor="let area of LvYouAreaList">
          <ion-icon name="add-circle" class="add-icon"></ion-icon>
          <!-- <h2>{{ card.title }}</h2> -->
           <h2>{{area.get('name')}}</h2>
          <ion-card class="inner-card">
            {{ area.get('message') }}
          </ion-card>
        </ion-card>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <!-- 问答交流 -->
  <ion-card>
    <ion-card-header class="h1-top">
      问答交流
    </ion-card-header>
    <ion-card-content>
        <ion-card class="chat-bubble-left green animate-left"
        style="animation-delay: 2s;">
        岗什卡雪峰景区车子直接可以开上去，不需要爬山？有高反感觉吗？
        </ion-card>
        <ion-card class="chat-bubble-right green animate-left"
        style="animation-delay: 4s;">岗什卡雪峰是西藏第二高峰，海拔约为7556米。在景区内，游客通常是乘坐车辆或者徒步到达观景点，而不是直接开车上山。因为岗什卡雪峰所在的区域地势险峻、气候恶劣，不适合普通车辆直接开上去。
        </ion-card>
        <ion-card class="chat-bubble-left green animate-left" style="animation-delay: 6s;">
          有高反感觉吗？
        </ion-card>
        <ion-card class="chat-bubble-right green animate-left"
        style="animation-delay: 9s;">对于高反，由于岗什卡雪峰景区的海拔较高，游客在前往景区时可能会面临高反的风险。高反是由于高海拔环境下氧气稀薄导致的身体不适反应，表现为头痛、头晕、恶心、呕吐等症状.
        </ion-card>
        <!-- 这里可以添加更多问答交流的示例数据 -->
    </ion-card-content>
  </ion-card>

  <!-- 活动约伴 -->
  <ion-card>
    <ion-card-header>
      活动约伴
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item>
          <ion-label>
            <h2>活动详情</h2>
            <p>报名信息</p>
          </ion-label>
        </ion-item>
        <!-- 这里可以添加更多活动约伴的示例数据 -->
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>