fix:beautify-page3

paint-app/src/app/tab3/tab3.page.html

@@ -55,7 +55,7 @@
   </ion-list>
   <!-- 退出登录按钮 -->
   <div style="text-align: center; margin: 30px;">
-    <ion-button expand="block" color="danger" (click)="logOut()">退出登录</ion-button>
+    <ion-button expand="block" color="danger">退出登录</ion-button>
   </div>
     </ion-content>
   </ion-menu>
@@ -69,7 +69,7 @@
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">   
+    <ion-content>   
       <!-- 用户信息区域 -->
       <!-- <ion-list class="top-list">
         <ion-item (click)="router.navigate([userInfoPage])">
@@ -97,8 +97,97 @@
               </div>
             </div>
           </div>
-          <div class="lower">这个人好懒，什么都没有留下~</div>
+          <div class="lower">落霞与孤鹜齐飞，天水共长天一色</div>
+          <div class="count">
+            <div class="title">
+              <span>关注:0</span>
+              <span>粉丝:0</span>
+              <span>获赞:99</span>
+            </div>
+          </div>
         </div>
   </div>
+  <div class="icon-container">
+    <div class="icon-item">
+      <ion-icon name="folder-outline"></ion-icon>
+      <span>离线缓存</span>
+    </div>
+    <div class="icon-item">
+      <ion-icon name="time-outline"></ion-icon>
+      <span>历史记录</span>
+    </div>
+    <div class="icon-item">
+      <ion-icon name="star-outline"></ion-icon>
+      <span>我的收藏</span>
+    </div>
+    <div class="icon-item">
+      <ion-icon name="heart-outline"></ion-icon>
+      <span>我的喜欢</span>
+    </div>
+  </div>
+
+  <div style="margin-top: 60px;width: 100%;padding-left: 20px;"><p class="left-align">更多服务：</p></div>
+  <div class="icon-container">
+    <div class="icon-item">
+      <ion-icon name="folder-outline"></ion-icon>
+      <span>离线缓存</span>
+    </div>
+    <div class="icon-item">
+      <ion-icon name="time-outline"></ion-icon>
+      <span>历史记录</span>
+    </div>
+    <div class="icon-item">
+      <ion-icon name="star-outline"></ion-icon>
+      <span>我的收藏</span>
+    </div>
+    <div class="icon-item">
+      <ion-icon name="heart-outline"></ion-icon>
+      <span>我的喜欢</span>
+    </div>
+  </div>
+  <div class="icon-container">
+    <div class="icon-item">
+      <ion-icon name="folder-outline"></ion-icon>
+      <span>离线缓存</span>
+    </div>
+    <div class="icon-item">
+      <ion-icon name="time-outline"></ion-icon>
+      <span>历史记录</span>
+    </div>
+    <div class="icon-item">
+      <ion-icon name="star-outline"></ion-icon>
+      <span>我的收藏</span>
+    </div>
+    <div class="icon-item">
+      <ion-icon name="heart-outline"></ion-icon>
+      <span>我的喜欢</span>
+    </div>
+  </div>
+  <div style="margin-top: 60px;width: 100%;">
+    <div style="width: 100%;padding-left: 20px;"><p class="left-align">更多服务：</p></div>
+  <ion-list lines="none">
+    <ion-item>
+      <ion-icon slot="start" name="person-outline" style="font-size: 20px;"></ion-icon>
+      <ion-label>个人信息</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="shield-outline"style="font-size: 20px;"></ion-icon>
+      <ion-label>安全隐私</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="call-outline"style="font-size: 20px;"></ion-icon>
+      <ion-label>联系客服</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="lock-closed-outline"style="font-size: 20px;"></ion-icon>
+      <ion-label>隐私政策</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
+    </ion-item>
+  </ion-list>
+</div>
+</ion-content>
+
 
-</ion-content>

paint-app/src/app/tab3/tab3.page.scss

@@ -39,9 +39,9 @@
   
   .top {
     position: relative;
-    padding-top: 80px; /* 使用 px 替代 rpx */
+    padding-top: 30px; /* 使用 px 替代 rpx */
     width: 100%;
-    height: 400px; /* 使用 px 替代 rpx */
+    height: 300px; /* 使用 px 替代 rpx */
   }
   
   .top:after {
@@ -104,4 +104,60 @@
   line-height: 100px; 
   font-size: 16px; 
   color: #b3dffe;
+}
+
+.count {
+  display: flex; /* 使用弹性盒布局，使子元素能够灵活排列 */
+  margin: auto;
+  width: 200px; /* 设置元素的宽度为 350 像素 */
+  line-height: 16px; /* 设置行高为 80 像素，增加文本行之间的垂直间距 */
+  border-radius: 50px; /* 设置边框半径为 50 像素，使元素的角变圆润 */
+  background-color:   #426db5;
+  // box-shadow: 0 3px 9px #bdbdbd; /* 添加阴影效果，使元素看起来有浮起的效果 */
+}
+
+.title {
+  width: auto;
+  display: flex; /* 将元素设置为弹性盒布局，使子元素能够灵活排列 */
+  justify-content: center; /* 在主轴上居中对齐子元素 */
+  align-items: center; /* 在交叉轴上居中对齐子元素 */
+}
+
+.title img {
+  width: 30px; 
+  height: auto;
+}
+
+.title span {
+  font-size: 16px; 
+  padding-left: 15px; 
+  color: #b3dffe;
+}
+
+
+.icon-container {
+  margin-top: 10px;
+  display: flex; /* 使用弹性盒布局 */
+  justify-content: space-around; /* 在主轴上均匀分配空间 */
+}
+
+.icon-container1 {
+  margin-top: 40px;
+  display: flex; /* 使用弹性盒布局 */
+  justify-content: space-around; /* 在主轴上均匀分配空间 */
+}
+
+.icon-item {
+  text-align: center; /* 使文本居中对齐 */
+}
+
+.icon-item ion-icon {
+  font-size: 25px; /* 设置图标大小 */
+  margin-bottom: 10px; /* 图标与文本之间的间距 */
+}
+
+.icon-item span {
+  display: block; /* 将文本设置为块级元素，以便于控制布局 */
+  font-size: 16px; /* 设置文本大小 */
+  color: #333; /* 设置文本颜色 */
 }

paint-app/src/app/tab3/tab3.page.ts

@@ -1,27 +1,24 @@
-import { Component } from '@angular/core';
+import { Component,EnvironmentInjector,inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Router } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
+import { IonBadge, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonList, IonMenu, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonLabel } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {folderOutline,timeOutline,starOutline,heartOutline,chevronForwardOutline,personOutline,shieldOutline,callOutline,lockClosedOutline} from 'ionicons/icons';
+addIcons({folderOutline,timeOutline,starOutline,heartOutline,chevronForwardOutline,personOutline,shieldOutline,callOutline,lockClosedOutline})
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [CommonModule,IonicModule],
+  imports: [CommonModule,IonIcon,IonLabel,IonList,IonButton,IonMenu,IonToolbar,IonMenuButton,IonTitle,IonButtons,IonItem,IonHeader,IonContent,IonBadge],
 })
 export class Tab3Page {
-  userInfoPage = '/user-info'; // 用户信息页面的路由
-  userName = 'devilx';
-  userPhone = '18600001111';
 
-  constructor(public router: Router) {}
-
-  logOut() {
-    console.log('退出登录');
-    // 在这里处理退出逻辑
-    // this.authService.logout();
-    // 或者使用router进行跳转到登录页面
-    this.router.navigate(['/login']);
+  public environmentInjector = inject(EnvironmentInjector);
+  constructor() {
+    addIcons({ folderOutline,timeOutline,starOutline,heartOutline});
   }
+
+ 
 }