فهرست منبع

feat.liao.3.5

19136808282 3 ماه پیش
والد
کامیت
9f7c047ba2
99فایلهای تغییر یافته به همراه4334 افزوده شده و 74 حذف شده
  1. 18 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224110750.html
  2. 62 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224110820.scss
  3. 33 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224110949.scss
  4. 33 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224111927.scss
  5. 20 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224112221.html
  6. 37 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224112301.scss
  7. 27 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224112352.ts
  8. 20 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224112417.html
  9. 20 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224113239.html
  10. 50 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224113321.scss
  11. 20 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224113349.html
  12. 7 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224113401.html
  13. 5 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224113628.html
  14. 49 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224113652.scss
  15. 40 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224113657.scss
  16. 5 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224113708.html
  17. 40 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224114445.scss
  18. 40 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224114505.scss
  19. 40 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224114755.scss
  20. 40 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224115317.scss
  21. 40 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224115340.scss
  22. 41 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224115639.scss
  23. 41 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224115817.scss
  24. 49 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224115924.scss
  25. 9 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224115925.html
  26. 9 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224115939.html
  27. 49 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224115958.scss
  28. 49 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224142212.scss
  29. 49 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224142224.scss
  30. 49 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224143012.scss
  31. 50 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224143207.scss
  32. 60 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224143432.scss
  33. 60 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224143620.scss
  34. 50 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224143746.scss
  35. 53 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224143953.scss
  36. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144041.scss
  37. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144147.scss
  38. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144203.scss
  39. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144211.scss
  40. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144227.scss
  41. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144237.scss
  42. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144249.scss
  43. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144312.scss
  44. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144511.scss
  45. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144528.scss
  46. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144535.scss
  47. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144548.scss
  48. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144637.scss
  49. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144650.scss
  50. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144721.scss
  51. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144746.scss
  52. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144755.scss
  53. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144812.scss
  54. 42 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224144824.scss
  55. 15 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224150311.html
  56. 54 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224150311.scss
  57. 54 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224150335.scss
  58. 54 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224150351.scss
  59. 54 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224150354.scss
  60. 15 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224151440.html
  61. 15 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224151729.html
  62. 68 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224151748.scss
  63. 18 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152343.html
  64. 104 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152410.scss
  65. 69 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152455.scss
  66. 16 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152458.html
  67. 79 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152643.scss
  68. 90 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152702.scss
  69. 80 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152734.scss
  70. 80 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152803.scss
  71. 87 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152846.scss
  72. 88 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152934.scss
  73. 88 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153046.scss
  74. 88 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153107.scss
  75. 88 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153115.scss
  76. 71 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153137.scss
  77. 49 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153642.ts
  78. 84 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153644.scss
  79. 16 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153646.html
  80. 84 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224153810.scss
  81. 84 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224154100.scss
  82. 49 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224154220.ts
  83. 49 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224154243.ts
  84. 22 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224155308.html
  85. 22 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224160005.html
  86. 96 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224161152.ts
  87. 91 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224161310.ts
  88. 51 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224161357.ts
  89. 51 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224161454.ts
  90. 27 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224161532.ts
  91. 22 0
      .history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224161542.html
  92. 22 14
      soul-app/src/app/drift-bottle/drift-bottle.component.html
  93. 75 57
      soul-app/src/app/drift-bottle/drift-bottle.component.scss
  94. 3 3
      soul-app/src/app/drift-bottle/drift-bottle.component.ts
  95. BIN
      soul-app/src/assets/audio/海浪.mp3
  96. BIN
      soul-app/src/assets/img/扔一个.png
  97. BIN
      soul-app/src/assets/img/捞一个.png
  98. 0 0
      soul-app/src/assets/img/漂流瓶.jpg
  99. BIN
      soul-app/src/assets/img/漂流瓶背景.png

+ 18 - 0
.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>

+ 62 - 0
.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;
+  }
+  
+  
+  
+  

+ 33 - 0
.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;
+  }
+  
+  
+  
+  

+ 33 - 0
.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;
+  }
+  
+  
+  
+  

+ 20 - 0
.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>

+ 37 - 0
.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;
+  }
+  
+  
+  
+  

+ 27 - 0
.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() {}
+
+}

+ 20 - 0
.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>

+ 20 - 0
.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>

+ 50 - 0
.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;
+  }
+  
+  
+  
+  

+ 20 - 0
.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>

+ 7 - 0
.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>

+ 5 - 0
.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>

+ 49 - 0
.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;
+  }
+  
+  
+  
+  

+ 40 - 0
.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;
+  }
+  
+
+  
+  
+  
+  

+ 5 - 0
.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>

+ 40 - 0
.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;
+  }
+  
+
+  
+  
+  
+  

+ 40 - 0
.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;
+  }
+  
+
+  
+  
+  
+  

+ 40 - 0
.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;
+  }
+  
+
+  
+  
+  
+  

+ 40 - 0
.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;
+  }
+  
+
+  
+  
+  
+  

+ 40 - 0
.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;
+  }
+  
+
+  
+  
+  
+  

+ 41 - 0
.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;
+  }
+  
+
+  
+  
+  
+  

+ 41 - 0
.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;
+  }
+  
+
+  
+  
+  
+  

+ 49 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 9 - 0
.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>

+ 9 - 0
.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>

+ 49 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 49 - 0
.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; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 49 - 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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 49 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 50 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 60 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 60 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 50 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 53 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 42 - 0
.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%; /* 内容从图片下方开始 */
+}
+
+  
+  
+  
+  

+ 15 - 0
.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>

+ 54 - 0
.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;
+}
+
+
+  
+  
+  
+  

+ 54 - 0
.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;
+}
+
+
+  
+  
+  
+  

+ 54 - 0
.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;
+}
+
+
+  
+  
+  
+  

+ 54 - 0
.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;
+}
+
+
+  
+  
+  
+  

+ 15 - 0
.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>

+ 15 - 0
.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>

+ 68 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 18 - 0
.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>

+ 104 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 69 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 16 - 0
.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>

+ 79 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 90 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 80 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 80 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 87 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 88 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 88 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 88 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 88 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 71 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 49 - 0
.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动画时间相匹配
+  }
+}

+ 84 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 16 - 0
.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>

+ 84 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 84 - 0
.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); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

+ 49 - 0
.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动画时间相匹配
+  }
+}

+ 49 - 0
.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动画时间相匹配
+  }
+}

+ 22 - 0
.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>

+ 22 - 0
.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>

+ 96 - 0
.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动画时间相匹配
+  }
+}
+
+
+

+ 91 - 0
.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动画时间相匹配
+  }
+}
+
+
+

+ 51 - 0
.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动画时间相匹配
+  }
+
+  
+}

+ 51 - 0
.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动画时间相匹配
+  }
+
+  
+}

+ 27 - 0
.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() {}
+
+}

+ 22 - 0
.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>

+ 22 - 14
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>

+ 75 - 57
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;
-  }
   
   
   

+ 3 - 3
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
         
       ]

BIN
soul-app/src/assets/audio/海浪.mp3


BIN
soul-app/src/assets/img/扔一个.png


BIN
soul-app/src/assets/img/捞一个.png


+ 0 - 0
soul-prod/img/漂流瓶.jpg → soul-app/src/assets/img/漂流瓶.jpg


BIN
soul-app/src/assets/img/漂流瓶背景.png