AcidificationModel/pages/AcidNeutralizationModel/AcidNeutralizationModel.wxss

.page-body {
  padding: 10rpx; /* 页面内容的内边距 */
  background-color: #f8f8f8; /* 浅灰色背景 */
}

.white-box {
  width: 90%; /* 宽度为父容器的 90% */
  margin: 10rpx auto; /* 上下间距为 10rpx，水平居中 */
  padding: 20rpx; /* 内边距 20rpx */
  background-color: #fff; /* 背景颜色为白色 */
  border-radius: 10rpx; /* 圆角效果 */
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.page-section-title {
  font-size: 30rpx; /* 标题字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 字体颜色为深灰色 */
  margin-bottom: 10rpx; /* 下边距 10rpx */
}

/* 设置 radio-group 为横向布局 */
.radio-group {
  display: flex;
  justify-content: space-between;  /* 使两个 radio 按钮左右分开 */
  align-items: center; /* 垂直居中对齐 */
  width: 100%; /* 确保 radio-group 容器占满整个宽度 */
}

.radio {
  font-size: 28rpx; /* 单选框文本字体大小 */
  color: #666; /* 字体颜色为浅灰色 */
  margin: 5rpx 0; /* 上下间距 5rpx */
  margin-left: 70rpx; /* 控制间距，使两个选项之间更紧凑 */
  margin-right: 70rpx; /* 控制间距，使两个选项之间更紧凑 */
}

.input-field {
  width: 100%; /* 输入框宽度为父容器的 100% */
  padding: 10rpx; /* 内边距 10rpx */
  font-size: 28rpx; /* 字体大小为 28rpx */
  color: #000; /* 字体颜色为深灰色 */
  border: none; /* 无边框 */
  border-bottom: 1px solid #ddd; /* 底部边框为浅灰色 */
}

.green-btn {
  margin-top: 20rpx; /* 上边距 20rpx */
  text-align: center; /* 文本居中 */
}

.btn {
  width: 80%; /* 按钮宽度为父容器的 80% */
  padding: 15rpx 0; /* 上下内边距为 15rpx */
  background-color: #00af92; /* 按钮背景颜色为绿色 */
  color: #fff; /* 按钮文字颜色为白色 */
  font-size: 28rpx; /* 字体大小为 28rpx */
  border-radius: 10rpx; /* 按钮圆角效果 */
}

.description-box {
  width: 90%; /* 白色框的宽度为父容器的 90% */
  margin: 10rpx auto; /* 上下间距 10rpx，水平居中 */
  padding: 15rpx; /* 增加文字周围空间 */
  background-color: #fff; /* 背景为白色 */
}

.bold-text {
  font-size: 32rpx; /* 加粗字体大小 */
  color: #000; /* 黑色字体 */
}

.description-box {
  width: 90%; /* 输入框宽度为父容器的 100% */
  background-color: #f8f8f8; /* 浅灰色背景 */
}

.bold-text {
  font-weight: bold; /* 加粗字体 */
  font-size: 26rpx; /* 缩小字体大小 */
  line-height: 1.5; /* 调整行高，使文本更加紧凑 */
  color: #333; /* 字体颜色为深灰色 */
}