/* 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-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; /* 移除可能的阴影效果(如果默认有的话) */ }