fix:person_information

AIart-app/src/app/tab1/tab1.page.html

@@ -50,7 +50,7 @@
   </div>
   <!-- 轮播图部分结束 -->
   <!-- 中部导航栏部分开始 -->
-  <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 5px;">
+  <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 10px;">
     <div class="ion-activatable ripple-parent rounded-rectangle">
       <ion-icon name="storefront-outline"></ion-icon>
       <ion-label>商业</ion-label>

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

@@ -10,5 +10,122 @@
 </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: 10px;">
+        <ion-icon name="chevron-forward-outline"></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>邀请好友</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="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>
+  <!-- 我的账户结束 -->
 </ion-content>

AIart-app/src/app/tab5/tab5.page.scss

@@ -0,0 +1,23 @@
+.img-style {
+    height: 75px;
+    width: 75px;
+    position: relative;
+    border-radius: 100%;
+}
+
+.logo-img {
+    border-radius: 100%;
+    color: #fcfafafa;
+    margin-left: 13px;
+    margin-top: 13px;
+}
+
+.center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.s-style {
+    width: 50px;
+}

AIart-app/src/app/tabs/tabs.page.html

@@ -1,27 +1,27 @@
 <ion-tabs>
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon name="compass"></ion-icon>
+      <ion-icon name="compass-outline"></ion-icon>
       <ion-label>发现</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon name="document"></ion-icon>
+      <ion-icon name="document-outline"></ion-icon>
       <ion-label>学习计划</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon name="book"></ion-icon>
+      <ion-icon name="book-outline"></ion-icon>
       <ion-label>知识城邦</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab4" href="/tabs/tab5">
-      <ion-icon name="storefront"></ion-icon>
+      <ion-icon name="storefront-outline"></ion-icon>
       <ion-label>已购课程</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab5" href="/tabs/tab5">
-      <ion-icon name="person"></ion-icon>
+      <ion-icon name="person-outline"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>

AIart-app/src/app/tabs/tabs.page.ts

@@ -2,11 +2,12 @@ import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import {
-  compass, bookOutline, book, storefront, person, document, mailOutline,
-  calendarOutline, logoUsd, briefcaseOutline, heartOutline, footballOutline,
+  compassOutline, bookOutline, book, storefront, personOutline, documentOutline,
+  mailOutline, calendarOutline, logoUsd, briefcaseOutline, heartOutline, footballOutline,
   chevronForwardOutline, storefrontOutline, businessOutline, documentsOutline,
   rocketOutline, sparklesOutline, medalOutline, listOutline, giftOutline,
-  scanOutline, settingsOutline
+  scanOutline, settingsOutline, heartCircleOutline, walletOutline, bagRemoveOutline,
+  folderOutline, readerOutline, cartOutline, thumbsUpOutline, ticketOutline
 } from 'ionicons/icons';
 
 @Component({
@@ -21,11 +22,13 @@ export class TabsPage {
 
   constructor() {
     addIcons({
-      compass, bookOutline, book, storefront, person, document,
+      compassOutline, bookOutline, book, storefront, personOutline, documentOutline,
       mailOutline, calendarOutline, logoUsd, briefcaseOutline, heartOutline,
       footballOutline, chevronForwardOutline, storefrontOutline, businessOutline,
       documentsOutline, rocketOutline, sparklesOutline, medalOutline, listOutline,
-      giftOutline, scanOutline, settingsOutline
+      giftOutline, scanOutline, settingsOutline, heartCircleOutline, walletOutline,
+      bagRemoveOutline, folderOutline, readerOutline, cartOutline, thumbsUpOutline,
+      ticketOutline
     });
   }
 }