|
@@ -1,17 +1,81 @@
|
|
|
-<ion-header [translucent]="true">
|
|
|
+<ion-header>
|
|
|
<ion-toolbar>
|
|
|
- <ion-title>
|
|
|
- Tab 3
|
|
|
- </ion-title>
|
|
|
+ <ion-title>我的</ion-title>
|
|
|
+ <!-- 编辑信息按钮 -->
|
|
|
+ <ion-buttons slot="end">
|
|
|
+ <ion-button routerLink="/user/info">
|
|
|
+ <ion-icon slot="start" name="create-outline"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ <ion-button id="myMenu">
|
|
|
+ <ion-icon name="menu-outline"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ <ion-popover trigger="myMenu" triggerAction="click">
|
|
|
+ <ng-template>
|
|
|
+ <ion-list>
|
|
|
+ <ion-item [button]="true">
|
|
|
+ <ion-icon name="scan-outline" size="small"></ion-icon>
|
|
|
+ <ion-text>扫一扫</ion-text>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item [button]="true">
|
|
|
+ <ion-icon name="share-social-outline" size="small"></ion-icon>
|
|
|
+ <ion-text>分享</ion-text>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item [button]="true">
|
|
|
+ <ion-icon name="pulse-outline" size="small"></ion-icon>
|
|
|
+ <ion-text>客服</ion-text>
|
|
|
+ </ion-item>
|
|
|
+
|
|
|
+ <ion-item [button]="true">
|
|
|
+ <ion-icon name="settings-outline" size="small"></ion-icon>
|
|
|
+ <ion-text>设置</ion-text>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+ </ng-template>
|
|
|
+ </ion-popover>
|
|
|
+ </ion-buttons>
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
+<ion-content color="light">
|
|
|
+ <!-- 基本信息栏 -->
|
|
|
+ <ion-card>
|
|
|
+ <ion-list [inset]="true">
|
|
|
+ <ion-item lines="full">
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ {{'昵称'}}
|
|
|
+ </ion-label>
|
|
|
+ <ion-buttons slot="end">
|
|
|
+ <ion-button>
|
|
|
+ <ion-icon name="heart-outline"></ion-icon>
|
|
|
+ <ion-note>{{'99'}}</ion-note>
|
|
|
+ </ion-button>
|
|
|
+ </ion-buttons>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item lines="none">
|
|
|
+ <ion-badge slot="start">{{'标签'}}</ion-badge>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item lines="none">
|
|
|
+ <ion-label color="medium">
|
|
|
+ {{'介绍一下自己吧'}}
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+ </ion-card>
|
|
|
|
|
|
-<ion-content [fullscreen]="true">
|
|
|
- <ion-header collapse="condense">
|
|
|
- <ion-toolbar>
|
|
|
- <ion-title size="large">Tab 3</ion-title>
|
|
|
- </ion-toolbar>
|
|
|
- </ion-header>
|
|
|
-
|
|
|
- <app-explore-container name="Tab 3 page"></app-explore-container>
|
|
|
-</ion-content>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <ion-card class="myList">
|
|
|
+ <ion-list [inset]="true">
|
|
|
+ <ion-item button detail="true">
|
|
|
+ <ion-label>
|
|
|
+ <ion-note>关注</ion-note>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item button detail="true">
|
|
|
+ <ion-label>
|
|
|
+ <ion-note>收藏</ion-note>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+ </ion-card>
|