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() {

src/app/tab3/tab3.page.html

@@ -1,50 +1,121 @@
-<ion-header>
+<ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>我的</ion-title>
+  <ion-title>
+  个人中心
+  </ion-title>
   </ion-toolbar>
-</ion-header>
-
-<ion-content>
+ </ion-header>
+ 
+ 
+ <ion-content>
   <!-- 个人信息 -->
   <ion-card>
-    <ion-card-header>
-      个人信息
-    </ion-card-header>
-    <ion-card-content>
-      <ion-avatar slot="start">
-        <ion-img src="https://via.placeholder.com/150"></ion-img>
-      </ion-avatar>
-      <ion-label>用户名：示例用户</ion-label>
-    </ion-card-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-card>
-    <ion-card-header>
-      我的收藏
-    </ion-card-header>
-    <ion-card-content>
-      这里是一些收藏内容的示例数据
-    </ion-card-content>
+ 
+ <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>
-    <ion-card-header>
-      我的订单
-    </ion-card-header>
-    <ion-card-content>
-      这里是一些订单详情的示例数据
-    </ion-card-content>
+ 
+  <!-- 积分中心 -->
+  <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>
-    <ion-card-header>
-      设置与反馈
-    </ion-card-header>
-    <ion-card-content>
-      这里是一些设置选项和意见反馈的示例数据
-    </ion-card-content>
+       <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>
+
+<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>
+
+<!-- 设置与反馈 -->
+<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

@@ -0,0 +1,17 @@
+.middle-section {
+    display: flex;
+    justify-content: space-around;
+    overflow-x: auto;
+    white-space: nowrap;
+    margin-top: 20px; /* 添加顶部间距 */
+
+    .order-card,
+    .points-card,
+    .medals-card,
+    .create-card {
+    width: 110px;
+    height: 80px;
+    margin: 5px;
+    }
+ }
+