feat: update

src/app/tab3/tab3.page.html

@@ -1,50 +1,121 @@
-<ion-header>
+<ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>我的</ion-title>
+  <ion-title>
+  个人中心
+  </ion-title>
   </ion-toolbar>
-</ion-header>
-
-<ion-content>
+ </ion-header>
+ 
+ 
+ <ion-content>
   <!-- 个人信息 -->
   <ion-card>
-    <ion-card-header>
-      个人信息
-    </ion-card-header>
-    <ion-card-content>
-      <ion-avatar slot="start">
-        <ion-img src="https://via.placeholder.com/150"></ion-img>
-      </ion-avatar>
-      <ion-label>用户名：示例用户</ion-label>
-    </ion-card-content>
-  </ion-card>
+ <!-- <ion-card-header>
+     <h1>个人中心</h1>
+  </ion-card-header> -->
+ <ion-card-content>
+ 
+ <ion-row>
+ <ion-col size="3">
+ <ion-avatar>
+ <ion-img src="https://via.placeholder.com/150"></ion-img>
+ </ion-avatar>
+ </ion-col>
+ <ion-col size="9">
+ <ion-label>用户名：示例用户</ion-label>
+ <!-- id、ip -->
+ <ion-row>
+ <ion-col>
+ <ion-label>ID: 23284787</ion-label>
+ </ion-col>
+ <ion-col>
+ <ion-label>IP属地: 南昌</ion-label>
+ </ion-col>
+ </ion-row>
+ </ion-col>
+ 
+ </ion-row>
 
-  <!-- 我的收藏 -->
-  <ion-card>
-    <ion-card-header>
-      我的收藏
-    </ion-card-header>
-    <ion-card-content>
-      这里是一些收藏内容的示例数据
-    </ion-card-content>
+ 
+ <ion-row>
+ <ion-col>
+  <ion-label>关注: 7</ion-label>
+ </ion-col>
+  <ion-col>
+      <ion-label>粉丝: 0</ion-label>
+  </ion-col>
+  <ion-col>
+      <ion-label>获赞: 0</ion-label>
+  </ion-col>
+  </ion-row>
+ 
+ </ion-card-content>
+ </ion-card>
+ 
+ 
+ <div class="middle-section">
+ <!-- 我的订单 -->
+ <ion-card class="order-card">
+ <ion-card-header>
+ <span style="font-size: 16px;">我的订单</span>
+  </ion-card-header>
+ <ion-card-content>
+  <!-- 订单卡片内容 -->
+  <span style="font-size: 14px;">查看全部</span>
+  </ion-card-content>
   </ion-card>
-
-  <!-- 我的订单 -->
-  <ion-card>
-    <ion-card-header>
-      我的订单
-    </ion-card-header>
-    <ion-card-content>
-      这里是一些订单详情的示例数据
-    </ion-card-content>
+ 
+  <!-- 积分中心 -->
+  <ion-card class="points-card">
+  <ion-card-header>
+  <span style="font-size: 16px;">积分中心</span>
+ <!-- <ion-button slot="end" fill="clear">收藏内容</ion-button> -->
+       </ion-card-header>
+       <ion-card-content>
+    <!-- 积分中心内容 -->
+ <span style="font-size: 14px;">答题赢积分</span>
+     </ion-card-content>
   </ion-card>
+ 
+  <!-- 我的勋章 -->
+  <ion-card class="medals-card">
+      <ion-card-header>
 
-  <!-- 设置与反馈 -->
-  <ion-card>
-    <ion-card-header>
-      设置与反馈
-    </ion-card-header>
-    <ion-card-content>
-      这里是一些设置选项和意见反馈的示例数据
-    </ion-card-content>
+       <span style="font-size: 16px;">我的勋章</span>
+        </ion-card-header>
+       <ion-card-content>
+          <!-- 我的勋章内容 -->
+      <span style="font-size: 14px;">2枚勋章</span>
+ </ion-card-content>
+</ion-card>
+</div>
+
+<div>
+<!-- 内容 -->
+<ion-card>
+<ion-card-header> 内容</ion-card-header>
+<ion-card-content>这里是一些收藏内容的示例数据</ion-card-content>
+</ion-card>
+
+<!-- 收藏 -->
+<ion-card>
+<ion-card-header>收藏</ion-card-header>
+<ion-card-content>这里是一些收藏详情的示例数据</ion-card-content>
+</ion-card>
+
+<!-- 喜欢 -->
+<ion-card>
+<ion-card-header>
+喜欢
+</ion-card-header>
+<ion-card-content> 这里是一些喜欢详情的示例数据 </ion-card-content>
+</ion-card>
+
+<!-- 设置与反馈 -->
+<ion-card>
+  <ion-card-header>设置与反馈</ion-card-header>
+  <ion-card-content>这里是一些设置选项和意见反馈的示例数据</ion-card-content>
   </ion-card>
+ </div>
+
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,17 @@
+.middle-section {
+    display: flex;
+    justify-content: space-around;
+    overflow-x: auto;
+    white-space: nowrap;
+    margin-top: 20px; /* 添加顶部间距 */
+
+    .order-card,
+    .points-card,
+    .medals-card,
+    .create-card {
+    width: 110px;
+    height: 80px;
+    margin: 5px;
+    }
+ }
+