|
@@ -3,8 +3,115 @@
|
|
|
<ion-title>首页</ion-title>
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
-<ion-searchbar></ion-searchbar>
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <ion-searchbar></ion-searchbar>
|
|
|
+
|
|
|
<ion-content>
|
|
|
+ <!-- 图片轮播 -->
|
|
|
+ <div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" *ngFor="let attraction of attractions">
|
|
|
+ <ion-card style="height: 120px;">
|
|
|
+ <ion-img [src]="attraction.image" style="width: 100%; height: 100%; object-fit: cover;"></ion-img>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-button-next"></div>
|
|
|
+ <div class="swiper-button-prev"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 图标卡片 -->
|
|
|
+ <div class="middle-section">
|
|
|
+ <ng-container *ngFor="let chunk of chunkedCards">
|
|
|
+ <div class="row">
|
|
|
+ <ion-card *ngFor="let card of chunk" class="order-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon [name]="card.icon" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>{{ card.title }}</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+ </div>
|
|
|
+ </ng-container>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="middle-section">
|
|
|
+
|
|
|
+ <ion-card class="order-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="map-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>找攻略</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <ion-card class="points-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="flame-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>当季热门</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <ion-card class="medals-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="newspaper-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>看游记</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <ion-card class="create-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="people-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>找搭子</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <ion-card class="create-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="bed-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>订酒店</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="middle-section">
|
|
|
+ <ion-card class="order-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="happy-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>亲子游</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <ion-card class="points-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="car-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>自驾游</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <ion-card class="medals-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="flag-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>国内游</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <ion-card class="medals-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="airplane-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>海外游</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ <ion-card class="create-card">
|
|
|
+ <ion-card-header class="centered-header">
|
|
|
+ <ion-icon name="compass-outline" class="large-icon"></ion-icon>
|
|
|
+ <ion-card-subtitle>周边游</ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ </div> -->
|
|
|
+
|
|
|
<!-- 推荐内容展示 -->
|
|
|
<ion-card>
|
|
|
<ion-card-header>
|
|
@@ -12,7 +119,6 @@
|
|
|
</ion-card-header>
|
|
|
<ion-card-content>
|
|
|
【桂林+阳朔】船在水中走 人在画中游 | 三天旅行攻略 去看小砂糖橘
|
|
|
-
|
|
|
</ion-card-content>
|
|
|
<ion-img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.5HjektOIikSBU1vw0JVKwgHaE8?w=305&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"></ion-img>
|
|
|
</ion-card>
|
|
@@ -38,4 +144,5 @@
|
|
|
</ion-card-content>
|
|
|
<ion-img src="https://ts1.cn.mm.bing.net/th/id/R-C.90139666f8943b728df6af35d9e0f82a?rik=V2B9Csf%2be9hAdA&riu=http%3a%2f%2fi.52desktop.cn%3a81%2fupimg%2fallimg%2f20141231%2f2014123116175167177807.jpg&ehk=AryhWxX8LTLpPs4rb31XISqXKyw0zFPNtxRenGZli8M%3d&risl=&pid=ImgRaw&r=0"></ion-img>
|
|
|
</ion-card>
|
|
|
+
|
|
|
</ion-content>
|