feat.liao.3.5

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

@@ -0,0 +1,18 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" 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>
+
+<ion-content [fullscreen]="true">
+
+</ion-content>

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

@@ -0,0 +1,62 @@
+
+ /* 设置页面背景色 */
+ion-content {
+    display: block;
+    background-image: url('/soul-prod/img/漂流瓶.jpg'); /* 设置背景图片路径 */
+    background-size: cover; /* 使背景图片覆盖整个元素 */
+    background-position: center; /* 将背景图片居中 */
+    background-repeat: no-repeat; /* 防止背景图片重复 */
+    min-height: 100vh; /* 确保背景图片至少覆盖整个视口高度 */
+  }
+
+  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/drift-bottle/drift-bottle.component_20241224110949.scss

@@ -0,0 +1,33 @@
+
+ /* 设置页面背景色 */
+ion-content {
+    display: block;
+    background-image: url('/soul-prod/img/漂流瓶.jpg'); /* 设置背景图片路径 */
+    background-size: cover; /* 使背景图片覆盖整个元素 */
+    background-position: center; /* 将背景图片居中 */
+    background-repeat: no-repeat; /* 防止背景图片重复 */
+    min-height: 100vh; /* 确保背景图片至少覆盖整个视口高度 */
+  }
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  
+  
+  
+  

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

@@ -0,0 +1,33 @@
+
+ /* 设置页面背景色 */
+ion-content {
+    display: block;
+    background-image: url('/assets/img/漂流瓶.jpg'); /* 设置背景图片路径 */
+    background-size: cover; /* 使背景图片覆盖整个元素 */
+    background-position: center; /* 将背景图片居中 */
+    background-repeat: no-repeat; /* 防止背景图片重复 */
+    min-height: 100vh; /* 确保背景图片至少覆盖整个视口高度 */
+  }
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  
+  
+  
+  

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

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" 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>
+
+<ion-content [fullscreen]="true">
+  <ion-avatar slot="start" >
+    <img src="/assets/img/漂流瓶.jpg"  >
+  </ion-avatar>
+</ion-content>

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

@@ -0,0 +1,37 @@
+
+ /* 设置页面背景色 */
+ion-content {
+    display: block;
+    background-image: url('/assets/img/漂流瓶.jpg'); /* 设置背景图片路径 */
+    background-size: cover; /* 使背景图片覆盖整个元素 */
+    background-position: center; /* 将背景图片居中 */
+    background-repeat: no-repeat; /* 防止背景图片重复 */
+    min-height: 100vh; /* 确保背景图片至少覆盖整个视口高度 */
+  }
+
+  
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  
+  
+  
+  

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

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

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

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" 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>
+
+<ion-content [fullscreen]="true">
+  <ion-avatar slot="start" >
+    <img src="/assets/img/漂流瓶.jpg"  >
+  </ion-avatar>
+</ion-content>

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

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" 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>
+
+<ion-content [fullscreen]="true">
+  <div class="full-screen-image">
+    <img src="/assets/images/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+</ion-content>

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

@@ -0,0 +1,50 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+}
+
+.full-screen-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.full-screen-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* 使图片覆盖整个容器并保持宽高比 */
+}
+  
+  ion-avatar {
+    width: 50px; /* 或者你需要的任何尺寸 */
+    height: 50px; /* 保持宽高一致，避免变形 */
+  }
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  
+  
+  
+  

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

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-toolbar>
+    <div class="toolbar-content">
+      <div class="button-container">
+        <ion-button (click)="goTab1()" 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>
+
+<ion-content [fullscreen]="true">
+  <div class="full-screen-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+</ion-content>

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

@@ -0,0 +1,7 @@
+
+
+<ion-content [fullscreen]="true">
+  <div class="full-screen-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+</ion-content>

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

@@ -0,0 +1,5 @@
+<ion-content [fullscreen]="true">
+  <div class="full-screen-image">
+    <img src="/assets/images/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+</ion-content>

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

@@ -0,0 +1,49 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.full-screen-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.full-screen-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain; /* 使图片适应容器并保持宽高比 */
+}
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+  ion-toolbar {
+  margin: auto;
+  }
+  .title-text{
+  position: absolute;
+  display: flex;
+  left: 125px;
+  margin: auto;
+  top: 10px;
+  }
+  
+  
+  
+  

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

@@ -0,0 +1,40 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.full-screen-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.full-screen-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain; /* 使图片适应容器并保持宽高比 */
+}
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+  
+  
+  
+  

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

@@ -0,0 +1,5 @@
+<ion-content [fullscreen]="true">
+  <div class="full-screen-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+</ion-content>

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

@@ -0,0 +1,40 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.full-screen-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.full-screen-image img {
+    width: 100%;
+    height: 130%;
+    object-fit: contain; /* 使图片适应容器并保持宽高比 */
+}
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+  
+  
+  
+  

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

@@ -0,0 +1,40 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.full-screen-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.full-screen-image img {
+    width: 100%;
+    height: 50%;
+    object-fit: contain; /* 使图片适应容器并保持宽高比 */
+}
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+  
+  
+  
+  

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

@@ -0,0 +1,40 @@
+/* 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: 70%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* 使图片覆盖整个容器并保持宽高比 */
+}
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+  
+  
+  
+  

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

@@ -0,0 +1,40 @@
+/* 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: 100%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* 使图片覆盖整个容器并保持宽高比 */
+}
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+  
+  
+  
+  

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

@@ -0,0 +1,40 @@
+/* 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: 70%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+   /* 使图片覆盖整个容器并保持宽高比 */
+}
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+  
+  
+  
+  

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

@@ -0,0 +1,41 @@
+/* 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: 70%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+}
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+  
+  
+  
+  

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

@@ -0,0 +1,41 @@
+/* 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: 90%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+}
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+  
+  
+  
+  

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

@@ -0,0 +1,49 @@
+/* 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: 90%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+}
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 70%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,9 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/images/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <div class="content-container">
+    <p>这是其他内容区域。</p>
+  </div>
+</ion-content>

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

@@ -0,0 +1,9 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <div class="content-container">
+    <p>这是其他内容区域。</p>
+  </div>
+</ion-content>

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

@@ -0,0 +1,49 @@
+/* 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: 70%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+}
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 70%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,49 @@
+/* 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: 70%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+}
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 0; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,49 @@
+/* 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: 70%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+}
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,49 @@
+/* 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; /* 使图片填充整个容器并可能被拉伸 */
+}
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,50 @@
+/* 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(75% 25% at 50% 100%); /* 波浪效果，根据需要调整参数 */
+}
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,60 @@
+/* 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; /* 使图片填充整个容器并可能被拉伸 */
+}
+.top-image::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 20%; /* 波浪形的高度 */
+    background: url('data:image/svg+xml;base64,...') repeat-x; /* 插入SVG波浪图案 */
+    z-index: 1; /* 确保波浪在图片之上 */
+}
+
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,60 @@
+/* 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; /* 使图片填充整个容器并可能被拉伸 */
+}
+.top-image::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 20%; /* 波浪形的高度 */
+    background: url('https://wanx.alicdn.com/wanx/1734965173446073991/text_to_image_lite_v2/c811a93084c84673a0e8e8102192f1e9_0.png?x-oss-process=image/watermark,image_aW1nL3dhdGVyMjAyNDExMjkwLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxtX2ZpeGVkLHdfMzAzLGhfNTI=,t_80,g_se,x_10,y_10/format,webp') repeat-x; /* 插入SVG波浪图案 */
+    z-index: 1; /* 确保波浪在图片之上 */
+}
+
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,50 @@
+/* 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; /* 使图片填充整个容器并可能被拉伸 */
+}
+
+
+  
+  ion-button {
+    font-size: 15px; /* 增大字体大小 */
+    margin-top: 8px; /* 上间距，仅在需要时添加 */
+    text-transform: none; /* 按钮文字不变形 */
+    height: 35px;
+  }
+  
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,53 @@
+/* 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; /* 使图片填充整个容器并可能被拉伸 */
+}
+.top-image::after {
+    content: '';
+    position: absolute;
+    bottom: -50px; /* 调整此值以改变圆弧的大小 */
+    left: 0;
+    width: 110%; /* 让伪元素稍微宽于其父级元素 */
+    height: 100px; /* 圆弧的高度 */
+    background: #fff; /* 匹配页面背景颜色 */
+    border-radius: 0 0 50% 50%; /* 创建半圆形 */
+    transform: scaleX(1.2); /* 可选：让圆弧更平缓 */
+    z-index: 1; /* 确保圆弧在图片之上 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(50% 40% at 50% 100%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(100% 80% at 50% 100%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(100% 100% at 50% 60%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(100% 80% at 50% 60%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(80% 80% at 50% 60%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(80% 80% at 50% 90%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(80% 80% at 90% 90%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(100% 70% at 90% 90%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(50% 50% at 20% 40%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(50% 50% at 60% 40%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(50% 50% at 60% 60%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(80% 80% at 60% 60%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(80% 10% at 60% 60%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(80% 120% at 60% 60%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(80% 120% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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(120% 120% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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% 120% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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% 140% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,42 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+
+
+/* 其他内容的样式可以根据需要添加 */
+.content-container {
+    position: relative;
+    z-index: 1; /* 确保其他内容在图片之上 */
+    padding: 20px;
+    margin-top: 120%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

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

@@ -0,0 +1,15 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button">
+    <img src="/assets/img/扔漂流瓶.png" alt="扔漂流瓶">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞漂流瓶.png" alt="捞漂流瓶">
+  </div>
+</ion-content>

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

@@ -0,0 +1,54 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+
+.button-container {
+    position: absolute;
+    bottom: 20%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 10px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 10px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+
+
+  
+  
+  
+  

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

@@ -0,0 +1,54 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+
+.button-container {
+    position: absolute;
+    bottom: 20%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+
+
+  
+  
+  
+  

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

@@ -0,0 +1,54 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+
+.button-container {
+    position: absolute;
+    bottom: 150%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+
+
+  
+  
+  
+  

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

@@ -0,0 +1,54 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+
+.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;
+}
+
+
+  
+  
+  
+  

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

@@ -0,0 +1,15 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶">
+  </div>
+</ion-content>

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

@@ -0,0 +1,15 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-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>
+</ion-content>

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

@@ -0,0 +1,68 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+
+.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_20241224152343.html

@@ -0,0 +1,18 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    <div class="wave wave1"></div>
+    <div class="wave wave2"></div>
+    <div class="wave wave3"></div>
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-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>
+</ion-content>

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

@@ -0,0 +1,104 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+/* 海浪样式 */
+.wave {
+    position: absolute;
+    bottom: 0;
+    width: 200%;
+    height: 100px;
+    background-size: 50% 100px;
+    pointer-events: none;
+}
+
+.wave1 {
+    background-image: url('/assets/img/wave-pattern.png'); /* 波浪图案 */
+    animation: move_wave 10s linear infinite;
+}
+
+.wave2 {
+    background-image: url('/assets/img/wave-pattern.png'); /* 波浪图案 */
+    animation: move_wave 15s linear -5s infinite;
+    opacity: 0.7;
+}
+
+.wave3 {
+    background-image: url('/assets/img/wave-pattern.png'); /* 波浪图案 */
+    animation: move_wave 20s linear -10s infinite;
+    opacity: 0.5;
+}
+
+/* 动画 */
+@keyframes move_wave {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-25%);
+    }
+}
+
+.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_20241224152455.scss

@@ -0,0 +1,69 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+
+
+.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_20241224152458.html

@@ -0,0 +1,16 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-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>
+</ion-content>

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

@@ -0,0 +1,79 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+&::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%; /* 双倍宽度以支持平移 */
+    height: 100%;
+    background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+    animation: wave-effect 5s linear infinite;
+    filter: blur(2px); /* 添加轻微模糊效果，使波浪更柔和 */
+}
+
+.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_20241224152702.scss

@@ -0,0 +1,90 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+&::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200%; /* 双倍宽度以支持平移 */
+        height: 100%;
+        background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+        animation: wave-effect 5s linear infinite;
+        filter: blur(2px); /* 添加轻微模糊效果，使波浪更柔和 */
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 200%; /* 双倍宽度以支持平移 */
+            height: 100%;
+            background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+            animation: wave-effect 5s linear infinite;
+            filter: blur(2px); /* 添加轻微模糊效果，使波浪更柔和 */
+        }
+    }
+
+.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_20241224152734.scss

@@ -0,0 +1,80 @@
+/* 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; /* 确保图片在工具栏之下 */
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200%; /* 双倍宽度以支持平移 */
+        height: 100%;
+        background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+        animation: wave-effect 5s linear infinite;
+        filter: blur(2px); /* 添加轻微模糊效果，使波浪更柔和 */
+    }
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+.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_20241224152803.scss

@@ -0,0 +1,80 @@
+/* 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; /* 确保图片在工具栏之下 */
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200%; /* 双倍宽度以支持平移 */
+        height: 100%;
+        background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+        animation: wave-effect 5s linear infinite;
+        filter: blur(5px); /* 添加轻微模糊效果，使波浪更柔和 */
+    }
+}
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+.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_20241224152846.scss

@@ -0,0 +1,87 @@
+/* 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; /* 确保图片在工具栏之下 */
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200%; /* 双倍宽度以支持平移 */
+        height: 100%;
+        background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+        animation: wave-effect 5s linear infinite;
+        filter: blur(5px); /* 添加轻微模糊效果，使波浪更柔和 */
+    }
+}
+@keyframes wave-effect {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+.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_20241224152934.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; /* 确保图片在工具栏之下 */
+    &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: 200%; /* 双倍宽度以支持平移 */
+        height: 100%;
+        background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+        animation: wave-effect 5s linear infinite;
+        filter: blur(5px); /* 添加轻微模糊效果，使波浪更柔和 */
+    }
+}
+@keyframes wave-effect {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+.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_20241224153046.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; /* 确保图片在工具栏之下 */
+    &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: 100%; /* 双倍宽度以支持平移 */
+        height: 100%;
+        background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+        animation: wave-effect 5s linear infinite;
+        filter: blur(5px); /* 添加轻微模糊效果，使波浪更柔和 */
+    }
+}
+@keyframes wave-effect {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+.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_20241224153107.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; /* 确保图片在工具栏之下 */
+    &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: 100%; /* 双倍宽度以支持平移 */
+        height: 100%;
+        background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+        animation: wave-effect 5s linear infinite;
+        filter: blur(10px); /* 添加轻微模糊效果，使波浪更柔和 */
+    }
+}
+@keyframes wave-effect {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+.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_20241224153115.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; /* 确保图片在工具栏之下 */
+    &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: 100%; /* 双倍宽度以支持平移 */
+        height: 100%;
+        background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
+        animation: wave-effect 5s linear infinite;
+        filter: blur(2px); /* 添加轻微模糊效果，使波浪更柔和 */
+    }
+}
+@keyframes wave-effect {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+
+
+.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_20241224153137.scss

@@ -0,0 +1,71 @@
+/* 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%); /* 使用椭圆剪裁路径 */
+}
+
+
+.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_20241224153642.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonAvatar,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,IonAvatar,
+        IonInput,IonSearchbar,IonCard,IonCardHeader
+        
+      ]
+})
+export class DriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+  addRipple(event: MouseEvent) {
+    const container = event.currentTarget as HTMLElement;
+    const rect = container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // 创建涟漪元素
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple');
+
+    // 设置涟漪的位置和大小
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.style.width = ripple.style.height = '100px'; // 可根据需要调整
+
+    // 添加到DOM并触发动画
+    container.appendChild(ripple);
+
+    // 动画结束后移除涟漪元素
+    setTimeout(() => {
+      ripple.remove();
+    }, 600); // 应与CSS动画时间相匹配
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153644.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_20241224153646.html

@@ -0,0 +1,16 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" (click)="addRipple($event)">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-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>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153810.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(209, 40, 40, 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_20241224154100.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_20241224154220.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { IonButton, IonIcon, IonItem, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonAvatar,IonCardContent,IonCard,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonIcon,IonButton,IonCardContent,IonAvatar,
+        IonInput,IonSearchbar,IonCard,IonCardHeader
+        
+      ]
+})
+export class DriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+  addRipple(event: MouseEvent) {
+    const container = event.currentTarget as HTMLElement;
+    const rect = container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // 创建涟漪元素
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple');
+
+    // 设置涟漪的位置和大小
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.style.width = ripple.style.height = '100px'; // 可根据需要调整
+
+    // 添加到DOM并触发动画
+    container.appendChild(ripple);
+
+    // 动画结束后移除涟漪元素
+    setTimeout(() => {
+      ripple.remove();
+    }, 600); // 应与CSS动画时间相匹配
+  }
+}

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

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonAvatar,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,IonAvatar,
+        IonInput,IonSearchbar,IonCard,IonCardHeader
+        
+      ]
+})
+export class DriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+addRipple(event: MouseEvent) {
+    const container = event.currentTarget as HTMLElement;
+    const rect = container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // 创建涟漪元素
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple');
+
+    // 设置涟漪的位置和大小
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.style.width = ripple.style.height = '100px'; // 可根据需要调整
+
+    // 添加到DOM并触发动画
+    container.appendChild(ripple);
+
+    // 动画结束后移除涟漪元素
+    setTimeout(() => {
+      ripple.remove();
+    }, 600); // 应与CSS动画时间相匹配
+  }
+}

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

@@ -0,0 +1,22 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" (click)="addRipple($event)">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-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 #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_20241224160005.html

@@ -0,0 +1,22 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" (click)="addRipple($event)">
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-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_20241224161152.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { IonHeader, IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader, IonCardHeader, IonCardTitle, IonAvatar, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar } from '@ionic/angular/standalone';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-drift-bottle',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Drift Bottle</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content [fullscreen]="true">
+      <div class="top-image" (click)="addRipple($event)">
+        <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+      </div>
+      
+      <!-- 其他内容可以放在这里 -->
+      
+      <!-- 左边的按钮 -->
+      <div class="button-container left-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 #backgroundAudio id="backgroundAudio" autoplay loop>
+        <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+      </audio>
+    </ion-content>
+  `,
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent,
+            IonList, IonListHeader, IonItem, IonCardTitle,
+            IonLabel, IonIcon, IonButton, IonCardContent, IonAvatar,
+            IonInput, IonSearchbar, IonCard, IonCardHeader
+          ]
+})
+export class DriftBottleComponent implements OnInit, OnDestroy {
+
+  constructor(private router: Router) { }
+
+  ngOnInit(): void {
+    const audioElement = document.getElementById('backgroundAudio') as HTMLAudioElement;
+    if (audioElement) {
+      audioElement.play();
+    }
+  }
+
+  ngOnDestroy(): void {
+    const audioElement = document.getElementById('backgroundAudio') as HTMLAudioElement;
+    if (audioElement) {
+      audioElement.pause();
+      audioElement.currentTime = 0; // Reset the audio to the beginning
+    }
+  }
+
+  goTab1(): void {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  addRipple(event: MouseEvent): void {
+    const container = event.currentTarget as HTMLElement;
+    const rect = container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // 创建涟漪元素
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple');
+
+    // 设置涟漪的位置和大小
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.style.width = ripple.style.height = '100px'; // 可根据需要调整
+
+    // 添加到DOM并触发动画
+    container.appendChild(ripple);
+
+    // 动画结束后移除涟漪元素
+    setTimeout(() => {
+      ripple.remove();
+    }, 600); // 应与CSS动画时间相匹配
+  }
+}
+
+
+

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

@@ -0,0 +1,91 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { IonHeader, IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader, IonCardHeader, IonCardTitle, IonAvatar, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar } from '@ionic/angular/standalone';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-drift-bottle',
+  template: `
+    
+    <ion-content [fullscreen]="true">
+      <div class="top-image" (click)="addRipple($event)">
+        <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+      </div>
+      
+      <!-- 其他内容可以放在这里 -->
+      
+      <!-- 左边的按钮 -->
+      <div class="button-container left-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 #backgroundAudio id="backgroundAudio" autoplay loop>
+        <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+      </audio>
+    </ion-content>
+  `,
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent,
+            IonList, IonListHeader, IonItem, IonCardTitle,
+            IonLabel, IonIcon, IonButton, IonCardContent, IonAvatar,
+            IonInput, IonSearchbar, IonCard, IonCardHeader
+          ]
+})
+export class DriftBottleComponent implements OnInit, OnDestroy {
+
+  constructor(private router: Router) { }
+
+  ngOnInit(): void {
+    const audioElement = document.getElementById('backgroundAudio') as HTMLAudioElement;
+    if (audioElement) {
+      audioElement.play();
+    }
+  }
+
+  ngOnDestroy(): void {
+    const audioElement = document.getElementById('backgroundAudio') as HTMLAudioElement;
+    if (audioElement) {
+      audioElement.pause();
+      audioElement.currentTime = 0; // Reset the audio to the beginning
+    }
+  }
+
+  goTab1(): void {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  addRipple(event: MouseEvent): void {
+    const container = event.currentTarget as HTMLElement;
+    const rect = container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // 创建涟漪元素
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple');
+
+    // 设置涟漪的位置和大小
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.style.width = ripple.style.height = '100px'; // 可根据需要调整
+
+    // 添加到DOM并触发动画
+    container.appendChild(ripple);
+
+    // 动画结束后移除涟漪元素
+    setTimeout(() => {
+      ripple.remove();
+    }, 600); // 应与CSS动画时间相匹配
+  }
+}
+
+
+

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

@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonAvatar,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,IonAvatar,
+        IonInput,IonSearchbar,IonCard,IonCardHeader
+        
+      ]
+})
+export class DriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+addRipple(event: MouseEvent) {
+    const container = event.currentTarget as HTMLElement;
+    const rect = container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // 创建涟漪元素
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple');
+
+    // 设置涟漪的位置和大小
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.style.width = ripple.style.height = '100px'; // 可根据需要调整
+
+    // 添加到DOM并触发动画
+    container.appendChild(ripple);
+
+    // 动画结束后移除涟漪元素
+    setTimeout(() => {
+      ripple.remove();
+    }, 600); // 应与CSS动画时间相匹配
+  }
+
+  
+}

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

@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
+  IonListHeader,IonCardHeader,IonCardTitle,IonAvatar,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
+  import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
+        IonList,IonListHeader,IonItem,IonCardTitle,
+        IonLabel,IonIcon,IonButton,IonCardContent,IonAvatar,
+        IonInput,IonSearchbar,IonCard,IonCardHeader
+        
+      ]
+})
+export class DriftBottleComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+
+  goTab1(){
+    this.router.navigate(['tabs/tab1']);
+   }
+  ngOnInit() {}
+addRipple(event: MouseEvent) {
+    const container = event.currentTarget as HTMLElement;
+    const rect = container.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // 创建涟漪元素
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple');
+
+    // 设置涟漪的位置和大小
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.style.width = ripple.style.height = '100px'; // 可根据需要调整
+
+    // 添加到DOM并触发动画
+    container.appendChild(ripple);
+
+    // 动画结束后移除涟漪元素
+    setTimeout(() => {
+      ripple.remove();
+    }, 600); // 应与CSS动画时间相匹配
+  }
+
+  
+}

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

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

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224161542.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">
+    <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>

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

@@ -1,14 +1,22 @@
-<ion-header>
-  <ion-toolbar>
-    <div class="toolbar-content">
-      <div class="button-container">
-        <ion-button (click)="goTab1()" 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>
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-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>

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

@@ -1,65 +1,83 @@
 /* drift-bottle.component.scss */
 :host {
     display: block;
-    background-image: url('/soul-prod/img/漂流瓶.jpg'); /* 设置背景图片路径 */
-    background-size: cover; /* 使背景图片覆盖整个元素 */
-    background-position: center; /* 将背景图片居中 */
-    background-repeat: no-repeat; /* 防止背景图片重复 */
-    min-height: 100vh; /* 确保背景图片至少覆盖整个视口高度 */
-  }
-  
- /* 设置页面背景色 */
+}
+
+/* 设置页面背景色 */
 ion-content {
-    --background: #ffffff; /* 白色背景 */
-  }
+    --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); /* 鼠标悬停时稍微再放大一点 */
+}
+
 
-  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;
-  }
   
   
   

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

@@ -1,8 +1,8 @@
 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';
+  IonListHeader,IonCardHeader,IonCardTitle,IonAvatar,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
   import { Router } from '@angular/router';
-  
+
 @Component({
   selector: 'app-drift-bottle',
   templateUrl: './drift-bottle.component.html',
@@ -10,7 +10,7 @@ import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList,
   standalone: true,
   imports: [IonHeader,IonToolbar,IonTitle,IonContent,
         IonList,IonListHeader,IonItem,IonCardTitle,
-        IonLabel,IonIcon,IonButton,IonCardContent,
+        IonLabel,IonIcon,IonButton,IonCardContent,IonAvatar,
         IonInput,IonSearchbar,IonCard,IonCardHeader
         
       ]