workspace/soul-app/src/app/tab1/tab1.page.scss

/* 设置页面背景色 */
ion-content {
    --background: #f9f9f9; /* 设置内容背景色 */
  }
  
  /* 设置卡片的样式 */
  ion-card {
    margin: 10px; /* 卡片之间的间距 */
    border-radius: 10px; /* 圆角效果 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  }
  
  /* 设置列表项的样式 */
  ion-item {
    margin: 5px 0; /* 列表项之间的间距 */
  }
  ion-button {
    font-size: 15px; /* 增大字体大小 */
    margin-top: 8px; /* 上间距，仅在需要时添加 */
    text-transform: none; /* 按钮文字不变形 */
    height: 35px;
}
  /* 设置搜索框的样式 */
  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可以确保这个规则具有更高的优先级，但通常不推荐，除非确实需要 */
    /* 然而，在这个例子中，由于按钮本身可能有自己的颜色设置，你可能不需要为.button-text设置颜色，
       而是应该确保按钮的color属性正确，并在需要时覆盖按钮的默认颜色设置 */
  }

  ion-avatar {
    width: 50px; /* 或者你需要的任何尺寸 */
    height: 50px; /* 保持宽高一致，避免变形 */
  }
   
  ion-avatar img {
    width: 100%; /* 让图片填满avatar */
    height: auto; /* 保持图片比例 */
  }
  .header-image {
    width: 100%;
    height: auto; /* 保持图片比例 */
    border-radius: 50%; /* 可选：将图片设置为圆形 */
  }