AcidificationModel/pages/ModelTrain/ModelTrain.wxss

/* 表格容器 */
.table-container {
  width: 100%;
  overflow-x: auto; /* 启用横向滚动 */
  white-space: nowrap; /* 禁止换行 */
  background-color: #fff;
  border: 1rpx solid #ddd;
  margin-top: 10rpx; /* 添加上边距，确保不会和顶部元素重叠 */
  white-space: nowrap; /* 禁止换行 */
}

/* 表头样式 */
.table-header {
  display: flex;
  background-color: #61E054; /* 表头背景色 */
  font-weight: bold;
  text-align: center;
}

/* 表格单元格样式 */
.table-cell {
  flex: none;
  width: 250rpx; /* 固定宽度 */
  padding: 10rpx;
  text-align: center;
  font-size: 28rpx;
  color: #030803; /* 表头文字颜色 */
  border-right: 1rpx solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表格行样式 */
.table-row:nth-child(odd) {
  background-color: #E4FBE5; /* 奇数行背景色 */
}

.table-row:nth-child(even) {
  background-color: #fff; /* 偶数行背景色 */
}

/* 表格内容样式 */
.table-body {
  display: flex;
  flex-direction: column;
  width: max-content;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #ddd;
}

/* 单选框样式 */
.radio {
  display: inline-block;
  margin-right: 10px; /* 单选框之间的间隔 */
}

/* 单选框选中时的样式 */
.radio-checked {
  color: #1AAD19; /* 微信小程序主题色 */
}

/* 单选框未选中时的样式 */
.radio-unchecked {
  color: #ccc; /* 灰色表示未选中 */
}

/* 按钮通用样式 */
.button-container button {
  width: 50%; /* 按钮宽度100%，占满容器宽度 */
  height: 50px; /* 按钮高度 */
  line-height: 50px; /* 行高与按钮高度一致，使文本垂直居中 */
  background-color: #1AAD19; /* 微信绿 */
  color: white; /* 文字颜色为白色 */
  border-radius: 5px; /* 圆角边框 */
  font-size: 16px; /* 字体大小 */
  margin-top: 20px;
}

/* 按钮点击效果 */
.button-container button:active {
  background-color: #179B16; /* 点击时背景颜色变深 */
}


/* 下拉框容器样式 */
.picker-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  padding: 8px 12px; /* 内边距 */
  background-color: #fff; /* 背景颜色 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 4px; /* 圆角边框 */
  width: 200px; /* 固定宽度 */
  margin-left: auto; /* 自动左边距 */
  margin-right: auto; /* 自动右边距 */
  box-sizing: border-box; /* 确保边框和内边距包含在宽度内 */
}

/* 下拉框样式 */
.picker {
  flex-grow: 1; /* 使下拉框占据剩余空间 */
  text-align: left; /* 文字左对齐 */
}

/* 三角形样式 */
.picker-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333; /* 三角形颜色 */
  margin-left: 10px; /* 与下拉框文本的间隔 */
}

/* 下拉框标题样式 */
.picker-title {
  font-size: 16px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 字体颜色 */
  margin-bottom: 10px; /* 与下拉框之间的间隔 */
  text-align: center; /* 文字居中 */
  padding: 8px 0; /* 上下内边距 */
  background-color: #f0f0f0; /* 背景颜色 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 4px; /* 圆角边框 */
  width: 200px; /* 固定宽度 */
  margin-left: auto; /* 自动左边距 */
  margin-right: auto; /* 自动右边距 */
  box-sizing: border-box; /* 确保边框和内边距包含在宽度内 */
}