.button{
    ion-button {
        --background: linear-gradient(to right, #71b6ff, #71f182); // 设置渐变色背景
    
        &:hover {
          --background: linear-gradient(to right, #71f182, #71b6ff); // 鼠标悬停时渐变色反转
        }
      }
}
.category{
    ion-grid {
          ion-col {
            ion-card {
              width: 100%; // 设置卡片宽度为100%
    
              ion-card-header {
                font-size: 1.5rem; // 调整字体大小，根据需要调整
                padding: 0%;
              }
    
              ion-card-content {
                padding: 0 0;
                img {
                  width: 100%; // 图片宽度填充满父容器
                  height: 200px; // 自动调整高度
                }
              }
            }
        }
      }
}

.item{
    ion-card {
        position: relative;
        overflow: hidden;

        .card-content {
          position: relative;
          padding: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          ion-card-header {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.5); // 添加半透明背景色
            color: white;
            padding: 10px;
            text-align: center;
            width: 80%; // 文字框宽度
            height:40%;
          }
        }
      }
    }