AcidificationModel/pages/Calculate/Calculate.wxss

.green-box {
  width: 95%; /* 绿色框的宽度 */
  margin: 10rpx auto 0; /* 减少顶部外边距 */
  padding: 10rpx; /* 内边距 */
  background-color: #1aad19; /* 背景绿色 */
  border-radius: 10rpx; /* 圆角 */
  text-align: center; /* 内容水平居中 */
  color: #fff; /* 字体白色 */
}

.title {
  display: block; /* 强制换行 */
  font-size: 40rpx; /* 标题字体大小 */
  font-weight: bold; /* 加粗 */
}

.subtitle {
  display: block; /* 强制换行 */
  font-size: 36rpx; /* 副标题字体大小 */
  font-weight: bold; /* 加粗 */
  margin-top: 5rpx; /* 减少上下间距 */
}

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

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

.regular-text {
  font-size: 28rpx; /* 正文字体大小 */
  color: #333; /* 深灰色字体 */
}

.btn {
  width: 100%;
  height: 80rpx;
  background-color: var(--primary-color, #1aad19);
  color: #fff;
  border: none;
  border-radius: var(--border-radius, 10rpx);
  text-align: center;
  line-height: 45rpx;
  font-size: 36rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);  /* 添加阴影 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;  /* 背景颜色和阴影过渡效果 */
}

.btn:active {
  background-color: var(--active-color, #128c13);
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);  /* 按钮点击时阴影变化 */
}

.btn:hover {
  background-color: var(--hover-color, #16b818);
  cursor: pointer;  /* 鼠标悬浮时显示手型 */
}