ion-searchbar {
    --background: #ffffff; // 背景颜色
    --placeholder-color: #aaaaaa; // 占位符颜色
    --text-color: #000000; // 文本颜色
    --border-color: #cccccc; // 边框颜色
    --border-radius: 15px; // 边框圆角
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 阴影效果
    // 你可以添加更多的CSS变量来定制样式
  }
  .button-container {
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
   
  .button-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
   
  .item-image {
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
  }
   
  .item-text {
    margin-top: 0px;
    font-size: 14px;
    color: #333;
  }
  .custom-padding .button-container {
    padding: 0px;
    box-shadow: none;
  }
  ion-content {
    --background: rgb(231, 244, 247);
  }
  // ion-avatar{
  //   position: absolute;
  //   top: 0;
  // }
  
  ion-toolbar {
    --background:rgb(231, 244, 247);;; /* 使用CSS变量设置背景色 */
  }
  ion-grid {
    padding: 5px;
  }
  
  ion-col {
    width: 50%; // Adjust the width based on the number of columns you want
  }
  
  ion-card {
    margin-bottom: 10px;
  }
  
  // You can use media queries to adjust the column width on different screen sizes
  @media (min-width: 576px) {
    ion-col {
      min-height: 200px; // 较小屏幕下，设置一个最小高度，让布局看起来更规整
    }
  }

  @media (min-width: 768px) {
    ion-col {
      min-height: 250px; // 中等屏幕下，适当增加最小高度
    }
  }

  @media (min-width: 992px) {
    ion-col {
      min-height: 300px; // 大屏幕下，再增加最小高度，使布局更有瀑布流错落感
    }}