web3-books/src/app/tab1/tab1.page.scss

ion-header {
    ion-toolbar {
      ion-searchbar {
        --background: #fff;
        --border-radius: 10px;
        margin: 10px;
      }
    }
  }
  
  /*ion-segment {
    margin: 10px;
    --background: #fff;
    --indicator-color: #f56c6c;
    --indicator-height: 4px;
  }*/
  
  ion-card {
    margin: 10px;
  
    ion-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  
      ion-card-title {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0;
      }
    }
  
    ion-card-content {
      ion-list {
        ion-item {
          --padding-start: 0;
          --inner-padding-end: 0;
  
          ion-thumbnail {
            width: 80px;
            height: 80px;
            margin-right: 10px;
  
            ion-img {
              width: 100%;
              height: auto;
            }
          }
  
          ion-label {
            h2 {
              font-size: 1.1em;
              margin: 0;
            }
  
            p {
              font-size: 0.9em;
              color: #666;
              margin: 0;
            }
          }
        }
      }
    }
  }
  
  ion-grid {
    ion-row {
      ion-col {
        padding: 5px;
  
        ion-card {
          ion-card-header {
            padding: 10px 0;
            ion-card-title {
              font-size: 0.9em;
              margin: 0;
            }
          }
        }
      }
    }
  }
  .book-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  
    ion-img {
      width: 100%;
      height: 200px; /* 或者根据需要设置图片的固定高度 */
      object-fit: cover; /* 确保图片完整显示在容器内 */
    }
  
    ion-card-header {
      ion-card-title {
        font-size: 0.9em;
        margin: 0;
      }
    }
  }
  .segment {
    display: flex;
    justify-content: space-around; /* 在水平方向上均匀分布选项卡 */
    align-items: center; /* 垂直居中选项卡 */
    padding: 10px; /* 设置内边距 */
  }
  
  ion-segment-button {
    min-width: 60px; /* 设置最小宽度以确保每个选项卡的大小一致 */
  }
  ion-searchbar {
    transition: all 0.3s ease-in-out;
    max-width: 90%; // 初始状态下的最大宽度
    margin: 0 auto; // 居中显示
    display: block;
  
    &.expanded {
      max-width: 85%; // 展开状态下的最大宽度
      position: fixed;
      top: 0;
      left: 15;
      right: 0;
      z-index: 10;
    }
  }
  
  .search-results {
    margin-top: 56px; // 调整为搜索栏高度
  }