c

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

@@ -0,0 +1,18 @@
+ion-content {
+    height: calc(100vh - 121px) !important;
+}
+
+ion-item-divider {
+    ion-icon {
+        margin-right: 9px;
+    }
+}
+
+ion-label {
+    ion-note {
+        font-size: 0.7rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

app-angular/src/modules/lesson/user-block/user-block.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserBlockComponent } from './user-block.component';
+
+describe('UserBlockComponent', () => {
+  let component: UserBlockComponent;
+  let fixture: ComponentFixture<UserBlockComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserBlockComponent]
+    });
+    fixture = TestBed.createComponent(UserBlockComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/user-block/user-block.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-block',
+  templateUrl: './user-blockcomponent.html',
+  styleUrls: ['./user-block.component.scss']
+})
+export class UserBlockComponent {
+  cate: string = "已得"
+}

app-angular/src/modules/lesson/user-block/user-blockcomponent.html

@@ -0,0 +1,60 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-button routerLink="/lesson/me" fill="clear" color="dark">
+                <ion-icon name="chevron-back-outline" size="small"></ion-icon>返回</ion-button>
+        </ion-buttons>
+    </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-content>