tab2

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>
@@ -13,5 +13,27 @@
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
+  <div class="image-container">
+    <!-- 第七张照片 -->
+    <div class="photo-section">
+      <div class="time-display">
+        <!-- 第七张照片的时间 -->
+        <p>2024-07-07 14:00</p>
+      </div>
+      <ion-img src="assets/photos/photo7.jpg" class="top-image"></ion-img>
+    </div>
+
+    <!-- 前六张照片 -->
+    <div class="photo-section">
+      <div class="time-display">
+        <!-- 前六张照片的时间 -->
+        <p>2024-07-07 12:00</p>
+      </div>
+      <div class="bottom-images">
+        <ion-card *ngFor="let photo of ['photo6.jpg', 'photo5.jpg', 'photo4.jpg', 'photo3.jpg', 'photo2.jpg', 'photo1.jpg']">
+          <ion-img src="assets/photos/{{ photo }}"></ion-img>
+        </ion-card>
+      </div>
+    </div>
+  </div>
 </ion-content>

app/tab2/tab2.page.scss

@@ -0,0 +1,44 @@
+.image-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 20px 0;
+  
+    .photo-section {
+      width: 100%;
+      text-align: center;
+      margin-bottom: 20px;
+      position: relative;
+  
+      .time-display {
+        position: relative;
+        font-size: 16px;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.5);
+        padding: 5px 10px;
+        border-radius: 5px;
+        margin-bottom: 10px;
+      }
+  
+      ion-card {
+        width: 100%; /* 每张照片占据整行 */
+        max-width: 300px; /* 最大宽度 */
+        margin: 0 auto; /* 居中显示 */
+      }
+  
+      ion-card ion-img {
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+      }
+    }
+  
+    .top-image {
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+      margin-bottom: 10px;
+    }
+  }
+  

app/tabs/tabs.page.ts

@@ -19,4 +19,5 @@ export class TabsPage {
     // 在此添加更多处理逻辑，比如导航到特定页面或执行某个操作
     this.optionsVisible = false; // 选择后隐藏选项
   }
+  
 }