AcidificationModel/shoping/Calculation/Calculation.wxss

/* 页面主体样式 */
.page-body {
  padding-left: 10rpx;             /* 页面内容的左内边距 */
  background-color: #f8f8f8;       /* 设置页面背景颜色为浅灰色 */
}

/* 白色盒子样式，常用于容器组件 */
.white-box {
  width: 90%;                      /* 宽度占页面 90% */
  margin: 10rpx auto;              /* 设置外边距，居中显示 */
  padding: 20rpx;                  /* 内边距，增加内容与边框的间距 */
  background-color: #fff;          /* 设置背景颜色为白色 */
  border-radius: 10rpx;            /* 圆角边框，柔化视觉效果 */
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影，提升层次感 */
}

/* 输入行容器样式 */
.input-row {
  display: flex;                  /* 使用 Flexbox 布局 */
  align-items: center;            /* 垂直居中对齐 */
  justify-content: space-between; /* 标题和输入框分布在一行 */
  margin-bottom: 1rpx;           /* 行与行之间的间距 */
}

/* 页面分区标题样式 */
.page-section-title {
  flex-shrink: 0;                 /* 防止标题缩小 */
  font-size: 30rpx;               /* 标题字体大小 */
  font-weight: bold;              /* 标题加粗 */
  color: #333;                    /* 字体颜色 */
  margin-right: 10rpx;            /* 标题与输入框的间距 */
}

/* 输入框样式 */
.input-field {
  flex-grow: 1;                   /* 输入框占据剩余空间 */
  padding: 10rpx;                 /* 输入框内边距 */
  font-size: 28rpx;               /* 输入框字体大小 */
  color: #333;                    /* 输入框文本颜色 */
  border: none;                   /* 移除默认边框 */
  border-bottom: 1px solid #ddd;  /* 添加下划线边框 */
  outline: none;                  /* 移除默认选中样式 */
  transition: border-color 0.3s;  /* 增加选中时边框的动画过渡 */
}

/* 输入框选中状态 */
.input-field:focus {
  border-bottom: 1px solid #3EC01E; /* 输入框选中时底部边框变为绿色 */
}

/* 占位符样式 */
.input-field::placeholder {
  color: #aaa;                     /* 调整占位符颜色为浅灰 */
}

/* 单选框文本样式 */
.radio {
  font-size: 28rpx;                /* 文本字体大小 */
  color: #666;                     /* 文本颜色为中灰色 */
  margin: 5rpx 0;                  /* 上下外边距 */
}

/* 加粗文本样式 */
.bold-text {
  font-weight: bold;               /* 文本加粗 */
}

/* 绿色按钮容器样式 */
.green-btn {
  margin-top: 20rpx;               /* 顶部外边距 */
  text-align: center;              /* 按钮内容居中 */
}

/* 按钮样式 */
.btn {
  width: 60%;                      /* 按钮宽度占页面 80% */
  padding: 15rpx 0;                /* 上下内边距 */
  background-color: #3EC01E;       /* 按钮背景颜色为绿色 */
  color: #fff;                     /* 按钮文字颜色为白色 */
  font-size: 28rpx;                /* 按钮文字字体大小 */
  border-radius: 10rpx;            /* 圆角边框，柔化视觉效果 */
  transition: all 0.2s;            /* 增加交互的过渡动画 */
}

/* 按钮点击效果 */
.btn:active {
  background-color: #32A317;       /* 按下时按钮颜色稍深 */
  transform: scale(0.98);          /* 按下时轻微缩放效果 */
}

/* 下拉选择器的占位文本样式 */
.picker-placeholder {
  flex-grow: 1;                    /* 占据剩余空间 */
  color: #888;                     /* 占位文本颜色为浅灰色 */
  margin-right: 10px;              /* 右侧外边距 */
}

/* 下拉选择器样式 */
.picker {
  flex-shrink: 0;                  /* 防止组件缩小 */
  width: 100px;                    /* 设置选择器的宽度 */
}

/* 响应式设计：适配小屏幕 */
@media screen and (max-width: 320px) {
  .page-section-title {
    font-size: 26rpx;              /* 小屏设备标题字体稍小 */
  }

  .input-field {
    font-size: 24rpx;              /* 输入框字体适配小屏 */
  }

  .btn {
    font-size: 24rpx;              /* 按钮文字大小调整 */
  }
}

/* 弹窗背景 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9); /* 背景半透明 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 弹窗内容 */
.modal {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 300px;
  text-align: center;
}

/* 弹窗头部 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 关闭按钮 */
.close-btn {
  position: absolute;  /* 绝对定位 */
  top: 300px;  /* 距离顶部 10px */
  left: 315px; /* 距离左侧 10px */
  background: transparent;
  border: none;  /* 隐藏边框 */
  outline: none; /* 确保没有外部轮廓 */
  font-size: 15px;
  color: red;
  cursor: pointer;
}

/* 弹窗正文 */
.modal-body {
  font-size: 20px;
  color: #000;
}