tabs

src/app/tab1/tab1.page.html

@@ -25,55 +25,30 @@
 </ion-header>
 
 <ion-content>
-  <ion-grid>
-    <ion-row>
-      <ion-col size="6">
-        <!-- Card 1 -->
-        <ion-card>
-          <img src="assets/image1.jpg">
-          <ion-card-content>
-            <ion-card-title>夏季最热门穿搭</ion-card-title>
-            <ion-row>
-              <ion-col size="1">
-                <ion-avatar>
-                  <img src="assets/user-avatar.jpg">
-                </ion-avatar>
-              </ion-col>
-              <ion-col size="6"></ion-col>
-              <ion-col size="2">
-                <ion-button fill="clear" (click)="like()">
-                  <ion-icon name="heart"></ion-icon> 100
-                </ion-button>
-              </ion-col>
-            </ion-row>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-      
-      <ion-col size="6">
-        <!-- Card 2 -->
-        <ion-card>
-          <img src="assets/image2.jpg">
-          <ion-card-content>
-            <ion-card-title>夏季最热门穿搭</ion-card-title>
-            <ion-row>
-              <ion-col size="1">
-                <ion-avatar>
-                  <img src="assets/user-avatar.jpg">
-                </ion-avatar>
-              </ion-col>
-              <ion-col size="6"></ion-col>
-              <ion-col size="2">
-                <ion-button fill="clear" (click)="like()">
-                  <ion-icon name="heart"></ion-icon> 200
-                </ion-button>
-              </ion-col>
-            </ion-row>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <div class="column-wrapper">
+    <div class="image-container">
+      <ion-card *ngFor="let item of items">
+        <img src="{{item.image}}" alt="Item Image">
+        <ion-card-header>
+          <ion-card-title>{{item.title}}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <div class="card-footer">
+            <div class="avatar-section">
+              <ion-avatar>
+                <img src="{{item.avatar}}" alt="Item Avatar">
+              </ion-avatar>
+            </div>
+            <div class="heart-section">
+              <ion-button fill="clear" (click)="like()">
+                <ion-icon name="heart"></ion-icon> {{item.likes}}
+              </ion-button>
+            </div>
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  </div>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button (click)="addNew()">

src/app/tab1/tab1.page.scss

@@ -3,7 +3,16 @@ ion-content {
 }
 
 ion-card {
-  margin: 10px;
+  break-inside: avoid;
+  margin: 0;
+  margin-bottom: 5px;
+  width: auto;
+  height: auto;
+}
+
+.column-wrapper {
+  column-count: 2;
+  column-gap: 5px; /* 列间距 */
 }
 
 ion-avatar {
@@ -14,31 +23,37 @@ ion-avatar {
 ion-button {
   --border-radius: 0;
 }
+
+ion-card-title{
+  font-size: 16px;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.avatar-section {
+  
+  bottom: 5px;
+  left: 5px;
+}
+
+.heart-section {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+}
 /*
-<ion-footer class="footer">
-  <ion-toolbar color="light">
-    <ion-buttons>
-      <ion-button [class.active]="selectedTab === 'home'" (click)="selectTab('home')">
-        <ion-button [routerLink]="'/tabs/tab1'" routerDirection="root">
-          <ion-icon name="home"></ion-icon>
-        </ion-button>
-      </ion-button>
-      <ion-button [class.active]="selectedTab === 'shop'" (click)="selectTab('shop')">
-        <ion-button [routerLink]="'/tabs/tab2'" routerDirection="root">
-          <ion-icon name="cart"></ion-icon>
-        </ion-button>
-      </ion-button>
-      <ion-button [class.active]="selectedTab === 'message'" (click)="selectTab('message')">
-        <ion-button [routerLink]="'/tabs/tab3'" routerDirection="root">
-          <ion-icon name="chatbox"></ion-icon>
-        </ion-button>
-      </ion-button>
-      <ion-button [class.active]="selectedTab === 'profile'" (click)="selectTab('profile')">
-        <ion-button [routerLink]="'/tabs/tab4'" routerDirection="root">
-          <ion-icon name="person"></ion-icon>
-        </ion-button>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-footer>
-*/
+.image-container{
+  position: relative;
+  overflow: hidden;
+}
+*/
+.image-container img{
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  object-position: center;
+}

src/app/tab1/tab1.page.ts

@@ -9,6 +9,14 @@ export class Tab1Page {
   segmentModel = 'follow';
   selectedTab = 'home';
 
+  items: any[] = [
+    { image: 'assets/image1.jpg', avatar: 'assets/user-avatar.jpg',title: '夏季热门穿搭',likes: '4662' },
+    { image: 'assets/image3.jpg', avatar: 'assets/user-avatar.jpg',title: '夏季热门穿搭',likes: '8564' },
+    { image: 'assets/image2.jpg', avatar: 'assets/user-avatar.jpg',title: '夏季热门穿搭',likes: '1241' },
+    { image: 'assets/image4.jpg', avatar: 'assets/user-avatar.jpg',title: '夏季热门穿搭',likes: '4.2w' },
+    // 添加更多项目
+  ];
+
   constructor() {}
 
   search() {

src/app/tab2/tab2.page.html

@@ -9,19 +9,19 @@
     
   </ion-toolbar>
   <div class="user-actions">
-    <ion-button color="light">
+    <ion-button color="#255,255,255">
       <ion-icon name="document"></ion-icon>
       我的订单
     </ion-button>
-    <ion-button color="light">
+    <ion-button color="#255,255,255">
       <ion-icon name="cart"></ion-icon>
       购物车
     </ion-button>
-    <ion-button color="light">
+    <ion-button color="#255,255,255">
       <ion-icon name="ticket"></ion-icon>
       红包/卡券
     </ion-button>
-    <ion-button color="light">
+    <ion-button color="#255,255,255">
       <ion-icon name="time"></ion-icon>
       浏览记录
     </ion-button>
@@ -51,20 +51,26 @@
   <!-- Content for each segment -->
   <ion-grid *ngIf="segmentModel === 'aiRecommend'">
     <!-- AI推荐内容 -->
-    <ion-row>
-      <ion-col size="6" *ngFor="let item of aiRecommendItems">
-        <ion-card>
-          <img src="{{item.image}}" />
-          <ion-card-content>
-            <ion-label>{{item.label}}</ion-label>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
+    <div class="column-wrapper">
+      <ion-card *ngFor="let item of aiRecommendItems">
+        <img src="{{item.image}}" />
+        <ion-card-content>
+          <ion-label>{{item.label}}</ion-label>
+        </ion-card-content>
+      </ion-card>
+    </div>
   </ion-grid>
 
   <ion-grid *ngIf="segmentModel === 'seasonHot'">
     <!-- 当季热门内容 -->
+    <div class="column-wrapper">
+      <ion-card *ngFor="let item of seasonHotItems">
+        <img src="{{item.image}}" />
+        <ion-card-content>
+          <ion-label>{{item.label}}</ion-label>
+        </ion-card-content>
+      </ion-card>
+    </div>
   </ion-grid>
 
   <ion-grid *ngIf="segmentModel === 'styleChange'">
@@ -78,4 +84,10 @@
   <ion-grid *ngIf="segmentModel === 'favoriteProducts'">
     <!-- 收藏商品内容 -->
   </ion-grid>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button (click)="toUp()" color="light">
+      <ion-icon name="arrow-up"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -14,7 +14,14 @@ ion-content {
 }
 
 ion-card {
-  margin: 10px;
+  break-inside: avoid;
+  margin: 0;
+  margin-bottom: 5px;
+}
+
+.column-wrapper {
+  column-count: 2;
+  column-gap: 5px; /* 列间距 */
 }
 
 img {
@@ -31,6 +38,8 @@ ion-label {
   margin-top: 5px;
   margin-bottom: 5px;
   ion-button{
+    font-size: 12px;
+    width: 100px;
     margin: 1 10px;
     margin-top: 5px;
     margin-bottom: 5px;

src/app/tab2/tab2.page.ts

@@ -10,8 +10,18 @@ export class Tab2Page {
   selectedTab = 'shop';
 
   aiRecommendItems = [
-    { image: 'assets/image4.jpg', label: 'Label 1' },
+    { image: 'assets/image1.jpg', label: '商品1' },
+    { image: 'assets/image4.jpg', label: '商品2' },
+    { image: 'assets/image2.jpg', label: '商品3' },
+    { image: 'assets/image3.jpg', label: '商品4' },
+    // Add more items as needed
+  ];
+
+  seasonHotItems = [
+    { image: 'assets/image1.jpg', label: 'Label 1' },
     { image: 'assets/image2.jpg', label: 'Label 2' },
+    { image: 'assets/image3.jpg', label: 'Label 3' },
+    { image: 'assets/image4.jpg', label: 'Label 4' },
     // Add more items as needed
   ];
 
@@ -20,4 +30,7 @@ export class Tab2Page {
   selectTab(tab: string) {
     this.selectedTab = tab;
   }
+  toUp(){
+
+  }
 }

src/app/tab3/tab3.page.ts

@@ -10,11 +10,11 @@ export class Tab3Page {
   selectedTab = 'message';
 
   messages = [
-    { avatar: 'assets/image4.jpg', title: '交易物流', content: '您购买的宝贝已签收', time: '星期二' },
-    { avatar: 'avatar_url_2', title: 'Message 2', content: 'Content of message 2', time: '11:30 AM' },
-    { avatar: 'avatar_url_2', title: 'Message 3', content: 'Content of message 3', time: '11:30 AM' },
-    { avatar: 'avatar_url_2', title: 'Message 4', content: 'Content of message 4', time: '11:30 AM' },
-    { avatar: 'avatar_url_2', title: 'Message 5', content: 'Content of message 5', time: '11:30 AM' },
+    { avatar: 'assets/image4.jpg', title: '交易物流', content: '您购买的宝贝已签收', time: '昨天' },
+    { avatar: 'assets/user-avatar.jpg', title: 'abab', content: '来自abab的穿搭分享', time: '昨天' },
+    { avatar: 'assets/image2.jpg', title: '客服机器人2号', content: '请确认收货地址', time: '星期五' },
+    { avatar: 'assets/image3.jpg', title: '穿搭小助手', content: '为您推荐', time: '星期四' },
+    { avatar: 'assets/image1.jpg', title: 'iakz', content: '互关', time: '星期一' },
     // Add more tab3s as needed
   ];
 

src/app/tab4/tab4.page.html

@@ -5,7 +5,6 @@
         <ion-icon name="menu"></ion-icon>
       </ion-button>
     </ion-buttons>
-    <ion-title>User tab4</ion-title>
     <ion-buttons slot="end">
       <ion-button>
         <ion-icon name="scan"></ion-icon>
@@ -18,7 +17,7 @@
 </ion-header>
 
 <ion-content>
-  <div class="user-tab4">
+  <div class="user-profile">
     <div class="user-info">
       <img src="assets/user-avatar.jpg" alt="User Avatar">
       <h3>不吃粉面菜蛋</h3>

src/app/tab4/tab4.page.scss

@@ -3,8 +3,9 @@ ion-content {
 }
 
 ion-card {
-  width: 120px;
+  width: auto;
   height: 200px;
+  border: 1px solid #d6d6d6;
 }
 
 .image-container{
@@ -21,9 +22,12 @@ ion-card {
 .header {
   --background: rgba(166, 66, 253, 0.7); /* 设置顶部工具栏背景色为紫白色渐变的半透明色 */
   color: #000000; /* 设置文字颜色为白色 */
+  ion-button{
+    color: #000000;
+  }
 }
 
-.user-tab4 {
+.user-profile {
   background: linear-gradient(to bottom, #a870da, #d6d5d6);
   color: #ffffff;
   padding: 20px;
@@ -81,6 +85,7 @@ ion-card {
       background-color: rgba(255, 255, 255, 0.3);
       color: #000000;
       border: 1px solid rgba(255, 255, 255, 0.3);
+      font-size: 14px;
       margin: 1 10px;
       width: 130px;
       height: 50px;