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

@@ -7,54 +7,66 @@
     </ion-toolbar>
 </ion-header>
 <ion-content color="light">
-    <ion-list [inset]="true">
-        <ion-item-group>
-            <ion-item-divider>
-                <ion-label>礼物🌟</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>
-                </ion-segment-button>
-            </ion-segment>
-            <ng-container *ngIf="cate=='未获'">
-                <ion-item button detail="false" lines="full">
-                    <ion-label>
-                        <p>
-                            未获标签成就
-                        </p>
-                        <ion-note>
-                            获取条件
-                        </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+特权
-                        </p>
-                        <ion-note>
-                            还有7天到期
-                        </ion-note>
-                    </ion-label>
-                    <ion-buttons slot="end">
-                        <ion-button color="danger">
-                        </ion-button>
-                    </ion-buttons>
-                </ion-item>
-            </ng-container>
-
-        </ion-item-group>
-    </ion-list>
-
+    <ion-item>
+        <ion-buttons slot="end">
+            <ion-button color="dark">
+                <ion-icon name="search-outline"></ion-icon>
+                搜索
+            </ion-button>
+            <ion-button color="dark">
+                <ion-icon name="create-outline"></ion-icon>
+                编辑
+            </ion-button>
+        </ion-buttons>
+    </ion-item>
+    <ion-segment [scrollable]="true" value="heart">
+        <ion-segment-button value="home">
+          <ion-icon name="camera"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="heart">
+          <ion-icon name="laptop"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="pin">
+          <ion-icon name="newspaper"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="star">
+          <ion-icon name="fish"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="call">
+          <ion-icon name="logo-reddit"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="globe">
+          <ion-icon name="globe"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="basket">
+          <ion-icon name="basket"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="barbell">
+          <ion-icon name="prism"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="trash">
+          <ion-icon name="magnet"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="person">
+          <ion-icon name="film"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>
+      <ion-item>
+        <ion-avatar slot="start">
+          <img alt="Silhouette of a person's head" src="../../assets/24.png" />
+        </ion-avatar>
+        <ion-label>小黄</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-avatar slot="start">
+          <img alt="Silhouette of a person's head" src="../../assets/27.png" />
+        </ion-avatar>
+        <ion-label>张凌赫</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-avatar slot="start">
+          <img alt="Silhouette of a person's head" src="../../assets/7.jpg" />
+        </ion-avatar>
+        <ion-label>boss刘</ion-label>
+      </ion-item>
 </ion-content>