tab4

src/app/tab1/tab1.page.html

@@ -53,7 +53,7 @@
       <ion-col size="6">
         <!-- Card 2 -->
         <ion-card>
-          <img src="assets/image1.jpg">
+          <img src="assets/image2.jpg">
           <ion-card-content>
             <ion-card-title>夏季最热门穿搭</ion-card-title>
             <ion-row>

src/app/tab2/tab2.page.html

@@ -67,12 +67,14 @@
     <ion-grid>
       <ion-row>
         <ion-col size="4" *ngFor="let item of items">
-          <ion-card>
-            <img src="{{item.image}}" alt="Item Image">
-            <ion-card-content>
-              <ion-icon name="heart"></ion-icon> {{item.likes}}
-            </ion-card-content>
-          </ion-card>
+          <div class="image-container">
+            <ion-card>
+              <img src="{{item.image}}" alt="Item Image">
+              <ion-card-content>
+                <ion-icon name="heart"></ion-icon> {{item.likes}}
+              </ion-card-content>
+            </ion-card>
+          </div>
         </ion-col>
       </ion-row>
     </ion-grid>

src/app/tab2/tab2.page.scss

@@ -6,6 +6,17 @@ ion-card {
   width: 150px;
   height: 210px;
 }
+
+.image-container{
+  position: relative;
+  overflow: hidden;
+}
+.image-container img{
+  width: 100%;
+  height: 80%;
+  object-fit: contain;
+  object-position: center;
+}
 .header {
   --background: rgba(166, 66, 253, 0.7); /* 设置顶部工具栏背景色为紫白色渐变的半透明色 */
   color: #000000; /* 设置文字颜色为白色 */

src/app/tab2/tab2.page.ts

@@ -9,8 +9,8 @@ export class Tab2Page {
   selectedTab = 'profile';
   items: any[] = [
     { image: 'assets/image1.jpg', likes: 100 },
-    { image: 'assets/image1.jpg', likes: 150 },
-    { image: 'assets/image1.jpg', likes: 120 },
+    { image: 'assets/image2.jpg', likes: 150 },
+    { image: 'assets/image4.jpg', likes: 120 },
     // 添加更多项目
   ];
 

src/app/tab4/tab4.page.html

@@ -20,24 +20,19 @@
 </ion-header>
 
 <ion-content>
-  <ion-grid>
-    <ion-row>
-      <ion-col size="12">
-        <ion-card *ngFor="let message of messages">
-          <ion-card-header>
-            <ion-avatar>
-              <img src="{{message.avatar}}">
-            </ion-avatar>
-            <ion-card-title>{{message.title}}</ion-card-title>
-            <ion-card-subtitle>{{message.time}}</ion-card-subtitle>
-          </ion-card-header>
-          <ion-card-content>
-            {{message.content}}
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <ion-list>
+    <ion-item *ngFor="let message of messages">
+      <ion-avatar slot="start">
+        <img *ngIf="message.avatar" [src]="message.avatar" />
+        <ion-icon *ngIf="!message.avatar" name="person-circle"></ion-icon>
+      </ion-avatar>
+      <ion-label>
+        <h2>{{message.title}}</h2>
+        <p>{{message.content}}</p>
+      </ion-label>
+      <ion-label slot="end">{{message.time}}</ion-label>
+    </ion-item>
+  </ion-list>
 </ion-content>
 
 <ion-footer>

src/app/tab4/tab4.page.scss

@@ -11,6 +11,9 @@ ion-avatar {
   height: 50px;
 }
 
+ion-item {
+  --inner-padding-end: 60px; /* Adjust as needed */
+}
 ion-button {
   --border-radius: 0;
 }