feat: update

package-lock.json

@@ -24,6 +24,7 @@
         "@ionic/angular": "^8.0.0",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.4",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -15482,6 +15483,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-4.0.0.tgz",

package.json

@@ -29,6 +29,7 @@
     "@ionic/angular": "^8.0.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

src/app/tab1/tab1.page.html

@@ -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>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,53 @@
+.middle-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    overflow-x: auto;
+    white-space: nowrap;
+    margin-top: 4px; /* 添加顶部间距 */
+
+    .row{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+    }
+    .order-card {
+      width: 60px;
+      height: 60px;
+      margin: 4px;
+      text-align: center; 
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .large-icon {
+        font-size: 30px; /* 设置图标大小为30像素 */
+        margin-bottom: 5px; /* 调整图标与文字之间的间距 */
+      
+    }
+    .centered-header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column; /* 设置为垂直方向布局 */
+        // height: 100%; /* 设置容器高度为100% */
+    }
+    ion-card-subtitle {
+        font-size: 12px;
+    }
+    .swiper-container {
+        width: 100%;
+        height: 100%;
+      }
+      
+      .swiper-slide {
+        text-align: center;
+      }
+      
+      .swiper-button-next,
+      .swiper-button-prev {
+        color: #fff;
+      }
+
+}

src/app/tab1/tab1.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import Swiper from 'swiper';
 
 @Component({
   selector: 'app-tab1',
@@ -6,7 +7,47 @@ import { Component } from '@angular/core';
   styleUrls: ['tab1.page.scss']
 })
 export class Tab1Page {
+  // 上方轮播图
+  public attractions = [
+    { image: "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", name: '景点1' },
+    { image: "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", name: '景点2' },
+    { image: "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", name: '景点3' }
+  ];
 
-  constructor() {}
+  //多图标卡片
+  cards = [
+    { icon: 'map-outline', title: '找攻略' },
+    { icon: 'flame-outline', title: '当季热门' },
+    { icon: 'newspaper-outline', title: '看游记' },
+    { icon: 'people-outline', title: '找搭子' },
+    { icon: 'bed-outline', title: '订酒店' },
+    { icon: 'happy-outline', title: '亲子游' },
+    { icon: 'car-outline', title: '自驾游' },
+    { icon: 'flag-outline', title: '国内游' },
+    { icon: 'airplane-outline', title: '海外游' },
+    { icon: 'compass-outline', title: '周边游' }
+  ];
 
+  chunkedCards: any[] = [];
+
+  constructor() {
+    this.chunkSize(this.cards);
+  }
+
+  chunkSize(cards: any[]) {
+    const chunkSize: number = 5;
+    this.chunkedCards = [];
+    for (let i: number = 0; i < cards.length; i += chunkSize) {
+      this.chunkedCards.push(cards.slice(i, i + chunkSize));
+    }
+  }
+
+  ngOnInit() {
+    const swiper = new Swiper('.swiper-container', {
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+    });
+  }
 }

src/app/tab3/tab3.page.html

@@ -1,121 +1,128 @@
 <ion-header [translucent]="true">
+
   <ion-toolbar>
-  <ion-title>
-  个人中心
-  </ion-title>
+    <ion-buttons slot="start">
+      <ion-button>
+        <ion-icon name="settings-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>个人中心</ion-title>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="mail-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
- </ion-header>
- 
- 
- <ion-content>
+</ion-header>
+
+
+<ion-content>
   <!-- 个人信息 -->
   <ion-card>
- <!-- <ion-card-header>
-     <h1>个人中心</h1>
-  </ion-card-header> -->
- <ion-card-content>
- 
- <ion-row>
- <ion-col size="3">
- <ion-avatar>
- <ion-img src="https://via.placeholder.com/150"></ion-img>
- </ion-avatar>
- </ion-col>
- <ion-col size="9">
- <ion-label>用户名：示例用户</ion-label>
- <!-- id、ip -->
- <ion-row>
- <ion-col>
- <ion-label>ID: 23284787</ion-label>
- </ion-col>
- <ion-col>
- <ion-label>IP属地: 南昌</ion-label>
- </ion-col>
- </ion-row>
- </ion-col>
- 
- </ion-row>
 
- 
- <ion-row>
- <ion-col>
-  <ion-label>关注: 7</ion-label>
- </ion-col>
-  <ion-col>
-      <ion-label>粉丝: 0</ion-label>
-  </ion-col>
-  <ion-col>
-      <ion-label>获赞: 0</ion-label>
-  </ion-col>
-  </ion-row>
- 
- </ion-card-content>
- </ion-card>
- 
- 
- <div class="middle-section">
- <!-- 我的订单 -->
- <ion-card class="order-card">
- <ion-card-header>
- <span style="font-size: 16px;">我的订单</span>
-  </ion-card-header>
- <ion-card-content>
-  <!-- 订单卡片内容 -->
-  <span style="font-size: 14px;">查看全部</span>
-  </ion-card-content>
-  </ion-card>
- 
-  <!-- 积分中心 -->
-  <ion-card class="points-card">
-  <ion-card-header>
-  <span style="font-size: 16px;">积分中心</span>
- <!-- <ion-button slot="end" fill="clear">收藏内容</ion-button> -->
-       </ion-card-header>
-       <ion-card-content>
-    <!-- 积分中心内容 -->
- <span style="font-size: 14px;">答题赢积分</span>
-     </ion-card-content>
-  </ion-card>
- 
-  <!-- 我的勋章 -->
-  <ion-card class="medals-card">
-      <ion-card-header>
+    <ion-card-content>
+
+      <ion-row>
+        <ion-col size="3">
+          <ion-avatar>
+            <ion-img src="https://via.placeholder.com/150"></ion-img>
+          </ion-avatar>
+        </ion-col>
+        <ion-col size="9">
+          <ion-label>用户名：示例用户</ion-label>
+          <!-- id、ip -->
+          <ion-row>
+            <ion-col>
+              <ion-label>ID: 23284787</ion-label>
+            </ion-col>
+            <ion-col>
+              <ion-label>IP属地: 南昌</ion-label>
+            </ion-col>
+          </ion-row>
+        </ion-col>
 
-       <span style="font-size: 16px;">我的勋章</span>
-        </ion-card-header>
-       <ion-card-content>
-          <!-- 我的勋章内容 -->
-      <span style="font-size: 14px;">2枚勋章</span>
- </ion-card-content>
-</ion-card>
-</div>
+      </ion-row>
 
-<div>
-<!-- 内容 -->
-<ion-card>
-<ion-card-header> 内容</ion-card-header>
-<ion-card-content>这里是一些收藏内容的示例数据</ion-card-content>
-</ion-card>
+     
+      <ion-row>
+        <ion-col>
+          <ion-label>关注: 7</ion-label>
+        </ion-col>
+        <ion-col>
+          <ion-label>粉丝: 0</ion-label>
+        </ion-col>
+        <ion-col>
+          <ion-label>获赞: 0</ion-label>
+        </ion-col>
+      </ion-row>
 
-<!-- 收藏 -->
-<ion-card>
-<ion-card-header>收藏</ion-card-header>
-<ion-card-content>这里是一些收藏详情的示例数据</ion-card-content>
-</ion-card>
+    </ion-card-content>
+  </ion-card>
 
-<!-- 喜欢 -->
-<ion-card>
-<ion-card-header>
-喜欢
-</ion-card-header>
-<ion-card-content> 这里是一些喜欢详情的示例数据 </ion-card-content>
-</ion-card>
+  <!-- <div class="middle-section">
+    <ion-card *ngFor="let card of cards" class="order-card">
+      <ion-card-header>
+        <span style="font-size: 16px;">{{ card.title }}</span>
+      </ion-card-header>
+      <ion-card-content>
+        <span style="font-size: 14px;">{{ card.content }}</span>
+      </ion-card-content>
+    </ion-card>
+  </div> -->
+  <div class="middle-section">
+    <ion-card *ngFor="let card of cards" class="order-card">
+      <ion-card-header>
+        <div style="display: flex; align-items: center;">
+          <ion-icon name="{{ card.icon }}" style="font-size: 20px; margin-right: 5px;"></ion-icon>
+          <span style="font-size: 16px;">{{ card.title }}</span>
+        </div>
+      </ion-card-header>
+      <ion-card-content style="margin-top: -10px;">
+        <span style="font-size: 14px;">{{ card.content }}</span>
+      </ion-card-content>
+    </ion-card>
+  </div>
 
-<!-- 设置与反馈 -->
-<ion-card>
-  <ion-card-header>设置与反馈</ion-card-header>
-  <ion-card-content>这里是一些设置选项和意见反馈的示例数据</ion-card-content>
+  <div>
+  <!-- 内容 -->
+  <ion-card>
+    <ion-card-header>
+      内容
+    </ion-card-header>
+    <ion-card-content>
+      这里是一些收藏内容的示例数据
+    </ion-card-content>
   </ion-card>
- </div>
 
+  <!-- 收藏 -->
+  <ion-card>
+    <ion-card-header>
+      收藏
+    </ion-card-header>
+    <ion-card-content>
+      这里是一些收藏详情的示例数据
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 喜欢 -->
+  <ion-card>
+    <ion-card-header>
+      喜欢
+    </ion-card-header>
+    <ion-card-content>
+      这里是一些喜欢详情的示例数据
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 设置与反馈 -->
+  <ion-card>
+    <ion-card-header>
+      设置与反馈
+    </ion-card-header>
+    <ion-card-content>
+      这里是一些设置选项和意见反馈的示例数据
+    </ion-card-content>
+  </ion-card>
+  </div>
+  
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -4,14 +4,16 @@
     overflow-x: auto;
     white-space: nowrap;
     margin-top: 20px; /* 添加顶部间距 */
-
-    .order-card,
-    .points-card,
-    .medals-card,
-    .create-card {
-    width: 110px;
-    height: 80px;
-    margin: 5px;
+  
+    .order-card {
+      width: 110px;
+      height: 80px;
+      margin: 5px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
     }
- }
-   
+  }
+
+

src/app/tab3/tab3.page.ts

@@ -7,6 +7,12 @@ import { Component } from '@angular/core';
 })
 export class Tab3Page {
 
+  cards = [
+    { title: '我的订单', content: '查看全部', icon: 'document-text-outline' },
+    { title: '积分中心', content: '答题赢积分', icon: 'trophy-outline' },
+    { title: '我的勋章', content: '2枚勋章', icon: 'medal-outline' }
+  ];
+
   constructor() {}
 
 }

src/app/tabs/tabs.page.html

@@ -2,23 +2,27 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
+      <ion-icon aria-hidden="true" name="triangle" name="home-outline">
+      </ion-icon>
       <ion-label>首页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
+      <ion-icon aria-hidden="true" name="ellipse" name="location-outline">
+      </ion-icon>
       <ion-label>景点</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="contact" href="/tabs/contact">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
+      <ion-icon aria-hidden="true" name="ellipse" name="chatbubble-ellipses-outline">
+      </ion-icon>
       <ion-label>社区</ion-label>
     </ion-tab-button>
 
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
+      <ion-icon aria-hidden="true" name="square" name="person-circle-outline">
+      </ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>

src/index.html

@@ -3,7 +3,12 @@
 
 <head>
   <meta charset="utf-8" />
+  <!-- 新增 -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  
   <title>Ionic App</title>
+  <!--  -->
+  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.5.7/swiper-bundle.min.css">
 
   <base href="/" />
 
@@ -21,6 +26,8 @@
 
 <body>
   <app-root></app-root>
+  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.5.7/swiper-bundle.min.js"></script>
+
 </body>
 
 </html>