tab1.page.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <ion-header [translucent]="true">
  2. <ion-toolbar class="custom-toolbar">
  3. <!-- 天气组件 -->
  4. <app-weather [temp]="21" [position]="'南昌'"></app-weather>
  5. <!-- 搜索框 -->
  6. <ion-searchbar
  7. slot="end"
  8. placeholder="搜索景点"
  9. class="searchbar"
  10. value="搜索景点"
  11. ></ion-searchbar>
  12. </ion-toolbar>
  13. </ion-header>
  14. <ion-content>
  15. <div class="main-container">
  16. <ion-content>
  17. <div class="image-container">
  18. <img
  19. src="../../assets/images/tengwangge.png"
  20. alt="Descriptive Image Alt Text"
  21. />
  22. <button class="play-button">畅玩南昌</button>
  23. </div>
  24. <div class="content-container">
  25. <ion-grid>
  26. <ion-row>
  27. <!-- 第一行 -->
  28. <ion-col size="4">
  29. <app-edittag
  30. iconName="people"
  31. label="一起游"
  32. route="/play-together"
  33. ></app-edittag>
  34. </ion-col>
  35. <ion-col size="4">
  36. <app-edittag
  37. iconName="compass"
  38. label="景点推荐"
  39. (click)="goViewplacePage()"
  40. ></app-edittag>
  41. </ion-col>
  42. <ion-col size="4">
  43. <app-edittag
  44. iconName="help-circle"
  45. label="一键求助"
  46. route="/get-help"
  47. ></app-edittag>
  48. </ion-col>
  49. </ion-row>
  50. <ion-row>
  51. <!-- 第二行 -->
  52. <ion-col size="4">
  53. <app-edittag
  54. iconName="people"
  55. label="一起游玩"
  56. route="/play-with-others"
  57. ></app-edittag>
  58. </ion-col>
  59. <ion-col size="4">
  60. <app-edittag
  61. iconName="calendar"
  62. label="活动日历"
  63. route="/event-calendar"
  64. ></app-edittag>
  65. </ion-col>
  66. <ion-col size="4">
  67. <app-edittag
  68. iconName="chatbubbles"
  69. label="游客互动"
  70. route="/visitor-interaction"
  71. ></app-edittag>
  72. </ion-col>
  73. </ion-row>
  74. </ion-grid>
  75. </div>
  76. <ion-content>
  77. <div class="hot-articles-container">
  78. <h2>热门文章</h2>
  79. <ion-list>
  80. <ion-item *ngFor="let article of articles">
  81. <ion-label>
  82. <h3>{{ article.title }}</h3>
  83. <p>{{ article.summary }}</p>
  84. </ion-label>
  85. <ion-button fill="clear" slot="end">
  86. <ion-icon name="arrow-forward"></ion-icon>
  87. </ion-button>
  88. </ion-item>
  89. </ion-list>
  90. </div>
  91. </ion-content>
  92. </ion-content>
  93. </div>
  94. </ion-content>