s202226701040/smarteat-app/src/app/page-edit/page-edit.component.scss

/* 设置整体页面的 padding */
ion-content {
  --padding-start: 16px;
  --padding-end: 16px;
  --padding-top: 16px;
  --padding-bottom: 16px;
}

/* 每个表单项之间的间距 */
ion-item {
  --inner-padding-start: 12px;
  --inner-padding-end: 12px;
  margin-bottom: 16px;
}

/* 为每个必填项添加红色星号，方便用户识别 */
ion-label span {
  color: red;
  font-weight: bold;
  margin-left: 5px;
}

/* 设置头像上传区域的样式 */
ion-avatar {
  margin-right: 16px;
  border-radius: 50%;
  overflow: hidden;
}

ion-item ion-avatar {
  margin-top: 10px;
}

/* 上传按钮的样式 */
ion-button[fill="outline"] {
  font-size: 14px;
  padding: 8px 16px;
  margin-top: 8px;
}

/* 输入框的样式 */
ion-input, ion-select {
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  background-color: #f5f5f5;
}

/* 在输入框聚焦时设置边框颜色 */
ion-input:focus, ion-select:focus {
  --border-color: #3880ff;
}

/* 标题栏的样式 */
ion-toolbar {
  --background: #f4f4f4;
  --color: #333;
  padding: 10px 20px;
}

/* 调整按钮的外观 */
ion-buttons ion-button {
  font-size: 16px;
  padding: 10px 16px;
}

/* 设置页面内容顶部和底部的间距 */
ion-content {
  --padding-start: 16px;
  --padding-end: 16px;
  --padding-top: 16px;
  --padding-bottom: 16px;
}

/* 活动水平选择框的样式 */
ion-select {
  font-size: 14px;
  padding: 10px 16px;
}

/* 优化输入框和选择框的整体样式 */
ion-select, ion-input {
  font-size: 16px;
  border-radius: 8px;
  background-color: #f8f8f8;
  margin-top: 8px;
}

ion-item {
  --inner-padding-start: 12px;
  --inner-padding-end: 12px;
}

ion-label {
  font-size: 16px;
  font-weight: 600;
}

/* 设置表单项间的间隔 */
ion-item {
  margin-bottom: 20px;
}

/* 页面底部按钮的样式 */
ion-toolbar ion-buttons {
  padding: 8px 0;
}

ion-button[strong] {
  background-color: #3880ff;
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
}

ion-button[strong]:hover {
  background-color: #007bff;
}

ion-button[color="medium"] {
  font-weight: normal;
  color: #666;
}