Merge branch 'master' of http://git.fmode.cn:3000/4u/workspace

.history/soul-app/src/app/app.component_20241224202641.scss

@@ -0,0 +1,4 @@
+.transparent-modal {
+    --background: rgba(0, 0, 0, 0.5); /* 设置弹窗背景为半透明 */
+    backdrop-filter: blur(10px); /* 添加模糊效果 */
+  }

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224171836.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224171837.html

@@ -0,0 +1,22 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwdriftbottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio  id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224171933.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController,IonCardTitle } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,IonCardTitle
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224172041.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { IonCardTitle } from '@ionic/angular/standalone';
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,IonCardTitle
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224172141.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224174145.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224174155.html

@@ -0,0 +1,22 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwdriftbottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224174644.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175007.scss

@@ -0,0 +1,110 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+.my-custom-class {
+    --width: 90%;
+    --height: auto;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+  
+  .top-image img {
+    width: 100%;
+    height: auto;
+  }
+  
+  .button-container {
+    position: absolute;
+    bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    width: calc(100% - 40px);
+  }
+  
+  .circular-button {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175125.scss

@@ -0,0 +1,110 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+.my-custom-class {
+  --width: 90%;
+  --height: auto;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.top-image img {
+  width: 100%;
+  height: auto;
+}
+
+.button-container {
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  width: calc(100% - 40px);
+}
+
+.circular-button {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175136.scss

@@ -0,0 +1,110 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+.my-custom-class {
+  --width: 90%;
+  --height: auto;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.top-image img {
+  width: 100%;
+  height: auto;
+}
+
+.button-container {
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  width: calc(100% - 40px);
+}
+
+.circular-button {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175140.scss

@@ -0,0 +1,84 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175803.html

@@ -0,0 +1,22 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175804.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwDriftBottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224200043.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+ 
+
+  async throwDriftBottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224200937.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+ 
+
+  throwDriftBottleModal(){
+    openThrowDriftBottleModal(this.modalCtrl)
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224204622.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throwDriftBottleModal(){
+    openThrowDriftBottleModal(this.modalCtrl)
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224205251.html

@@ -0,0 +1,26 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button">
+    <img src="/assets/img/我的瓶子.png" alt="我的漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224205319.scss

@@ -0,0 +1,88 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 60px;
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224205402.html

@@ -0,0 +1,26 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button">
+    <img src="/assets/img/我的瓶子.png" alt="我的漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224205505.scss

@@ -0,0 +1,88 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 120px;
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224205603.scss

@@ -0,0 +1,88 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 150px;
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224205623.scss

@@ -0,0 +1,88 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 145px;
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224205803.scss

@@ -0,0 +1,100 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 50%;
+    .left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 145px;
+    transform: translateX(-50%) translateY(50%); /* 向下移动一点 */
+}
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224205809.scss

@@ -0,0 +1,100 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 50%;
+    .left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 50%;
+    transform: translateX(-50%) translateY(50%); /* 向下移动一点 */
+}
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224205829.scss

@@ -0,0 +1,89 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 50%;
+    transform: translateX(-50%) translateY(50%); /* 向下移动一点 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224210024.html

@@ -0,0 +1,26 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button">
+    <img src="/assets/img/我的瓶子.png" alt="我的漂流瓶" class="class="small-circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224210026.scss

@@ -0,0 +1,94 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 50%;
+    transform: translateX(-50%) translateY(50%); /* 向下移动一点 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+.small-circular-button {
+    width: 50px; /* 更小圆形按钮的大小 */
+    height: 50px;
+    border-radius: 50%;
+  }
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224210045.html

@@ -0,0 +1,26 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button">
+    <img src="/assets/img/我的瓶子.png" alt="我的漂流瓶" class="small-circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224210625.html

@@ -0,0 +1,26 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button">
+    <img src="/assets/img/我的瓶子.jpg" alt="我的漂流瓶" class="small-circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224211351.html

@@ -0,0 +1,28 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" >
+    <ion-button  fill="clear" color="blue"  >
+        我的漂流瓶
+      </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224211547.html

@@ -0,0 +1,28 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" >
+    <ion-button  fill="clear" color="rgba(255, 255, 255, 0.6)"  >
+        我的漂流瓶
+      </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224211702.html

@@ -0,0 +1,28 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" >
+    <ion-button  fill="clear" color=" #4caf50"  >
+        我的漂流瓶
+      </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224211757.html

@@ -0,0 +1,28 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" >
+    <ion-button  fill="clear" color=" #45a049"  >
+        我的漂流瓶
+      </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224211813.html

@@ -0,0 +1,28 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" >
+    <ion-button  fill="clear" color="black"  >
+        我的漂流瓶
+      </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224212020.scss

@@ -0,0 +1,101 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 50%;
+    transform: translateX(-50%) translateY(50%); /* 向下移动一点 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+.small-circular-button {
+    width: 50px; /* 更小圆形按钮的大小 */
+    height: 50px;
+    border-radius: 50%;
+  }
+  .custom-button {
+    font-size: 12px; /* 按钮字体大小 */
+    border-radius: 6px; /* 圆角按钮 */
+    color: rgb(89, 210, 228); /* 字体颜色 */
+    transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
+    
+  }
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224212022.html

@@ -0,0 +1,28 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" >
+    <ion-button  fill="clear" class="custom-button">
+        我的漂流瓶
+      </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224212100.scss

@@ -0,0 +1,101 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.middle-button {
+    left: 50%;
+    transform: translateX(-50%) translateY(50%); /* 向下移动一点 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+.small-circular-button {
+    width: 50px; /* 更小圆形按钮的大小 */
+    height: 50px;
+    border-radius: 50%;
+  }
+  .custom-button {
+    font-size: 18px; /* 按钮字体大小 */
+    border-radius: 6px; /* 圆角按钮 */
+    color: rgb(69, 166, 180); /* 字体颜色 */
+    transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
+    
+  }
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224213544.html

@@ -0,0 +1,28 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" >
+    <ion-button  fill="clear" class="custom-button">
+        我的漂流瓶
+      </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button" >
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224222313.ts

@@ -0,0 +1,70 @@
+// drift-bottle.component.ts
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+import { HttpClient } from '@angular/common/http';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+  alertHeader: string = '';
+  alertMessage: string = '';
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit() {}
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  catchDriftBottle() {
+    const query = new CloudQuery("DriftBottle");
+    query.equalTo("status", "drifting");
+
+    query.find().then((driftingBottles: any[]) => {
+      if (driftingBottles.length === 0) {
+        this.alertHeader = '失败';
+        this.alertMessage = '没捞着…';
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      bottleToCatch.set("status", "catched");
+      bottleToCatch.save().then(() => {
+        this.alertHeader = '成功';
+        this.alertMessage = '捞到啦！';
+      }).catch((err: any) => {
+        console.error('更新漂流瓶状态时出错:', err);
+        this.alertHeader = '错误';
+        this.alertMessage = '发生错误，请重试。';
+      });
+    }).catch((err) => {
+      console.error('获取漂流瓶时出错:', err);
+      this.alertHeader = '错误';
+      this.alertMessage = '发生错误，请重试。';
+    });
+  }
+
+  dismissAlert() {
+    this.alertHeader = '';
+    this.alertMessage = '';
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224222314.html

@@ -0,0 +1,31 @@
+<!-- drift-bottle.component.html -->
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button">
+    <ion-button fill="clear" class="custom-button" (click)="catchDriftBottle()">
+      我的漂流瓶
+    </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button" (click)="catchDriftBottle()">
+  </div>
+
+  <!-- 背景音乐 -->
+  <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+
+  <!-- 弹窗提示 -->
+  <ion-alert *ngIf="alertMessage" [header]="alertHeader" [message]="alertMessage" [buttons]="['OK']" (didDismiss)="dismissAlert()"></ion-alert>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224222429.html

@@ -0,0 +1,31 @@
+<!-- drift-bottle.component.html -->
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button">
+    <ion-button fill="clear" class="custom-button" (click)="catchDriftBottle()">
+      我的漂流瓶
+    </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button"  (click)="catchDriftBottle()">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 背景音乐 -->
+  <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+
+  <!-- 弹窗提示 -->
+  <ion-alert *ngIf="alertMessage" [header]="alertHeader" [message]="alertMessage" [buttons]="['OK']" (didDismiss)="dismissAlert()"></ion-alert>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224223756.html

@@ -0,0 +1,31 @@
+<!-- drift-bottle.component.html -->
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <div class="button-container middle-button" (click)="goMydriftbottle()">
+    <ion-button fill="clear" class="custom-button" (click)="catchDriftBottle()">
+      我的漂流瓶
+    </ion-button>
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button"  (click)="catchDriftBottle()">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 背景音乐 -->
+  <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+
+  <!-- 弹窗提示 -->
+  <ion-alert *ngIf="alertMessage" [header]="alertHeader" [message]="alertMessage" [buttons]="['OK']" (didDismiss)="dismissAlert()"></ion-alert>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224223759.ts

@@ -0,0 +1,73 @@
+// drift-bottle.component.ts
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { openThrowDriftBottleModal } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { ModalController } from '@ionic/angular/standalone';
+import { HttpClient } from '@angular/common/http';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+  alertHeader: string = '';
+  alertMessage: string = '';
+
+  constructor(
+    private router: Router,
+    private modalCtrl: ModalController,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit() {}
+
+  throwDriftBottleModal() {
+    openThrowDriftBottleModal(this.modalCtrl);
+  }
+
+  catchDriftBottle() {
+    const query = new CloudQuery("DriftBottle");
+    query.equalTo("status", "drifting");
+
+    query.find().then((driftingBottles: any[]) => {
+      if (driftingBottles.length === 0) {
+        this.alertHeader = '失败';
+        this.alertMessage = '没捞着…';
+        return;
+      }
+
+      const randomIndex = Math.floor(Math.random() * driftingBottles.length);
+      const bottleToCatch = driftingBottles[randomIndex];
+
+      bottleToCatch.set("status", "catched");
+      bottleToCatch.save().then(() => {
+        this.alertHeader = '成功';
+        this.alertMessage = '捞到啦！';
+      }).catch((err: any) => {
+        console.error('更新漂流瓶状态时出错:', err);
+        this.alertHeader = '错误';
+        this.alertMessage = '发生错误，请重试。';
+      });
+    }).catch((err) => {
+      console.error('获取漂流瓶时出错:', err);
+      this.alertHeader = '错误';
+      this.alertMessage = '发生错误，请重试。';
+    });
+  }
+
+  dismissAlert() {
+    this.alertHeader = '';
+    this.alertMessage = '';
+  }
+  goMydriftbottle() {
+    this.router.navigate(['tabs/my-drift-bottle'])
+  }
+}

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224222958.html

@@ -0,0 +1,3 @@
+<p>
+  my-drift-bottle works!
+</p>

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224222958.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+})
+export class MyDriftBottleComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224223755.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,
+        IonInput,IonSearchbar,IonCard,IonCardHeader,
+        
+      ]
+})
+export class MyDriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goDriftbottle(){
+    this.router.navigate(['tabs/drift-bottle'])
+  }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224223814.html

@@ -0,0 +1,14 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goDriftbottle()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        心理普查
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224150.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+  import { IonicModule } from '@ionic/angular'; // 导入 IonicModule
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonicModule,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,
+        IonInput,IonSearchbar,IonCard,IonCardHeader,
+        
+      ]
+})
+export class MyDriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goDriftbottle(){
+    this.router.navigate(['tabs/drift-bottle'])
+  }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224703.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+ 
+
+@Component({
+  selector: 'app-my-drift-bottle',
+  templateUrl: './my-drift-bottle.component.html',
+  styleUrls: ['./my-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,
+        IonInput,IonSearchbar,IonCard,IonCardHeader,
+        
+      ]
+})
+export class MyDriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  goDriftbottle(){
+    this.router.navigate(['tabs/drift-bottle'])
+  }
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224736.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224809.html

@@ -0,0 +1,14 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goDriftbottle()" fill="clear">
+          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
+        </ion-button>
+      </div>
+      <ion-title class="title-text">
+        我的漂流瓶
+      </ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224835.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 115px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224843.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 015px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224846.scss

@@ -0,0 +1,53 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 105px;
+  margin: auto;
+  top: 10px;
+  }
+  

.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241224224958.scss

@@ -0,0 +1,54 @@
+/* 设置页面背景色 */
+ion-content {
+    --background: #ffffff; /* 白色背景 */
+  }
+
+  ion-card {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-card-title {
+    font-weight:bold;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  ion-title {
+    font-size: 24px; /* 增大字体大小 */
+    font-weight: bold; /* 加粗 */
+  }
+  /* 设置卡片的样式 */
+  ion-list {
+    margin: 10px; /* 卡片之间的间距 */
+    border-radius: 10px; /* 圆角效果 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  /* 设置列表项的样式 */
+  ion-item {
+    margin: 5px 0; /* 列表项之间的间距 */
+  }
+  
+  /* 设置按钮的样式（如果按钮不在顶部方框内） */
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 105px;
+  margin: auto;
+  top: 10px;
+  color:rgb(69, 166, 180);
+  }
+  

.history/soul-app/src/app/tabs/tabs.routes_20241224223752.ts

@@ -0,0 +1,82 @@
+import { Routes } from '@angular/router';
+import { TabsPage } from './tabs.page';
+
+export const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'tab1',
+        loadComponent: () =>
+          import('../tab1/tab1.page').then((m) => m.Tab1Page),
+      },
+      {
+        path: 'tab2',
+        loadComponent: () =>
+          import('../tab2/tab2.page').then((m) => m.Tab2Page),
+      },
+      {
+        path: 'tab3',
+        loadComponent: () =>
+          import('../tab3/tab3.page').then((m) => m.Tab3Page),
+      },
+      {
+        path: 'topic-detail',
+        loadComponent: () =>
+          import('../topic-detail/topic-detail.component').then((m) => m.TopicDetailComponent),
+      },
+      {
+        path: 'topic-detail2',
+        loadComponent: () =>
+          import('../topic-detail2/topic-detail2.component').then((m) => m.TopicDetail2Component),
+      },
+      {
+        path: 'topic-detail3',
+        loadComponent: () =>
+          import('../topic-detail3/topic-detail3.component').then((m) => m.TopicDetail3Component),
+      },
+      {
+        path: 'page-psysurvey',
+        loadComponent: () =>
+          import('../page-psysurvey/page-psysurvey.component').then((m) => m.PagePsysurveyComponent),
+      },
+      {
+        path: 'page-publishsurvey',
+        loadComponent: () =>
+          import('../page-publishsurvey/page-publishsurvey.component').then((m) => m.PagePublishsurveyComponent),
+      },
+      {
+        path: 'consult-picture',
+        loadComponent: () =>
+          import('../consult-picture/consult-picture.component').then((m) => m.ConsultPictureComponent),
+      },
+      {
+        path: 'report-modal',
+        loadComponent: () =>
+          import('../report-modal/report-modal.component').then((m) => m.ReportModalComponent),
+      },
+      {
+        path: '',
+        redirectTo: '/tabs/tab1',
+        pathMatch: 'full',
+      },
+      {
+        path: 'drift-bottle',
+        loadComponent: () =>
+          import('../drift-bottle/drift-bottle.component').then((m) => m.DriftBottleComponent),
+      },
+      {
+        path: 'my-drift-bottle',
+        loadComponent: () =>
+          import('../my-drift-bottle/my-drift-bottle.component').then((m) => m.MyDriftBottleComponent),
+      },
+      
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/tab1',
+    pathMatch: 'full',
+  },
+];

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224162336.html

@@ -0,0 +1,3 @@
+<p>
+  throw-drift-bottle works!
+</p>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224162336.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+})
+export class ThrowDriftBottleComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224170433.html

@@ -0,0 +1,13 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <!-- 学校输入 -->
+    <ion-item>
+      <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+    </ion-item>
+
+    <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+  </ion-card-content>
+</ion-card>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224170434.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private router: Router, private http: HttpClient) { }
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224172140.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,IonCardTitle
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private router: Router, private http: HttpClient) { }
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224172803.html

@@ -0,0 +1,12 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <!-- 学校输入 -->
+    <ion-item>
+      <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+    </ion-item>
+    <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+  </ion-card-content>
+</ion-card>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224173612.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,IonCardTitle
+  ]
+})
+export class ModalThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private router: Router, private http: HttpClient) { }
+
+  ngOnInit() {}
+
+  throwdriftbottle() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224173624.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,IonCardTitle
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private router: Router, private http: HttpClient) { }
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224174642.html

@@ -0,0 +1,23 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>写漂流瓶内容</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()">关闭</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <!-- 学校输入 -->
+      <ion-item>
+        <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+      </ion-item>
+
+      <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224174644.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224174736.html

@@ -0,0 +1,12 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <!-- 学校输入 -->
+    <ion-item>
+      <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+    </ion-item>
+    <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+  </ion-card-content>
+</ion-card>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224174828.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonButton, IonList, IonListHeader,IonCardTitle, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,IonCardTitle,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224175026.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private http: HttpClient, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.dismiss(); // 关闭模态框
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224175052.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem,IonCardTitle, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,IonCardTitle,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private http: HttpClient, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.dismiss(); // 关闭模态框
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224180816.ts

@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, IonInput, IonItem, IonLabel, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/angular/standalone';
+import { CloudObject } from 'src/lib/ncloud';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonButton,
+    IonInput,
+    IonItem,
+    IonLabel,
+    FormsModule,
+    CommonModule
+  ],
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.modalCtrl.dismiss(driftbottle, "confirm");
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+}
+
+export async function openThrowDriftBottleModal(modalCtrl: ModalController): Promise<any> {
+  const modal = await modalCtrl.create({
+    component: ThrowDriftBottleComponent,
+    breakpoints: [0.7, 1.0],
+    initialBreakpoint: 0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224201739.ts

@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, IonInput, IonItem, IonLabel, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/angular/standalone';
+import { CloudObject } from 'src/lib/ncloud';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonButton,
+    IonInput,
+    IonItem,
+    IonLabel,
+    FormsModule,
+    CommonModule
+  ],
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.modalCtrl.dismiss(driftbottle, "confirm");
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+}
+
+export async function openThrowDriftBottleModal(modalCtrl: ModalController): Promise<any> {
+  const modal = await modalCtrl.create({
+    component: ThrowDriftBottleComponent,
+    breakpoints: [0.7, 1.0],
+    initialBreakpoint: 0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224202435.scss

@@ -0,0 +1,10 @@
+/* throw-drift-bottle.component.scss */
+:host {
+    --background: rgba(255, 255, 255, 0.8); /* 设置背景为半透明白色 */
+    backdrop-filter: blur(10px); /* 添加模糊效果 */
+  }
+  
+  ion-card {
+    background: transparent; /* 使 ion-card 背景透明 */
+    box-shadow: none; /* 移除阴影 */
+  }

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224202450.scss

@@ -0,0 +1,10 @@
+/* throw-drift-bottle.component.scss */
+:host {
+    --background: rgba(255, 255, 255, 0.8); /* 设置背景为半透明白色 */
+    backdrop-filter: blur(10px); /* 添加模糊效果 */
+  }
+  
+  ion-card {
+    background: transparent; /* 使 ion-card 背景透明 */
+   
+  }

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224202509.scss

@@ -0,0 +1,10 @@
+/* throw-drift-bottle.component.scss */
+:host {
+    --background: rgba(255, 255, 255, 0.5); /* 设置背景为半透明白色 */
+    backdrop-filter: blur(10px); /* 添加模糊效果 */
+  }
+  
+  ion-card {
+    background: transparent; /* 使 ion-card 背景透明 */
+   
+  }

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224202529.scss

@@ -0,0 +1,10 @@
+/* throw-drift-bottle.component.scss */
+:host {
+    --background: rgba(255, 255, 255, 0.8); /* 设置背景为半透明白色 */
+    backdrop-filter: blur(10px); /* 添加模糊效果 */
+  }
+  
+  ion-card {
+    background: transparent; /* 使 ion-card 背景透明 */
+   
+  }

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224202626.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, IonInput, IonItem, IonLabel, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/angular/standalone';
+import { CloudObject } from 'src/lib/ncloud';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonButton,
+    IonInput,
+    IonItem,
+    IonLabel,
+    FormsModule,
+    CommonModule
+  ],
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.modalCtrl.dismiss(driftbottle, "confirm");
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+}
+
+export async function openThrowDriftBottleModal(modalCtrl: ModalController): Promise<any> {
+  const modal = await modalCtrl.create({
+    component: ThrowDriftBottleComponent,
+    cssClass: 'transparent-modal', // 添加自定义 CSS 类
+    breakpoints: [0.7, 1.0],
+    initialBreakpoint: 0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224202801.html

@@ -0,0 +1,12 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+
+    <ion-item>
+      <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+    </ion-item>
+    <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+  </ion-card-content>
+</ion-card>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224202825.scss

@@ -0,0 +1,10 @@
+/* throw-drift-bottle.component.scss */
+:host {
+    --background: rgba(255, 255, 255, 0.1); /* 设置背景为半透明白色 */
+    backdrop-filter: blur(10px); /* 添加模糊效果 */
+  }
+  
+  ion-card {
+    background: transparent; /* 使 ion-card 背景透明 */
+   
+  }

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203058.scss

@@ -0,0 +1,8 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+    --backdrop-opacity: 0.5; /* 设置背景遮罩的透明度 */
+  }
+  
+  ion-card {
+    background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+  }

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203132.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, IonInput, IonItem, IonLabel, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/angular/standalone';
+import { CloudObject } from 'src/lib/ncloud';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonButton,
+    IonInput,
+    IonItem,
+    IonLabel,
+    FormsModule,
+    CommonModule
+  ],
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.modalCtrl.dismiss(driftbottle, "confirm");
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+}
+
+export async function openThrowDriftBottleModal(modalCtrl: ModalController): Promise<any> {
+  const modal = await modalCtrl.create({
+    component: ThrowDriftBottleComponent,
+    breakpoints: [0.7, 1.0],
+    initialBreakpoint: 0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}
+
+
+

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203233.scss

@@ -0,0 +1,8 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+    --backdrop-opacity: 0.7; /* 设置背景遮罩的透明度 */
+  }
+  
+  ion-card {
+    background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+  }

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203239.scss

@@ -0,0 +1,8 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+    --backdrop-opacity: 0.7; /* 设置背景遮罩的透明度 */
+  }
+  
+  ion-card {
+    background-color: rgba(255, 255, 255, 0.4); /* 设置卡片的背景颜色为半透明白色 */
+  }

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203453.scss

@@ -0,0 +1,8 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+    --backdrop-opacity: 0.5; /* 设置背景遮罩的透明度 */
+  }
+  
+  ion-card {
+    background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+  }

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203457.scss

@@ -0,0 +1,8 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+  --backdrop-opacity: 0.5; /* 设置背景遮罩的透明度 */
+}
+
+ion-card {
+  background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203518.scss

@@ -0,0 +1,8 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+  --backdrop-opacity: 0.5; /* 设置背景遮罩的透明度 */
+}
+
+ion-card {
+  background-color: rgba(182, 212, 224, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203538.scss

@@ -0,0 +1,8 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+  --backdrop-opacity: 0.5; /* 设置背景遮罩的透明度 */
+}
+
+ion-card {
+  background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203553.scss

@@ -0,0 +1,8 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+  --backdrop-opacity: 0.1; /* 设置背景遮罩的透明度 */
+}
+
+ion-card {
+  background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203609.scss

@@ -0,0 +1,8 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+  --backdrop-opacity: -0.3; /* 设置背景遮罩的透明度 */
+}
+
+ion-card {
+  background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203759.scss

@@ -0,0 +1,9 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+    --backdrop-background: transparent; /* 设置背景遮罩为透明 */
+    --background: rgba(255, 255, 255, 0.9); /* 设置模态框本身的背景为半透明白色 */
+}
+
+ion-card {
+  background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203801.scss

@@ -0,0 +1,9 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+    --backdrop-background: transparent; /* 设置背景遮罩为透明 */
+    --background: rgba(255, 255, 255, 0.9); /* 设置模态框本身的背景为半透明白色 */
+}
+
+ion-card {
+  background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203820.scss

@@ -0,0 +1,9 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+    --backdrop-background: transparent; /* 设置背景遮罩为透明 */
+    --background: rgba(172, 247, 248, 0.5); /* 设置模态框本身的背景为半透明白色 */
+}
+
+ion-card {
+  background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203837.scss

@@ -0,0 +1,9 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+    --backdrop-background: transparent; /* 设置背景遮罩为透明 */
+    --background: rgba(172, 247, 248, 0.5); /* 设置模态框本身的背景为半透明白色 */
+}
+
+ion-card {
+  background-color: rgba(158, 216, 247, 0.3); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224203925.scss

@@ -0,0 +1,9 @@
+/* throw-drift-bottle.component.scss */
+ion-modal {
+    --backdrop-background: transparent; /* 设置背景遮罩为透明 */
+    --background: rgba(255, 255, 255, 0.9); /* 设置模态框本身的背景为半透明白色 */
+}
+
+ion-card {
+  background-color: rgba(255, 255, 255, 0.9); /* 设置卡片的背景颜色为半透明白色 */
+}