|
@@ -1,17 +1,144 @@
|
|
|
-<ion-header [translucent]="true">
|
|
|
+<ion-header>
|
|
|
<ion-toolbar>
|
|
|
- <ion-title>
|
|
|
- Tab 3
|
|
|
- </ion-title>
|
|
|
+ <ion-title>我的</ion-title>
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
|
|
|
-<ion-content [fullscreen]="true">
|
|
|
- <ion-header collapse="condense">
|
|
|
- <ion-toolbar>
|
|
|
- <ion-title size="large">Tab 3</ion-title>
|
|
|
- </ion-toolbar>
|
|
|
- </ion-header>
|
|
|
+<ion-content>
|
|
|
+ <!-- 顶部个人信息 -->
|
|
|
+ <ion-card>
|
|
|
+ <ion-item>
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <img [src]="userInfo.avatarUrl" />
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{ userInfo.username }}</h2>
|
|
|
+ <p>{{ userInfo.nickname }}</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item lines="none">
|
|
|
+ <ion-button fill="outline" slot="end">添加认证信息</ion-button>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item lines="none">
|
|
|
+ <ion-label>
|
|
|
+ 关注 {{ userInfo.following }} | 被关注 {{ userInfo.followers }} | 收藏 {{ userInfo.favorites }} | 最近浏览 {{ userInfo.recentViews }}
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-card>
|
|
|
|
|
|
- <app-explore-container name="Tab 3 page"></app-explore-container>
|
|
|
+ <!-- 会员 -->
|
|
|
+ <ion-card>
|
|
|
+ <ion-item lines="none">
|
|
|
+ <ion-label>年卡限时 5 折</ion-label>
|
|
|
+ <ion-note slot="end">最低 0.3 元/天</ion-note>
|
|
|
+ </ion-item>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <!-- 功能区域 -->
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="4">
|
|
|
+ <ion-button fill="clear" (click)="goToBookshelf()">
|
|
|
+ <ion-icon name="book" slot="icon-only"></ion-icon>
|
|
|
+ 书架
|
|
|
+ </ion-button>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col size="4">
|
|
|
+ <ion-button fill="clear" (click)="goToWallet()">
|
|
|
+ <ion-icon name="wallet" slot="icon-only"></ion-icon>
|
|
|
+ 钱包
|
|
|
+ </ion-button>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col size="4">
|
|
|
+ <ion-button fill="clear" (click)="goToActivitySquare()">
|
|
|
+ <ion-icon name="thumbs-up" slot="icon-only"></ion-icon>
|
|
|
+ 超赞包
|
|
|
+ </ion-button>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col size="4">
|
|
|
+ <ion-button fill="clear" (click)="goToHelpAndSupport()">
|
|
|
+ <ion-icon name="help-circle" slot="icon-only"></ion-icon>
|
|
|
+ 付费咨询
|
|
|
+ </ion-button>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col size="4">
|
|
|
+ <ion-button fill="clear">
|
|
|
+ <ion-icon name="document" slot="icon-only"></ion-icon>
|
|
|
+ 已购
|
|
|
+ </ion-button>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+
|
|
|
+ <!-- 其他信息 -->
|
|
|
+ <ion-card>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>Hi,开启源享创作之旅</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item lines="none">
|
|
|
+ <ion-label>新人报到和源友们打个招呼</ion-label>
|
|
|
+ <ion-button slot="end" fill="outline">去发布</ion-button>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>回答问题</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item lines="none">
|
|
|
+ <ion-label>有没有编程基础能填报计算机专业吗?</ion-label>
|
|
|
+ <ion-button slot="end" fill="outline">写回答</ion-button>
|
|
|
+ </ion-item>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <!-- 活动与讨论 -->
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col>
|
|
|
+ <ion-card>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>创作活动</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item lines="none">
|
|
|
+ <ion-label>有奖活动进行中</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col>
|
|
|
+ <ion-card>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>热门讨论</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item lines="none">
|
|
|
+ <ion-label>我的摄影日记</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+
|
|
|
+ <!-- 知乎数据 -->
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ion-col size="6">
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>我的源享</ion-label>
|
|
|
+ <ion-note slot="end">1610 天</ion-note>
|
|
|
+ </ion-item>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col size="6">
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>收到互动</ion-label>
|
|
|
+ <ion-note slot="end">计算中</ion-note>
|
|
|
+ </ion-item>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col size="6">
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>我的徽章</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col size="6">
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>我的创作</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
</ion-content>
|