12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <ion-header [translucent]="true">
- <ion-toolbar class="custom-toolbar">
- <!-- 天气组件 -->
- <app-weather [temp]="21" [position]="'南昌'"></app-weather>
- <!-- 搜索框 -->
- <ion-searchbar
- slot="end"
- placeholder="搜索景点"
- class="searchbar"
- value="搜索景点"
- ></ion-searchbar>
- </ion-toolbar>
- </ion-header>
- <ion-content>
- <div class="main-container">
- <ion-content>
- <div class="image-container">
- <img
- src="../../assets/images/tengwangge.png"
- alt="Descriptive Image Alt Text"
- />
- <button class="play-button">畅玩南昌</button>
- </div>
- <div class="content-container">
- <ion-grid>
- <ion-row>
- <!-- 第一行 -->
- <ion-col size="4">
- <app-edittag
- iconName="people"
- label="一起游"
- route="/play-together"
- ></app-edittag>
- </ion-col>
- <ion-col size="4">
- <app-edittag
- iconName="compass"
- label="景点推荐"
- (click)="goViewplacePage()"
- ></app-edittag>
- </ion-col>
- <ion-col size="4">
- <app-edittag
- iconName="help-circle"
- label="一键求助"
- route="/get-help"
- ></app-edittag>
- </ion-col>
- </ion-row>
- <ion-row>
- <!-- 第二行 -->
- <ion-col size="4">
- <app-edittag
- iconName="people"
- label="一起游玩"
- route="/play-with-others"
- ></app-edittag>
- </ion-col>
- <ion-col size="4">
- <app-edittag
- iconName="calendar"
- label="活动日历"
- route="/event-calendar"
- ></app-edittag>
- </ion-col>
- <ion-col size="4">
- <app-edittag
- iconName="chatbubbles"
- label="游客互动"
- route="/visitor-interaction"
- ></app-edittag>
- </ion-col>
- </ion-row>
- </ion-grid>
- </div>
- <ion-content>
- <div class="hot-articles-container">
- <h2>热门文章</h2>
- <ion-list>
- <ion-item *ngFor="let article of articles">
- <ion-label>
- <h3>{{ article.title }}</h3>
- <p>{{ article.summary }}</p>
- </ion-label>
- <ion-button fill="clear" slot="end">
- <ion-icon name="arrow-forward"></ion-icon>
- </ion-button>
- </ion-item>
- </ion-list>
- </div>
- </ion-content>
- </ion-content>
- </div>
- </ion-content>
|