ion-content {
  background-color: #ffffff;
}

ion-card {
  width: auto;
  height: 240px;
  border: 1px solid #d6d6d6;
}

.image-container{
  position: relative;
  overflow: hidden;
}
.image-container img{
  width: 100%;
  height: 75%;
  background-color: #000000;
  object-fit: cover;
  object-position: center;
}
.header {
  --background: rgba(166, 66, 253, 0.7); /* 设置顶部工具栏背景色为紫白色渐变的半透明色 */
  color: #000000; /* 设置文字颜色为白色 */
  ion-button{
    color: #000000;
  }
}

.user-profile {
  background: linear-gradient(to bottom, #a870da, #d6d5d6);
  color: #ffffff;
  padding: 20px;

  .user-info {
    text-align: center;

    img {
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }

    h3 {
      margin: 10px 0;
    }

    input {
      border: 1px solid #ffffff;
      border-radius: 2px;
      padding: 5px 10px;
      margin-bottom: 10px;
    }

    .info-icons {
      display: flex;
      justify-content: center;
      align-items: center;

      .icon-wrapper {
        display: flex;
        align-items: center;
        margin-right: 10px;

        ion-icon {
          margin-right: 5px;
        }
      }

      .action-buttons {
        display: flex;
        span {
          margin-right: 10px;
        }
      }
    }
  }

  .user-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;

    ion-button {
      background-color: rgba(255, 255, 255, 0.3);
      color: #000000;
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-size: 14px;
      margin: 1 10px;
      width: 130px;
      height: 50px;
    }
  }
  .user-actions ion-button:hover {
    background-color: rgba(255, 255, 255, 0.2); /* 鼠标悬停时按钮背景色变为更浅的白色半透明 */
  }
}
.content{
  justify-content: center;
  ion-card{
    margin: auto;
  }
}