tab1.page.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <ion-header>
  2. <ion-toolbar>
  3. <ion-buttons slot="start">
  4. <ion-button>
  5. <ion-icon name="logo-android"></ion-icon>
  6. </ion-button>
  7. </ion-buttons>
  8. <ion-title>生活智伴</ion-title>
  9. <ion-buttons slot="end">
  10. <ion-button (click)="openSettings()">
  11. <ion-icon name="settings"></ion-icon>
  12. </ion-button>
  13. <ion-button (click)="openProfile()">
  14. <ion-icon name="person-circle"></ion-icon>
  15. </ion-button>
  16. </ion-buttons>
  17. </ion-toolbar>
  18. </ion-header>
  19. <ion-content>
  20. <!-- 注册与登录 -->
  21. <div class="login-register">
  22. <ion-button expand="full" (click)="goToRegister()">注册</ion-button>
  23. <ion-button expand="full" (click)="goToLogin()">登录</ion-button>
  24. </div>
  25. <!-- 今日天气 -->
  26. <div class="weather">
  27. <h3>今日天气</h3>
  28. <p>{{ weather?.temperature }}°C</p>
  29. <p>{{ weather?.condition }}</p>
  30. <ion-icon [name]="weather?.icon"></ion-icon>
  31. </div>
  32. <!-- 待办事项 -->
  33. <div class="todo-list">
  34. <h3>待办事项</h3>
  35. <ion-list>
  36. <ion-item *ngFor="let todo of todos">
  37. <ion-label>{{ todo.text }}</ion-label>
  38. <ion-checkbox [(ngModel)]="todo.completed"></ion-checkbox>
  39. </ion-item>
  40. </ion-list>
  41. </div>
  42. <!-- 实时通勤交通状况 -->
  43. <div class="traffic-status">
  44. <h3>实时交通状况</h3>
  45. <p>{{ traffic?.status }}</p>
  46. <ion-button expand="full" (click)="viewTrafficDetails()">查看详情</ion-button>
  47. </div>
  48. </ion-content>