s202226701049/AIart-app/src/app/tab5/tab5.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <div style="display: flex;align-items: center;justify-content: center;gap: 10px;">
      <ion-searchbar placeholder="输入搜索内容" style="width: 70%;margin-top: 10px;"></ion-searchbar>
      <ion-icon name="gift-outline" style="height: 25px;width: 25px;"></ion-icon>
      <ion-icon name="scan-outline" style="height: 25px;width: 25px;"></ion-icon>
      <ion-icon name="settings-outline" style="height: 25px;width: 25px;"></ion-icon>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 个人信息开始 -->
  <div style="background-color: #fcfafafa;margin: 10px;border-radius: 8px;">
    <div style="display: flex;justify-content: space-between;">
      <div style="display: flex;">
        <div class="img-style">
          <img src="../../assets/img/logo.png" alt="兴趣学习" class="logo-img">
        </div>
        <div style="margin-left: 25px">
          <div>
            <p style="font-weight: bold;font-size: 22px;margin-bottom: 0;">游客用户</p>
          </div>
          <div>
            <p style="margin-top: 5px;font-size: 15px;">15 关注&nbsp;&nbsp;&nbsp;&nbsp;3 关注我</p>
          </div>
        </div>
      </div>
      <div style="display: flex;align-items: center;margin-right: 20px;">
        <ion-icon name="chevron-forward-outline" class="rounded-rectangle" (click)="goUserLogin()"
          style="width: 25px;height: 25px;"></ion-icon>
      </div>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;gap: 40px;
      text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
      <div style="padding: 0;align-items: center;justify-content: center;">
        <div>
          <p style="font-weight: bold;font-size: 23px;margin-top: 0;margin-bottom: 0;">300</p>
        </div>
        <div>
          <p style="margin-top: 5px;">学分</p>
        </div>
      </div>
      <div style="padding: 0;align-items: center;justify-content: center;text-align: center;">
        <div style="display: flex;align-items: center;justify-content: center;">
          <p style="font-weight: bold;font-size: 23px;margin-top: 0;margin-bottom: 0;">15</p><span
            style="font-size: 15px;">分钟</span>
        </div>
        <div>
          <p style="margin-top: 5px;">今日学习</p>
        </div>
      </div>
      <div style="padding: 0;align-items: center;justify-content: center;text-align: center;">
        <div>
          <p style="font-weight: bold;font-size: 23px;margin-top: 0;margin-bottom: 0;">2</p>
        </div>
        <div>
          <p style="margin-top: 5px;">勋章</p>
        </div>
      </div>
      <div style="padding: 0;align-items: center;justify-content: center;text-align: center;">
        <div>
          <p style="font-weight: bold;font-size: 20px;margin-top: 0;margin-bottom: 0;">0</p>
        </div>
        <div>
          <p style="margin-top: 5px;">证书</p>
        </div>
      </div>
    </div>
    <div class="center" style="background-color:#f2efde;border-radius: 0px 0px 8px 8px;font-size: 15px;">
      <ion-icon name="heart-circle-outline" style="height: 23px;width: 23px;margin-right: 5px;"></ion-icon>
      <p style="font-weight: 900;">邀请好友</p>
      <ion-icon name="chevron-forward-outline" style="margin-left: 5px;"></ion-icon>
    </div>
  </div>
  <!-- 个人信息结束 -->
  <!-- 我的账户开始 -->
  <div style="background-color: #fcfafafa;margin: 10px;border-radius: 8px;padding-bottom: 10px;">
    <div style="margin-bottom: 20px;">
      <span style="position: relative;margin-left: 20px;font-size: 20px;font-weight: bold;top: 10px;">我的账户</span>
      <span style="position: relative;top: 9px;margin-left: 165px;">查看全部</span>
      <ion-icon name="chevron-forward-outline" style="position: relative;top: 12px;"></ion-icon>
    </div>

    <div style="margin-bottom: 20px;">
      <div style="display: flex;align-items: center;justify-content: center;gap: 25px;
        text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
        <div class="s-style">
          <ion-icon name="wallet-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">账户</p>
          <p style="margin: 0;">0.00元</p>
        </div>
        <div class="s-style" style="width: 70px;">
          <ion-icon name="folder-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">卡券</p>
          <p style="margin: 0;color: rgb(236, 56, 16);">3张优惠券</p>
        </div>
        <div class="s-style">
          <ion-icon name="reader-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">订单</p>
        </div>
        <div class="s-style">
          <ion-icon name="cart-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">购物车</p>
        </div>
      </div>
    </div>

    <div style="margin-bottom: 15px;">
      <div style="display: flex;align-items: center;justify-content: center;gap: 25px;
        text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
        <div class="s-style">
          <ion-icon name="medal-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">会员</p>
        </div>
        <div class="s-style">
          <!-- <ion-icon name="card-outline" style="height: 25px;width: 25px;"></ion-icon> -->
          <ion-icon name="thumbs-up-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">打赏</p>
        </div>
        <div class="s-style" style="width: 70px;">
          <ion-icon name="ticket-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">活动门票</p>
        </div>
        <div class="s-style">
          <ion-icon name="sparkles-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">积分</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 我的账户结束 -->
  <!-- 我的内容开始 -->
  <div style="background-color: #fcfafafa;margin: 10px;border-radius: 8px;padding-bottom: 10px;">
    <div style="margin-bottom: 20px;">
      <span style="position: relative;margin-left: 20px;font-size: 20px;font-weight: bold;top: 10px;">我的内容</span>
      <ion-icon name="chevron-forward-outline" style="position: relative;top: 12px;"></ion-icon>
    </div>
    <div style="margin-bottom: 20px;">
      <div style="display: flex;align-items: center;justify-content: center;gap: 25px;
          text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
        <div class="s-style">
          <ion-icon name="document-text-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">笔记</p>
        </div>
        <div class="s-style" style="width: 70px;">
          <ion-icon name="time-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">最近学习</p>
        </div>
        <div class="s-style">
          <ion-icon name="cloud-download-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">下载</p>
        </div>
        <div class="s-style">
          <ion-icon name="heart-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">收藏</p>
        </div>
      </div>
    </div>

    <div style="margin-bottom: 15px;">
      <div style="display: flex;gap: 25px;
          text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
        <div class="s-style" style="width: auto;margin-left: 25px;">
          <ion-icon name="bag-check-outline" style="height: 25px;width: 25px;"></ion-icon>
          <p style="margin: 0;">订阅通知</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 我的账户结束 -->
</ion-content>