workspace/.history/soul-app/src/app/tab1/tab1.page_20241228121533.scss

/* 整体ion-content背景 */
ion-content {
  --background: url('https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/4RHC2Jhp2l-0.png') no-repeat fixed!important;
  --background-size: cover; /* 使背景图片覆盖整个屏幕 */
}
  /* 设置卡片的样式 */
  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-button {
    font-size: 15px; /* 增大字体大小 */
    margin-top: 8px; /* 上间距，仅在需要时添加 */
    text-transform: none; /* 按钮文字不变形 */
    height: 35px;
    flex: 1; /* 每个按钮等分空间 */
    margin: 1 7px; /* 按钮之间的间距 */
    color: rgb(42, 50, 77);
    background-color: transparent; /* 背景透明 */
}
/* 按钮颜色为暖色系 */
.custom-button {
  --background: #f9dd94; /* 浅粉色，作为示例的暖色系 */
  --color: #FFFFFF; /* 白色文本 */
  
  font-size: 15px; /* 增大字体大小 */
  margin-top: 8px; /* 上间距，仅在需要时添加 */
  text-transform: none; /* 按钮文字不变形 */
  height: 40px; /* 按钮高度 */
}
  /* 设置搜索框的样式 */
  ion-searchbar {
    padding: 10px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    font-size: 16px; /* 字体大小 */
  }
  
  /* 设置用户评价星星的样式 */
  ion-icon[name="star"] {
    color: gold; /* 星星颜色 */
    font-size: 1.2rem; /* 星星大小 */
  }
  ion-card-header {
    --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
    /* 或者，如果你不使用CSS变量，可以直接使用background-color属性 */
    position: relative; /* 设置相对定位 */
  }
   
  /* 实际上，ion-toolbar默认会继承ion-card-header的样式，但你可以显式地设置它以确保一致性 */
  ion-toolbar {
    --background: #ffffff; /* 同样使用CSS变量，但通常不是必需的 */
  }
   
  /* 确保按钮的文本颜色是白色 */
  .button-text {
    color: #ffffff !important; /* 使用!important可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
  }

  ion-avatar {
    width: 50px; /* 或者你需要的任何尺寸 */
    height: 50px; /* 保持宽高一致，避免变形 */
  }
   
  ion-avatar img {
    width: 100%; /* 让图片填满avatar */
    height: auto; /* 保持图片比例 */
  }
  .header-image {
    width: 100%;
    height: auto; /* 保持图片比例 */
    border-radius: 50%; /* 可选：将图片设置为圆形 */
  }
  .button-toolbar {
    display: flex;
    justify-content: space-between; /* 均匀分布按钮 */
    background-color: transparent; /* 背景透明 */
    color: transparent; /* 文字透明 */
  }
  
  .button-container {
    display: flex;
    width: 100%; /* 使按钮容器占满整个宽度 */
    background-color: transparent; /* 背景透明 */
    color: transparent; /* 文字透明 */
  }
  ion-item {
    background: rgba(18, 10, 0, 0.01); /* 列表项背景为半透明白色 */
    margin-bottom: 10px; /* 列表项之间的间距 */
    padding: 0.5px; /* 内边距 */
  }