APP-Traval-zy/src/app/tab3/tab3.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      我的
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-content>
      <!-- 用户信息卡片 -->
      <ion-card class="profile-card">
        <div class="profile-content">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" class="user-avatar" alt="用户头像">
          <div class="user-info">
            <div class="user-name">旅行达人</div>
            <div class="user-level">
              黄金会员
              <span class="level-badge">Lv.3</span>
            </div>
            <ion-button class="edit-button" fill="solid" size="small">
              <ion-icon slot="start" name="create-outline"></ion-icon>
              编辑资料
            </ion-button>
          </div>
        </div>
      </ion-card>
      
      <!-- 数据统计 -->
      <ion-card class="stats-card">
        <ion-grid class="stats-grid">
          <ion-row>
            <ion-col>
              <div class="stat-item">
                <div class="stat-value">128</div>
                <div class="stat-label">收藏</div>
              </div>
            </ion-col>
            <ion-col>
              <div class="stat-item">
                <div class="stat-value">24</div>
                <div class="stat-label">足迹</div>
              </div>
            </ion-col>
            <ion-col>
              <div class="stat-item">
                <div class="stat-value">356</div>
                <div class="stat-label">积分</div>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-card>
      
      <!-- 功能列表1 -->
      <ion-card class="menu-list">
        <ion-list lines="none">
          <ion-item class="menu-item" button detail="true">
            <ion-icon class="menu-icon" name="heart-outline" slot="start"></ion-icon>
            <ion-label>我的收藏</ion-label>
          </ion-item>
          <div class="divider"></div>
          <ion-item class="menu-item" button detail="true">
            <ion-icon class="menu-icon" name="calendar-outline" slot="start"></ion-icon>
            <ion-label>我的行程</ion-label>
          </ion-item>
          <div class="divider"></div>
          <ion-item class="menu-item" button detail="true">
            <ion-icon class="menu-icon" name="wallet-outline" slot="start"></ion-icon>
            <ion-label>我的订单</ion-label>
          </ion-item>
        </ion-list>
      </ion-card>
      
      <!-- 功能列表2 -->
      <ion-card class="menu-list">
        <ion-list lines="none">
          <ion-item class="menu-item" button detail="true">
            <ion-icon class="menu-icon" name="settings-outline" slot="start"></ion-icon>
            <ion-label>设置</ion-label>
          </ion-item>
          <div class="divider"></div>
          <ion-item class="menu-item" button detail="true">
            <ion-icon class="menu-icon" name="help-circle-outline" slot="start"></ion-icon>
            <ion-label>帮助与反馈</ion-label>
          </ion-item>
          <div class="divider"></div>
          <ion-item class="menu-item" button detail="true">
            <ion-icon class="menu-icon" name="information-circle-outline" slot="start"></ion-icon>
            <ion-label>关于智途</ion-label>
          </ion-item>
        </ion-list>
      </ion-card>
      
      <!-- 退出登录按钮 -->
      <ion-button expand="block" fill="clear" color="medium" style="margin: 16px;">
        <ion-icon slot="start" name="log-out-outline"></ion-icon>
        退出登录
      </ion-button>
    </ion-content>
    
   
</ion-content>