miniProgram/pages/sleepEvaluation/sleepEvaluation.wxss

/* pages/survey/survey.wxss */  
  
/* 通用样式 */  
.container {  
  width: 100%;  
  padding: 20rpx;
  text-align: left; 
}  

.section {  
  margin-bottom: 15rpx;  
  margin-top: 25rpx;  
}
.section_age {  
  margin-bottom: 15rpx;  
  margin-top: 25rpx; 
  margin-right:355rpx;
}
.section_stayExper {  
  margin-bottom: 15rpx;  
  margin-top: 25rpx; 
  margin-right:60rpx;
}

.title {
  text-align: center;
  font-size: 38rpx;
  color: #000000;
  font-weight: bold;
  margin: auto;
  margin-top: 10rpx;
}

.title_1 {
  text-align: left;
  font-size: 30rpx;
  color: #000000;
  font-weight: bold;
  margin: auto;
  margin-top: 10rpx;
}

/* 标题样式 */  
/* .title {  
  font-size: 18px;  
  font-weight: bold;  
  margin-bottom: 10px;  
} */ 
  
/* 输入框和选择器的样式 */  
.input-area, .picker-area {  
  margin-bottom: 20px;  
}  
  
.input-area input, .picker-area picker {  
  width: 100%;  
  padding: 10px;  
  box-sizing: border-box; /* 包括内边距和边框在总宽度内 */  
  border: 1px solid #ccc;  
  border-radius: 4px;  
  font-size: 16px;  
}  
  
/* 特别是针对选择器的样式（微信小程序中没有原生的<picker>标签，这里仅作为示例） */  
/* 实际上，您可能会使用微信小程序的picker组件，并通过自定义类来样式化它周围的容器 */  
.picker-container {  
  position: relative;  
}  
  
.picker-container picker {  
  /* 注意：这里的picker是假设的，微信小程序中picker组件的样式需要通过其他方式控制，如自定义模态框 */  
  /* 实际上，您可能不需要直接对picker进行样式化，而是样式化触发picker的按钮或容器 */  
}  
  
/* 提交按钮的样式 */  
.submit-btn {  
  display: block;  
  width: 100%;  
  padding: 10px;  
  background-color: #007aff;  
  color: white;  
  font-size: 16px;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
  margin-top: 20px;  
}  
  
.submit-btn:hover { /* 注意：微信小程序中不支持:hover伪类，这里仅作为Web开发的参考 */  
  background-color: #0056b3;  
}  
  
/* 如果有多选问题，可能需要为checkbox或radio列表添加样式 */  
.checkbox-group, .radio-group {  
  margin-bottom: 20px;  
}  
  
.checkbox-group label, .radio-group label {  
  display: block;  
  margin-bottom: 10px;  
}  
  
.full-width-textarea {  
  width: 100%; /* 使textarea宽度占满其父容器的宽度 */  
  border: 1px solid rgba(0, 0, 0, 0.1);   
  border-radius: 2px; /* 可选：添加轻微的边框圆角 */  
  padding: 10px; /* 可选：添加内边距，让文本不紧贴边框 */  
  box-sizing: border-box; /* 确保padding不会增加textarea的总宽度 */  
}

.custom-input {  
  width: 100%; /* 使input宽度占满其父容器的宽度 */  
  border: none; /* 移除默认的边框 */  
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 只设置底部边框为半透明细线 */  
  padding: 10px 0; /* 只在垂直方向上添加内边距，避免底部边框被内边距遮挡 */  
  background-color: transparent; /* 移除背景色 */  
  box-shadow: none; /* 移除可能的阴影效果（如果默认有的话） */  
}