workspace/.history/soul-app/src/app/my-drift-bottle/my-drift-bottle.component_20241228115309.scss

/* 设置页面背景色 */
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;
  }
  .card-content-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
  
  .content-section {
    flex-grow: 1;
  }
  
  .button-section {
    margin-left: 10px;
    
  }
  
  /* 确保按钮文本正常横排 */
  ion-button {
    white-space: nowrap;
  }
  /* 设置列表项的样式 */
  ion-item {
    margin: 5px 0; /* 列表项之间的间距 */
  }
  ion-title {
    font-size: 24px; /* 增大字体大小 */
    font-weight: bold; /* 加粗 */
  }
  /* 设置卡片的样式 */
  ion-list {
    margin: 10px; /* 卡片之间的间距 */
    border-radius: 10px; /* 圆角效果 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  }
  ion-button {
    font-size: 15px; /* 增大字体大小 */
    margin-top: 8px; /* 上间距，仅在需要时添加 */
    text-transform: none; /* 按钮文字不变形 */
    height: 35px;
  }
  
  /* 设置列表项的样式 */
  ion-item {
    margin: 5px 0; /* 列表项之间的间距 */
  }
  
  /* 设置按钮的样式（如果按钮不在顶部方框内） */
  
  ion-toolbar {
  margin: auto;
  }
  .title-text{
  position: absolute;
  display: flex;
  left: 105px;
  margin: auto;
  top: 10px;
  color:rgb(69, 166, 180);
  }
  .custom-color {
    --background: rgb(69, 166, 180);
    --background-activated: rgba(69, 166, 180, 0.7);
    --color: white;
  }
  .butcolor{
    color: rgb(69, 166, 180);
  }