tab3.page.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <ion-header [translucent]="true">
  2. <ion-toolbar color="primary">
  3. <ion-title>
  4. 消息
  5. </ion-title>
  6. <ion-button (click)="openSettingsPage()">
  7. <ion-icon name="settings-outline"></ion-icon>
  8. <ion-label>设置</ion-label>
  9. </ion-button>
  10. </ion-toolbar>
  11. </ion-header>
  12. <ion-content>
  13. <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
  14. <ion-toolbar>
  15. <ion-segment value="explore">
  16. <ion-segment-button value="explore">
  17. <ion-icon name="chatbubble-ellipses"></ion-icon>
  18. 评论和回复
  19. </ion-segment-button>
  20. <ion-segment-button value="video">
  21. <ion-icon name="thumbs-up"></ion-icon>
  22. 赞与收藏
  23. </ion-segment-button>
  24. <ion-segment-button value="search">
  25. <ion-icon name="person-add"></ion-icon>
  26. 新增关注
  27. </ion-segment-button>
  28. <ion-segment-button value="system">
  29. <ion-icon name="notifications"></ion-icon>
  30. 系统消息
  31. </ion-segment-button>
  32. </ion-segment>
  33. </ion-toolbar>
  34. <ion-card>
  35. <ion-card-header>
  36. <ion-card-title>最新推荐</ion-card-title>
  37. </ion-card-header>
  38. <ion-card-content>
  39. <ion-avatar slot="start">
  40. <ion-img src="assets/avatar.jpg"></ion-img>
  41. </ion-avatar>
  42. <ion-label>用户名</ion-label>
  43. <ion-label>标签</ion-label>
  44. <ion-label>聊天内容</ion-label>
  45. <ion-button expand="block">免费提问</ion-button>
  46. </ion-card-content>
  47. </ion-card>
  48. </ion-content>