ion-content {
  --background: #f4f4f4; /* 设置页面背景色 */
}

ion-avatar {
  width: 80px;   /* 设置宽度 */
  height: 80px;  /* 设置高度 */
}

ion-avatar img {
  border-radius: 10px;   /* 去掉圆角，使图片变为方形 */
  width: 100%;        /* 确保图片占满整个头像区域 */
  height: 100%;       /* 确保图片占满整个头像区域 */
  object-fit: cover;  /* 确保图片按比例填充并覆盖头像区域 */
}

.user-info ion-label {
  margin-bottom: 50px;  /* 设置 `ion-label` 的下边距 */
}

/* 设置 ion-card 上下的内边距 */
.custom-card {
  padding-top: 0px !important;    /* 调整卡片顶部内边距 */
  padding-bottom: 5px !important; /* 调整卡片底部内边距 */
  margin-top: 5px !important;     /* 可选：设置与其他部分的间距 */
  margin-bottom: 5px !important;  /* 可选：设置与其他部分的间距 */
}

/* 样式调整：去除按钮边框，保持按钮紧密 */
/* 去除按钮的边框和内边距，确保按钮紧密连接 */
.tight-button {
  --padding-start: 0px;       /* 去掉按钮的左右内边距 */
  --padding-end: 0px;
  margin-top: 5px !important;   /* 设置按钮的顶部外边距 */
  margin-bottom: 10px !important; /* 设置按钮的底部外边距 */
  --border-width: 0;           /* 去除按钮的边框 */
  --border-color: transparent !important;
  --border-radius: 0;          /* 去除圆角，保持直角 */
  --background: transparent;  /* 背景透明 */
  --inner-border-width: 0;     /* 去除按钮内部的边框 */
  font-size: 14px !important;               /* 调整字体大小 */
  height: 50px !important;                 /* 调整按钮的高度 */
}


/* 为紧邻的按钮之间添加分隔线，增加透明度 */
ion-item + ion-item {
  border-top: 1px solid rgba(204, 204, 204, 0.5);  /* 增加透明度的分隔线 */
}




// /* 页面背景和基础样式 */
// ion-content {
//   --background: #f2f2f2;
// }

/* 用户信息区 */
.user-info {
  display: flex;
  align-items: center;
  padding: 10px;
}

.user-info ion-avatar {
  margin-right: 16px;
}

.user-info h2 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.user-info p {
  margin: 4px 0;
  color: #666;
}

ion-card {
  margin: 16px 0;
  --background: #fff;
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

ion-card-header {
  background-color: #f8f8f8;
  padding: 10px;
}

ion-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

ion-item {
  margin: 8px 0;
}

ion-label {
  font-size: 14px;
  color: #555;
}

ion-button {
  margin-top: 10px;
}

/* 设置、收藏、帮助与反馈按钮样式 */
ion-item[button] {
  --background: #fff;
  --border-color: #ddd;
  --border-width: 1px;
  --border-radius: 10px;
  padding: 10px;
}

ion-item[button] ion-icon {
  color: #333;
}

ion-item[button] ion-label {
  font-weight: 500;
}
