feat: update

servers/REST.js

@@ -0,0 +1,32 @@
+// Get 获取全部旅游示例
+fetch("http://web2023.fmode.cn:9999/parse/classes/LvYouYou?", {
+    "headers": {
+      "accept": "*/*",
+      "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",
+      "if-none-match": "W/\"22c-ai8YYo9kqZEKt0rDxqtJt6feQDU\"",
+      "x-parse-application-id": "dev"
+    },
+    "referrer": "http://127.0.0.1:4040/",
+    "referrerPolicy": "strict-origin-when-cross-origin",
+    "body": null,
+    "method": "GET",
+    "mode": "cors",
+    "credentials": "omit"
+  });
+
+
+// Post 创建新的旅游示例
+fetch("http://web2023.fmode.cn:9999/parse/classes/LvYouYou", {
+    "headers": {
+      "accept": "*/*",
+      "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",
+      "content-type": "text/plain;charset=UTF-8",
+      "x-parse-application-id": "dev"
+    },
+    "referrer": "http://127.0.0.1:4040/",
+    "referrerPolicy": "strict-origin-when-cross-origin",
+    "body": "{\"name\":\"哈尔滨\",\"prices\":\"6500\"}",
+    "method": "POST",
+    "mode": "cors",
+    "credentials": "omit"
+  });

src/app/contact/contact.page.html

@@ -7,45 +7,48 @@
 <ion-content>
   <!-- 游记分享列表 -->
   <ion-card>
-    <ion-card-header>
-      游记分享
+    <ion-card-header class="custom-card-header" >
+      <div class="card-content">
+        游记分享
+      </div>
+      <div class="search-container">
+        <input type="text" class="search-box" placeholder="  搜索...">
+      </div>
     </ion-card-header>
     <ion-card-content>
       <ion-list>
-        <ion-item>
-          <ion-thumbnail slot="start">
-            <ion-img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.7v2hnHYt--BjcLaf0OulRQHaE8?w=278&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7"></ion-img>
-          </ion-thumbnail>
-          <ion-label>
-            <h2>2024春节·逃离城市计划 冰封青海湖 岗什卡雪峰冰瀑 天境祁连山 黄南同仁 隆务寺 吾屯下寺
-            </h2>
-            <p>为什么会选择 青海 作为2024年开局旅途计划，除了想再看一眼冬季荒凉又浪漫的 西北 外，也希望去那心中莲花盛放之地—— 黄南 同仁 ，藏语为“热贡”，意为梦想成真的金色谷地，这里有着青南地区最大的格鲁派寺院：隆务寺。</p>
-          </ion-label>
-        </ion-item>
-        <!-- 这里可以添加更多游记分享的示例数据 -->
+        <h2 class="h1-top">推荐各地攻略交流群</h2>
+        <ion-card class="out-card" *ngFor="let card of cards">
+          <ion-icon name="add-circle" class="add-icon"></ion-icon>
+          <h2>{{ card.title }}</h2>
+          <ion-card class="inner-card">
+            {{ card.description }}
+          </ion-card>
+        </ion-card>
       </ion-list>
     </ion-card-content>
   </ion-card>
 
   <!-- 问答交流 -->
   <ion-card>
-    <ion-card-header>
+    <ion-card-header class="h1-top">
       问答交流
     </ion-card-header>
     <ion-card-content>
-      <ion-list>
-        <ion-item>
-          <ion-label>
-            <h2>岗什卡雪峰景区车子直接可以开上去，不需要爬山？有高反感觉吗？</h2>
-
-
-            <p>岗什卡雪峰是西藏第二高峰，海拔约为7556米。在景区内，游客通常是乘坐车辆或者徒步到达观景点，而不是直接开车上山。因为岗什卡雪峰所在的区域地势险峻、气候恶劣，不适合普通车辆直接开上去。
-
-              对于高反，由于岗什卡雪峰景区的海拔较高，游客在前往景区时可能会面临高反的风险。高反是由于高海拔环境下氧气稀薄导致的身体不适反应，表现为头痛、头晕、恶心、呕吐等症状。</p>
-          </ion-label>
-        </ion-item>
+        <ion-card class="chat-bubble-left green animate-left"
+        style="animation-delay: 2s;">
+        岗什卡雪峰景区车子直接可以开上去，不需要爬山？有高反感觉吗？
+        </ion-card>
+        <ion-card class="chat-bubble-right green animate-left"
+        style="animation-delay: 4s;">岗什卡雪峰是西藏第二高峰，海拔约为7556米。在景区内，游客通常是乘坐车辆或者徒步到达观景点，而不是直接开车上山。因为岗什卡雪峰所在的区域地势险峻、气候恶劣，不适合普通车辆直接开上去。
+        </ion-card>
+        <ion-card class="chat-bubble-left green animate-left" style="animation-delay: 6s;">
+          有高反感觉吗？
+        </ion-card>
+        <ion-card class="chat-bubble-right green animate-left"
+        style="animation-delay: 9s;">对于高反，由于岗什卡雪峰景区的海拔较高，游客在前往景区时可能会面临高反的风险。高反是由于高海拔环境下氧气稀薄导致的身体不适反应，表现为头痛、头晕、恶心、呕吐等症状.
+        </ion-card>
         <!-- 这里可以添加更多问答交流的示例数据 -->
-      </ion-list>
     </ion-card-content>
   </ion-card>
 

src/app/contact/contact.page.scss

@@ -0,0 +1,148 @@
+@keyframes colorChange {
+    0% { background-color: #9cd6fc; }
+    33.33% { background-color: #79f1ab; }
+    66.66% { background-color: #fabe8a; }
+    100% { background-color: #9cd6fc; }
+  }
+  
+  .custom-card-header {
+    --wave-color: #ffffff; 
+    width: 100%;
+    height: 30vh;
+    display: flex;
+    border-radius: 30px;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    animation: colorChange 4s infinite;
+    color: rgb(0, 0, 0);
+    text-align: center;
+    position: relative;
+  }
+  .custom-card-header::after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 20px;
+    background: var(--wave-color);
+    border-radius: 90%;
+    transform: scaleY(2.5);
+  }
+  
+  .card-content {
+    margin-top: -70px;
+    font-size: 30px;
+    font-family: 'YourRoundFont', cursive; 
+    position: relative;
+  }
+  .search-container {
+    width: 80%;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .search-box {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #9c9c9c;
+    border-radius: 20px;
+  }
+
+  .out-card {
+    font-size: 16px;
+    font-weight: bold;
+    width: 310px;
+    height: 120px;
+    max-width: 600px;
+    padding-top: 10px;
+    padding-left: 20px;
+    margin-left: 1px;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    text-align: left;
+  }
+  
+.inner-card {
+    font-size: 12px;
+    padding: 8px;
+    width: 282px;
+    height: 65px;
+    margin-top: 12px;
+    margin-left: -7px;
+    background-color: #f2f2f2;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    position: relative;
+  }
+
+  .add-icon {
+    position: absolute;
+    top: 20%;
+    right: 20px;
+    transform: translateY(-50%);
+    color: #439af8; /* 图标颜色 */
+    font-size: 24px; /* 图标大小 */
+  }
+
+  .h1-top {
+    font-size: 18px;
+    font-weight: 700;
+    color: rgb(33, 33, 33);
+  }
+
+  .green {
+    background-color: #C7EFCF;
+}
+
+  .chat-bubble-left {
+    background-color: #DCF8C6;
+    border-radius: 10px;
+    padding: 10px;
+    margin-left: -400px;
+    width: 320px;
+    animation: slideFromLeft 0.5s ease forwards;
+  }
+  @keyframes slideFromLeft {
+    from {
+        opacity: 0;
+        margin-left: -400px;
+    }
+    to {
+        opacity: 1;
+        margin-left: 0px;
+    }
+    }
+
+.animate-left {
+    animation-delay: 0s;
+}
+
+.chat-bubble-right {
+    background-color: #c2eca2;
+    border-radius: 10px;
+    padding: 10px;
+    margin-left: 1000px;
+    width: 320px;
+    animation: slideFromRight 0.5s ease forwards;
+}
+@keyframes slideFromRight {
+    from {
+        opacity: 0;
+        margin-left: 1000px;
+    }
+    to {
+        opacity: 1;
+        margin-left: 0px;
+    }
+    }
+
+  
+
+
+
+  
+  
+  

src/app/contact/contact.page.ts

@@ -7,6 +7,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ContactPage implements OnInit {
 
+  cards = [
+    { title: '云南攻略交流群', description: '云南，多彩风情之地。雄奇的梯田、神秘的石林、壮丽的峡谷、古朴的古镇，处处皆景。品尝鲜美的过桥米线、体验原生态茶园、感受多元文化交融。' },
+    { title: '贵州攻略交流群', description: '云南，多彩风情之地。雄奇的梯田、神秘的石林、壮丽的峡谷、古朴的古镇，处处皆景。品尝鲜美的过桥米线、体验原生态茶园、感受多元文化交融。' },
+    { title: '贵州攻略交流群', description: '云南，多彩风情之地。雄奇的梯田、神秘的石林、壮丽的峡谷、古朴的古镇，处处皆景。品尝鲜美的过桥米线、体验原生态茶园、感受多元文化交融。' },
+    { title: '贵州攻略交流群', description: '云南，多彩风情之地。雄奇的梯田、神秘的石林、壮丽的峡谷、古朴的古镇，处处皆景。品尝鲜美的过桥米线、体验原生态茶园、感受多元文化交融。' },
+    { title: '贵州攻略交流群', description: '云南，多彩风情之地。雄奇的梯田、神秘的石林、壮丽的峡谷、古朴的古镇，处处皆景。品尝鲜美的过桥米线、体验原生态茶园、感受多元文化交融。' },
+    // 可以添加更多卡片数据
+  ];
+
+
   constructor() { }
 
   ngOnInit() {