app-angular/src/modules/lesson/user-tag/user-tag.component.html

@@ -10,11 +10,12 @@
     <ion-list [inset]="true">
         <ion-item-group>
             <ion-item-divider>
-                <ion-label>礼物🌟</ion-label>
+                <ion-label class="centered-text">礼物🌟</ion-label>
             </ion-item-divider>
             <ion-segment>
                 <ion-segment-button value="已得" (click)="cate='已得'">
                     <ion-label>收到➡️</ion-label>
+                    
                 </ion-segment-button>
                 <ion-segment-button value="未获" (click)="cate='未获'">
                     <ion-label>送出⬅️</ion-label>
@@ -24,27 +25,86 @@
                 <ion-item button detail="false" lines="full">
                     <ion-label>
                         <p>
-                            未获标签成就
+                        <ion-chip>
+                            <ion-avatar>
+                              <img alt="Silhouette of a person's head" src="../../assets/2.jpg" />
+                            </ion-avatar>
+                            <ion-label>葱葱</ion-label>
+                          </ion-chip>
+                          >
+                          <ion-chip>
+                            <ion-avatar>
+                              <img alt="Silhouette of a person's head" src="../../assets/3.jpg" />
+                            </ion-avatar>
+                            <ion-label>影影</ion-label>
+                          </ion-chip>
                         </p>
+                        <ion-card>
+                            <img alt="Silhouette of mountains" src="../../assets/23.png" />
+                            <ion-card-content>
+                             一束鲜花，愿她每天做自己
+                            </ion-card-content>
+                          </ion-card>
                         <ion-note>
-                            获取条件
+                          2024.5.20
+                        </ion-note>
+                    </ion-label>
+                </ion-item>
+                <ion-item button detail="false" lines="full">
+                    <ion-label>
+                        <p>
+                        <ion-chip>
+                            <ion-avatar>
+                              <img alt="Silhouette of a person's head" src="../../assets/2.jpg" />
+                            </ion-avatar>
+                            <ion-label>葱葱</ion-label>
+                          </ion-chip>
+                          >
+                          <ion-chip>
+                            <ion-avatar>
+                              <img alt="Silhouette of a person's head" src="../../assets/24.png" />
+                            </ion-avatar>
+                            <ion-label>亦玫</ion-label>
+                          </ion-chip>
+                        </p>
+                        <ion-card>
+                            <img alt="Silhouette of mountains" src="../../assets/25.png" />
+                            <ion-card-content>
+                            愿她保持童真，每天快乐
+                            </ion-card-content>
+                          </ion-card>
+                        <ion-note>
+                            2024.6.1
                         </ion-note>
                     </ion-label>
-                    <ion-buttons slot="end">
-                        <ion-button color="medium">
-                            <ion-icon name="heart-circle" size="large"></ion-icon>
-                        </ion-button>
-                    </ion-buttons>
                 </ion-item>
             </ng-container>
             <ng-container *ngIf="cate=='已得'">
                 <ion-item button detail="false" lines="full">
                     <ion-label>
                         <p>
-                            已享受10+特权
+                            <ion-chip>
+                                <ion-avatar>
+                                  <img alt="Silhouette of a person's head" src="../../assets/3.jpg" />
+                                </ion-avatar>
+                                <ion-label>影影</ion-label>
+                              </ion-chip>
+                              >
+                              <ion-chip>
+                                <ion-avatar>
+                                  <img alt="Silhouette of a person's head" src="../../assets/2.jpg" />
+                                </ion-avatar>
+                                <ion-label>葱葱</ion-label>
+                              </ion-chip>
                         </p>
+                        <ion-card>
+                            <img alt="Silhouette of mountains" src="../../assets/22.png" />
+                            <ion-card-content>
+                            她祝我永远漂亮
+                            </ion-card-content>
+                          </ion-card>
                         <ion-note>
-                            还有7天到期
+                            2024.3.10
                         </ion-note>
                     </ion-label>
                     <ion-buttons slot="end">
@@ -52,6 +112,34 @@
                         </ion-button>
                     </ion-buttons>
                 </ion-item>
+                <ion-item button detail="false" lines="full">
+                    <ion-label>
+                        <p>
+                        <ion-chip>
+                            <ion-avatar>
+                              <img alt="Silhouette of a person's head" src="../../assets/27.png" />
+                            </ion-avatar>
+                            <ion-label>张凌赫</ion-label>
+                          </ion-chip>
+                          >
+                          <ion-chip>
+                            <ion-avatar>
+                              <img alt="Silhouette of a person's head" src="../../assets/2.jpg" />
+                            </ion-avatar>
+                            <ion-label>葱葱</ion-label>
+                          </ion-chip>
+                        </p>
+                        <ion-card>
+                            <img alt="Silhouette of mountains" src="../../assets/26.png" />
+                            <ion-card-content>
+                           香水礼盒
+                            </ion-card-content>
+                          </ion-card>
+                        <ion-note>
+                            2024.6.1
+                        </ion-note>
+                    </ion-label>
+                </ion-item>
             </ng-container>
 
         </ion-item-group>

app-angular/src/modules/lesson/user-tag/user-tag.component.scss

@@ -15,4 +15,9 @@ ion-label {
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-}
+}
+.centered-text {
+    text-align: center;
+    width: 100%;
+  }
+