miniProgram/subpages/sleepEvaluation/sleepEvaluation.wxss

/* pages/survey/survey.wxss */

/* 通用样式 */
.container {
  width: 100%;
  display: block;
  background: #CCEDF5;
}

.section {
  width: calc(100%);
  padding: 30rpx 0;
  margin-top: 30rpx;
  background: #FBFDFC;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
}

.section-top {
  margin: 0 auto;
  width: 672rpx;
  position: relative;
}

.tips {
  position: absolute;
  top: 40rpx;
  left: 40rpx;
  right: 40rpx;
  width: 592rpx;
  line-height: 40rpx;
  color: #5A5A5A;
  font-size: 24rpx;
}

.section text {
  margin: 0 30rpx;
  font-size: 32rpx;
  line-height: 48rpx;
  color: #333333;
}

.radio-view {
  width: 100vw;
  display: flex;
  margin-top: 30rpx;
  flex-direction: row;
  align-items: center;
}

.radio-icon {
  width: 36rpx;
  margin-left: 10rpx;
  height: 36rpx;
}

.radio-title {
  font-size: 28rpx;
  margin: 0 20rpx;
}

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

.title_1 {
  width: 100%;
  text-align: center;
  color: #333333;
  font-size: 32rpx;
  margin: 60rpx auto auto;
}

/* 标题样式 */
/* .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: 690rpx;
  background: #F5F7FB;
  /* 使textarea宽度占满其父容器的宽度 */
  border: none;
  border-radius: 2px;
  /* 可选：添加轻微的边框圆角 */
  padding: 10px;
  margin: auto;
  font-size: 28rpx;
  line-height: 48rpx;
  margin-top: 30rpx;
  /* 可选：添加内边距，让文本不紧贴边框 */
  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;
  /* 移除可能的阴影效果（如果默认有的话） */
}

input {
  width: calc(100% - 200rpx);
  margin: 15rpx auto auto;
  padding: 0 20rpx;
  line-height: 70rpx;
  border-radius: 5rpx;
  color: #333333;
  font-size: 28rpx;
  height: 70rpx;
  border-bottom: 1rpx solid #666666;
}


.commit-btn {
  line-height: 90rpx;
  border-radius: 45rpx;
  text-align: center;
  width: calc(100vw - 120rpx);
  display: block;
  color: #FFFFFF;
  font-size: 32rpx;
  margin: 80rpx auto 80rpx auto;
  background: linear-gradient(278deg, #0ABCA4 0%, rgba(11, 195, 170, 0.8) 100%);
}

.custom-radio-class {
  /* width: calc(100vw - 40rpx) !important; */
  /* padding: 15rpx 20rpx; */
  /* display: flex;
  align-items: flex-start !important;
  flex-direction: row; */
}

.van-radio__label,
.van-checkbox__label {
  flex: 1;
  margin-right: 30rpx;
}

.van-radio-group {
  /* margin-top: 15rpx; */
  margin-bottom: 15tpx;
}

.bottom-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 60rpx);
  margin: 60rpx auto 30rpx auto;
}