202226701009/travel-app/src/app/tab4/tab4.page.html

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

<!-- 头像和昵称 -->
<div class="information">
  <ion-item lines="none">
    <ion-thumbnail slot="start" class="rounded-avatar">
      <img alt="头像" src="https://cdn.dribbble.com/userupload/8724892/file/original-262c901f17794fa6f91d0e961224d6c8.jpg?resize=1024x682&vertical=center" />
    </ion-thumbnail>

    <ion-label>
      <h2>用户昵称</h2>
      <p>158****6846</p>
    </ion-label>
  </ion-item>
</div>

  <div class="stats">
    <ion-grid>
      <ion-row>
        <ion-col>
          <h4><strong>12</strong></h4>
          <p>我的关注</p>
        </ion-col>
        <ion-col>
          <h4><strong>5</strong></h4>
          <p>我的粉丝</p>
        </ion-col>
        <ion-col>
          <h4><strong>1.5w</strong> </h4>
          <p>获赞与收藏</p>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <div class="card-container">
    <ion-grid>
      <ion-row>
        <ion-col>
          <!-- 第一张卡片 -->
          <ion-card>
            <ion-card-header>
              <ion-card-title>我的卡券</ion-card-title>
            </ion-card-header>
            <ion-card-content>
              兑换券/换购券
            </ion-card-content>
          </ion-card>
        </ion-col>
        <ion-col>
          <!-- 第二张卡片 -->
          <ion-card>
            <ion-card-header>
              <ion-card-title>我的收藏</ion-card-title>
            </ion-card-header>
            <ion-card-content>
              票点攻略/笔记故事
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <!--我的订单-->
  <ion-item lines="none">
    <ion-label>
      <h1>我的订单</h1>
    </ion-label>
  </ion-item>

  <ion-card>
    <ion-grid>
      <ion-row>
        <ion-col size="3" text-center>
          <ion-icon name="document-text" size="large"></ion-icon>
          <p>全部订单</p>
        </ion-col>



        <ion-col size="3" text-center>
          <ion-icon name="calendar" size="large"></ion-icon>
          <p>门票预约</p>
        </ion-col>
        <ion-col size="3" text-center>
          <ion-icon name="chatbox-ellipses" size="large"></ion-icon>
          <p>退款售后</p>
        </ion-col>
        <ion-col size="3" text-center>
          <ion-icon name="information-circle" size="large"></ion-icon>
          <p>待评价</p>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>

  <!--我的服务-->
  <ion-item lines="none">
    <ion-label>
      <h1>我的服务</h1>
    </ion-label>
  </ion-item>

  <ion-card>
  <ion-grid>
    <ion-row>
      <ion-col size="3" size-md="4" size-lg="2" class="icon-text-container" routerLink="https://jwc.jxnu.edu.cn/Portal/Index.aspx">
          <ion-icon name="settings" size="large"></ion-icon>
          <p>账号设置</p>
      </ion-col>

      <ion-col size="3" size-md="4" size-lg="2">
          <ion-icon name="create" size="large"></ion-icon>
          <p>我的创作</p>
      </ion-col>

      <ion-col size="3" size-md="4" size-lg="2">
          <ion-icon name="gift" size="large"></ion-icon>
          <p>活动参与</p>
      </ion-col>

      <ion-col size="3" size-md="4" size-lg="2">
          <ion-icon name="walk" size="large"></ion-icon>
          <p>我的行程</p>
      </ion-col>

      <ion-col size="3" size-md="4" size-lg="2">
          <ion-icon name="notifications" size="large"start></ion-icon>
          <p>我的创作</p>
      </ion-col>

      <ion-col size="3" size-md="4" size-lg="2">
          <ion-icon name="document" size="large"></ion-icon>
          <p>问题建议</p>
      </ion-col>

      <ion-col size="3" size-md="4" size-lg="2">
          <ion-icon name="call" size="large"></ion-icon>
          <p>投诉反馈</p>
      </ion-col>

      <ion-col size="3" size-md="4" size-lg="2">
          <ion-icon name="share-social" size="large"></ion-icon>
          <p>分享好友</p>  
      </ion-col>

    </ion-row>
  </ion-grid>
</ion-card>

</ion-content>