feat.liao.4.2

.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_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/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); /* 设置卡片的背景颜色为半透明白色 */
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224204012.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_20241224204132.scss

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

soul-app/src/app/drift-bottle/drift-bottle.component.html

@@ -9,8 +9,14 @@
     <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">
+  <div class="button-container right-button" >
     <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
   </div>
 

soul-app/src/app/drift-bottle/drift-bottle.component.scss

@@ -57,6 +57,11 @@ ion-content {
     right: 30px; /* 距离右边的距离 */
 }
 
+.middle-button {
+    left: 50%;
+    transform: translateX(-50%) translateY(50%); /* 向下移动一点 */
+}
+
 .button-container img {
     width: 60px; /* 按钮图片宽度 */
     height: 60px; /* 按钮图片高度 */
@@ -71,6 +76,18 @@ ion-content {
     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 {

soul-app/src/app/drift-bottle/drift-bottle.component.ts

@@ -1,7 +1,9 @@
 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 { 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',
@@ -19,16 +21,7 @@ export class DriftBottleComponent implements OnInit {
 
   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();
+  throwDriftBottleModal(){
+    openThrowDriftBottleModal(this.modalCtrl)
   }
 }

soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component.html

@@ -3,7 +3,7 @@
     <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
   </ion-card-header>
   <ion-card-content>
-    <!-- 学校输入 -->
+
     <ion-item>
       <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
     </ion-item>

soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component.scss

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

soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component.ts

@@ -67,4 +67,7 @@ export async function openThrowDriftBottleModal(modalCtrl: ModalController): Pro
     return data;
   }
   return null;
-}
+}
+
+
+