20222670105/novel-app/src/app/person/person.page.scss

/* 全局样式 */
ion-app {
  background: url('/assets/images/background.jpg') no-repeat center center fixed;
  /* 添加背景图片 */
  background-size: cover;
  /* 背景图片覆盖整个内容区域 */
  background-position: center;
  /* 背景图片居中 */
  height: 100vh;
  /* 确保背景覆盖整个视口高度 */
  margin: 0;
  /* 移除默认的外边距 */
  padding: 0;
  /* 移除默认的内边距 */
}

/* 保持大部分样式不变，只添加必要的样式 */
.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.modal-content {
  --background: #fff;
  padding: 20px;
}

ion-content {
  --background: transparent;
  /* 设置为透明，以便背景从 ion-app 继承 */
  padding: 16px;
}

.profile-block {
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  padding: 20px; /* 内边距 */
  border-radius: 20px; /* 圆角 */
  margin: 20px; /* 外边距 */
}

.profile-info {
  text-align: center; /* 可选：使内容居中 */
}

.profile-pic {
  width: 60px; /* 头像宽度 */
  height: 60px; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
  border: 3px solid white; /* 白色边框 */
  margin-right: 10px; /* 头像与用户名之间的间距 */
}

h2 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px; /* 添加下边距以分隔用户名和性别 */
}

.gender {
  font-size: 16px;
  color: #666;
  margin-top: 5px; /* 添加上边距以确保与用户名之间有间隔 */
}

.navigate-button {
  color: #333; /* 按钮颜色 */
  margin-left: 10px; /* 添加左边距以确保与用户名之间有间隔 */
}

ion-card {
  margin-top: 20px; /* 卡片上边距 */
}

ion-card-header {
  background: rgba(105, 250, 255, 0.3); 
  color: #333; /* 深色字体 */
}

ion-card-title {
  font-size: 18px; /* 卡片标题字体大小 */
}

.completion {
  display: flex;
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中 */
}

.edit-button {
  color: #064351; /* 按钮颜色 */
  font-size: 16px; /* 按钮字体大小 */
}

ion-list {
  margin-top: 10px; /* 列表上边距 */
}

ion-item {
  --background: #fff; /* 白色背景 */
  --color: #333; /* 深色字体 */
  border-radius: 5px; /* 圆角 */
  margin: 5px 0; /* 项目间距 */
}