new16

travel-app/src/app/tab4/tab4.page.html

@@ -1,16 +1,11 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
 
-<ion-content [fullscreen]="true">
 
+<ion-content [fullscreen]="true">
 
+<!-- 头像和昵称 -->
+<div class="information">
   <ion-item lines="none">
-    <ion-thumbnail slot="start">
+    <ion-thumbnail slot="start" class="rounded-avatar">
       <img alt="头像" src="https://cdn.dribbble.com/userupload/8724892/file/original-262c901f17794fa6f91d0e961224d6c8.jpg?resize=1024x682&vertical=center" />
     </ion-thumbnail>
 
@@ -19,6 +14,7 @@
       <p>158****6846</p>
     </ion-label>
   </ion-item>
+</div>
 
   <div class="stats">
     <ion-grid>

travel-app/src/app/tab4/tab4.page.scss

@@ -1,24 +1,50 @@
-    .card-container ion-card {
-        margin: 5px; /* 或者更小的值 */
-    }
-    /*定义icon和文本居中放置*/
-      ion-col {
-        text-align: center; /* 使列内的文本和图标水平居中 */
-      }
-      
-      ion-icon {
-        display: inline-block; /* 确保图标作为内联块元素显示 */
-      }
-      ion-content {
-        --background: #FEFAE0;
-      }
-      ion-item {
-        --background: #FEFAE0;
-      }
-      ion-button {
-        text-align: center; /* 使列内的文本和图标水平居中 */
-        color: #FEFAE0;
-      }
+.card-container ion-card {
+    margin: 5px; /* 或者更小的值 */
+
+}
+.information {
+  margin-top: 20px;
+}
+.rounded-avatar {
+  width: 85px; 
+  height: 85px; 
+  border-radius: 50%; /* 使头像变成圆形 */
+  overflow: hidden; /* 防止图片超出圆形边界 */
+}
+
+.rounded-avatar img {
+  width: 100%; /* 使图片充满整个ion-thumbnail */
+  height: 100%; /* 使图片充满整个ion-thumbnail */
+  object-fit: cover; /* 保持图片的比例，同时填充整个容器 */
+}
+
+/*定义icon和文本居中放置*/
+ion-col {
+  text-align: center; /* 使列内的文本和图标水平居中 */
+}
+ion-icon {
+  display: inline-block; /* 确保图标作为内联块元素显示 */
+}
+ion-content {
+  --background:#F5EBE0;
+}
+ion-item {
+  --background: #F5EBE0;
+}
+ion-button {
+  text-align: center; /* 使列内的文本和图标水平居中 */
+  color: #F5EBE0;
+}
+
+ion-card {
+  --background: #D6CCC2;
+  --color: #2f2f2f;
+}
+
+ion-card-title {
+  --color: #2f2f2f;
+}
+
 h1 {
     margin-bottom: -20px;
 }