AcidificationModel/pages/Calculate/Calculate.wxss

/* 页面整体背景 */
.green-box {
  background-color: #4caf50; /* 绿色背景 */
  padding: 10px 20px;  /* 减小上下内边距，控制高度 */
  text-align: center;
  display: flex;
  flex-direction: column; /* 设置垂直方向布局 */
  justify-content: center;
  align-items: center;
  max-height: 100rpx; /* 限制最大高度 */
  max-width: calc(100% - 10px); /* 宽度最大100%，两边各留5px */
  margin-left: 18px;  /* 左边留5px */
  margin-right: 18px; /* 右边留5px */
  box-sizing: border-box; /* 确保 padding 和 margin 不影响宽度计算 */
}


.title-en {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 5px; /* 英文标题和中文标题之间的间距 */
}

.title-cn {
  font-size: 16px;
  color: #f1f1f1;
  font-weight: normal;
}

/* 描述文本样式 */
.description {
  font-size: 16px;
  color: #000;
  margin-top: 5px;  /* 确保文本紧接着标题下面 */
  text-align: center; /* 保持文本居中 */
}

/* 普通文本样式 */
.container {
  padding: 10px 20px;  /* 调整容器的内边距，减小文字与容器的距离 */
  line-height: 1;  /* 调整行高，控制文字的垂直间距 */
}

.regular-text {
  font-size: 16px;  /* 设置字体大小 */
  color: #333333;
}

.green-box {
  padding: 20px;
  background-color: #4CAF50;
}

.green-btn {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.btn {
  width: 45%;
  padding: 6px 0;  /* 减小内边距，按钮看起来会更矮 */
  background-color: #00C853;
  color: white;
  text-align: center;
  border-radius: 5px;
  font-size: 24px;  /* 调整字体大小，适应按钮高度 */
  line-height: 30px; /* 调整按钮内文字的行高 */
}



.btn:hover {
  background-color: #45a049; /* 按钮悬停时的颜色变化 */
}

.btn:active {
  background-color: #388e3c; /* 按钮点击时的颜色变化 */
}

/*.green-btn {
  display: flex; /* 使用 flex 布局 
  justify-content: space-between; /* 水平分布按钮，间距自动 
  gap: 10rpx; /* 添加按钮之间的间距 
}

.btn {
  background-color: #32cd32;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}*/