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

/* 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; /* 白色背景 */
  }

  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;
  }