src/app/person/person.page.html

@@ -7,14 +7,14 @@
 <ion-content>
   <!-- 头像 -->
   <ion-card>
-    <ion-card-content>
-      <ion-avatar class="small-avatar">
-        <img src="assets/images/person/touxiang.jpg" alt="头像">
-      </ion-avatar>
-
+    <ion-card-content class="card-content">
+      <img src="assets/images/person/touxiang.jpg" class="touxiang" alt="头像">
+   
       <div class="container">
-        <ion-icon name="mail-outline" class="icon-mail"></ion-icon>
-      <ion-icon name="settings-outline" class="icon-settings"></ion-icon>
+        <div class="icon-group">
+          <ion-icon name="mail-outline" class="icon"></ion-icon>
+          <ion-icon name="settings-outline" class="icon"></ion-icon>
+        </div>
       </div>
     </ion-card-content>
   </ion-card>
@@ -25,37 +25,91 @@
       我的路线
     </ion-card-header>
     <ion-card-content>
-      你还没有规划路线哦
+      <p>你还没有规划路线哦</p>
     </ion-card-content>
   </ion-card>
 
   <!-- 收藏 -->
   <ion-card>
     <ion-card-header>
-      收藏
+      我的收藏
     </ion-card-header>
     <ion-card-content>
-      <ion-list>
-        <ion-item>
-          <ion-thumbnail slot="start">
-            <img src="assets/images/movie/movie4.jpg" alt="你的名字">
-          </ion-thumbnail>
-          <ion-label>
-            <h2>你的名字</h2>
-            <p>2016.12.12</p>
-          </ion-label>
-        </ion-item>
-        <ion-item>
-          <ion-thumbnail slot="start">
-            <img src="assets/images/movie/movie3.jpg" alt="龙兄虎弟">
-          </ion-thumbnail>
-          <ion-label>
-            <h2>龙兄虎弟</h2>
-            <p>2018.12.12</p>
-          </ion-label>
-        </ion-item>
-        <!-- 其他收藏 -->
-      </ion-list>
+      <div class="favorite-container">
+        <div class="movie-container">
+          <p>电影</p>
+          <ion-list>
+             <ion-item>              
+              <ion-thumbnail slot="start">           
+              <img src="assets/images/movie/movie4.jpg" alt="你的名字">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>你的名字</h2>
+                <p>2016.12.12</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-thumbnail slot="start">
+               <img src="assets/images/movie/movie3.jpg" alt="龙兄虎弟">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>龙兄虎弟</h2>
+                <p>2018.12.12</p>
+              </ion-label>
+            </ion-item>
+            <!-- 其他收藏 -->
+          </ion-list>
+        </div>
+        <div class="location-container">
+          <p>城市</p>
+          <ion-list>
+            <ion-item>              
+             <ion-thumbnail slot="start">           
+              <img src="assets/images/city/dongjing.jpg" alt="东京">
+             </ion-thumbnail>
+             <ion-label>
+               <h2>东京</h2>
+               <p>2023.8.12</p>
+             </ion-label>
+           </ion-item>
+           <ion-item>
+             <ion-thumbnail slot="start">
+              <img src="assets/images/city/bingdao.jpg" alt="冰岛">
+             </ion-thumbnail>
+             <ion-label>
+               <h2>冰岛</h2>
+               <p>2023.4.1</p>
+             </ion-label>
+           </ion-item>
+           <!-- 其他收藏 -->
+         </ion-list>
+        </div>     
+        <div class="location-container">
+          <p>地点</p>
+          <ion-list>
+            <ion-item>              
+             <ion-thumbnail slot="start">           
+              <img src="assets/images/place/place5.jpg" alt="中环至半山自动扶梯">
+             </ion-thumbnail>
+             <ion-label>
+               <h2>中环至半山自动扶梯</h2>
+               <p>2023.9.9</p>
+             </ion-label>
+           </ion-item>
+           <ion-item>
+             <ion-thumbnail slot="start">
+              <img src="assets/images/place/place8.jpg" alt="镰仓高校前路口">
+             </ion-thumbnail>
+             <ion-label>
+               <h2>镰仓高校前路口</h2>
+               <p>2023.12.12</p>
+             </ion-label>
+           </ion-item>
+           <!-- 其他收藏 -->
+         </ion-list>
+        </div>                 
+      </div>        
+         
     </ion-card-content>
   </ion-card>
 
@@ -72,7 +126,7 @@
           </ion-thumbnail>
           <ion-label>
             <h2>你的名字</h2>
-            <p>评论内容</p>
+            <p>画面十分唯美，每一帧都是壁纸</p>
             <p>2016.12.12</p>
           </ion-label>
         </ion-item>

src/app/person/person.page.scss

@@ -1,22 +1,30 @@
-.small-avatar img {
-    width: 50px; /* 设置头像图片宽度 */
-    height: 50px; /* 设置头像图片高度 */
+.touxiang {
+    width: 220px; /* 设置头像图片宽度 */
+    height: 150px; /* 设置头像图片高度 */
     object-fit: cover; /* 保持图片比例不变，裁剪超出容器的部分 */
   }
 
-  .icon-mail {
+  .icon {
     font-size: 2rem; /* 设置大图标的大小 */
-    
   }
   
-  .icon-settings {
-    font-size: 2rem; /* 设置小图标的大小 */
-    
-  }
 
-  .container {
+  .card-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
+  
+  .icon-group {
+    display: flex;
+    margin-left: 10px; /* 设置图标与头像之间的间距 */
+  }
+  
+  .icon {
+    margin-left: 20px; /* 设置图标之间的间距 */
+  }
+  
+  .location-container{
+    margin-top: 10px;
+  }

src/app/tab3/tab3.page.html

@@ -54,6 +54,11 @@
           </ion-label>
         </ion-item>
       </ion-list>
+      <ion-row>
+        <ion-col size="12">
+          <ion-button expand="full" color="light" shape="round" (click)="goToBlankPage()">more ></ion-button>
+        </ion-col>
+      </ion-row>
     </ion-card-content>
   </ion-card>
 

src/app/tab3/tab3.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
@@ -6,7 +7,11 @@ import { Component } from '@angular/core';
   styleUrls: ['tab3.page.scss']
 })
 export class Tab3Page {
+  constructor(private navCtrl: NavController) {}
 
-  constructor() {}
+  goToBlankPage() {
+    // 处理显示更多城市的逻辑
+    console.log('显示更多城市');
+  }
 
 }