tab

src/app/tab1/tab1.page.html

@@ -1,17 +1,37 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
+
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+ 
+  <ion-header>
     <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
+      <ion-segment value="all">
+        <ion-segment-button value="attention">
+          <ion-label>关注</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="recommend">
+          <ion-label>推荐</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="special">
+          <ion-label>专题</ion-label>
+        </ion-segment-button>
+      </ion-segment>
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+  <ion-card>
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+    
+    <ion-card-content>
+      Here's a small text description for the card content. Nothing more, nothing less.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+    
+    <ion-card-content>
+      Here's a small text description for the card content. Nothing more, nothing less.
+    </ion-card-content>
+  </ion-card>
+
 </ion-content>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,22 @@
+
+  ion-card {
+    width: 45%; /* 设置卡片宽度为45% */
+    margin: 0 2.5%; /* 设置卡片之间的间距为5% */
+    display: inline-block; /* 设置卡片为内联块级元素，使其在同一行显示 */
+  }
+  
+  
+  ion-content {
+    display: flex;
+    flex-direction: row; /* 设置子元素水平排列 */
+    justify-content: space-between; /* 在父容器中平均分布子元素 */
+  }
+ 
+  ion-card-content {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2; /* 设置最多显示两行文字 */
+    max-height: 2.6em; /* 控制最大高度，相当于两行文字的高度 */
+  }

src/app/tab2/tab2.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 2
+      发现
     </ion-title>
   </ion-toolbar>
 </ion-header>

src/app/tab3/tab3.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 3
+      我的
     </ion-title>
   </ion-toolbar>
 </ion-header>