CampusBookConnect/src/app/details-book/details-book.page.scss

ion-content {
    --ion-background-color: #f5f5f5; /* 设置背景颜色 */
  }
  
  ion-card {
    background-color: #ffffff; /* 设置卡片背景颜色 */
    border-radius: 10px; /* 设置卡片圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    margin: 10px; /* 设置卡片之间的间距 */
    transition: transform 0.3s; /* 添加过渡效果 */
  }

  ion-card:hover {
    transform: translateY(-5px); /* 鼠标悬停时卡片向上移动 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加阴影效果 */
    background-color: #f8f8f8; /* 鼠标悬停时改变背景颜色 */
  }
  
  ion-card-title {
    font-size: 1.2em; /* 设置标题字体大小 */
    color: #333333; /* 设置标题颜色 */
  }
  
  ion-card-content {
    font-size: 0.9em; /* 设置内容字体大小 */
    color: #555555; /* 设置内容颜色 */
  }
  
  ion-button {
    font-size: 0.9em; /* 设置按钮字体大小 */
    color: #007bff; /* 设置按钮文字颜色 */
    
    border-radius: 5px; /* 设置按钮圆角 */
  }
  
  ion-text {
    font-size: 0.9em; /* 设置文本字体大小 */
    color: hsl(0, 0%, 20%); /* 设置文本颜色 */
  }

  .red-button {
    color: red; /* 设置按钮文字颜色为白色 */
  }

  .white-button {
    background-color: #007bff; /* 自定义颜色 */
    font-size: 1.2em;
    color: white; /* 设置按钮文字颜色为白色 */
  }

  ion-back-button::part(text) {
    display: none;
  }