app-gift/app-angular/src/modules/lesson/they-detail/they-detail.component.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-button routerLink="/lesson/they" fill="clear" color="dark">
                <ion-icon name="chevron-back-outline" size="small"></ion-icon>
                返回
            </ion-button>
        </ion-buttons>
        <ion-buttons slot="end">
            <ion-button>
                <ion-icon name="arrow-redo-outline"></ion-icon>
                分享
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content color="light">
    <!-- 用户信息 -->
    <ion-card>
        <ion-card-header>
            <ion-item lines="full">
                <ion-avatar slot="start">
                    <img alt="头像" [src]="they?.get('avatar')" />
                </ion-avatar>
                <ion-label>{{they?.get("name")}}</ion-label>
                <ion-button slot="end">
                    <ion-icon name="heart-outline" size="small"></ion-icon>
                    <ion-label>关注</ion-label>
                </ion-button>
            </ion-item>
            <ion-card-title>
                <ion-list *ngIf="they?.get('tag')?.length">
                    <ion-note lines="none" *ngFor="let t of they?.get('tag')" class="tags">{{t}}</ion-note>
                </ion-list>
            </ion-card-title>
            <ion-card-subtitle>注册时间：{{they?.get("createdAt") |date: 'YYYY/MM/dd'||"注册时间"}}</ion-card-subtitle>
            <ion-card-subtitle>{{they?.get("gender"||"性别")}}|{{they?.get("age")||"年龄"}}|星座|地址|身份|邮箱|...</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
            简单的自我介绍...
        </ion-card-content>
    </ion-card>

    <!-- 列表 -->
    <ion-card class="theyLists">
        <ion-button fill="clear">
            <ion-icon name="restaurant-outline" color="medium"></ion-icon>
            <ion-note>关注</ion-note>
        </ion-button>
        <ion-button fill="clear">
            <ion-icon name="medal-outline" color="medium"></ion-icon>
            <ion-note>会员</ion-note>
        </ion-button>
        <ion-button fill="clear">
            <ion-icon name="extension-puzzle-outline" color="medium"></ion-icon>
            <ion-note>收藏</ion-note>
        </ion-button>
    </ion-card>
    
    <ion-card>
        <ion-segment value="推荐">
            <ion-segment-button value="推荐">
                <ion-label>我的宠物档案</ion-label>
            </ion-segment-button>
        </ion-segment>
    </ion-card>

    <ion-item button detail="false" lines="none" class="tip">
        <ion-label color="medium">
            还未有档案记录呢
        </ion-label>
    </ion-item>

</ion-content>