.page-container { background-color: #f5f5f5; height: calc(100vh - 64px); box-sizing: border-box; } .questionnaire-container { padding: 32rpx; padding-bottom: 180rpx; // 为底部固定按钮留出足够空间(按钮高度88rpx + padding 48rpx + 安全区域 + 额外空间) background-color: #fff; min-height: 100%; } /* 标题 */ .questionnaire-title { font-size: 40rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 32rpx; } /* 介绍文字 */ .questionnaire-intro { font-size: 28rpx; color: black; line-height: 1.8; margin-bottom: 32rpx; text-align: justify; } /* 分数说明 */ .score-explanation { margin-bottom: 32rpx; } .score-explanation-text { font-size: 28rpx; color: #333; line-height: 1.6; font-weight: bold; } /* 问题组 */ .question-groups { margin-bottom: 32rpx; } .question-group { margin-bottom: 32rpx; } .group-title { font-size: 35rpx; font-weight: bold; color: #333; } /* 问题列表 */ .question-list { display: flex; flex-direction: column; gap: 32rpx; } .question-item { padding-bottom: 32rpx; border-bottom: 1px solid #f0f0f0; &:last-child { border-bottom: none; } } .question-name { font-size: 28rpx; color: #333; line-height: 1.6; font-weight: bold; margin: 20rpx 0 20rpx 0; } /* 分数选择 */ .score-radio-group { width: 100%; } .score-options { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; } .score-radio-item { margin-right: 32rpx; &:last-child { margin-right: 0; } } /* 其他意见 */ .other-comment-section { margin-top: 32rpx; margin-bottom: 32rpx; } .other-comment-title { font-size: 28rpx; color: #333; margin-bottom: 16rpx; } .other-comment-input { width: 100%; min-height: 200rpx; padding: 20rpx; background-color: #f8f8f8; border: 2rpx solid #e0e0e0; border-radius: 8rpx; font-size: 26rpx; color: #333; box-sizing: border-box; line-height: 1.6; } /* 结束语 */ .questionnaire-end { font-size: 26rpx; color: black; margin-top: 22rpx; margin-bottom: 32rpx; padding-top: 32rpx; border-top: 1px solid #f0f0f0; } /* 加载状态 */ .loading-container { display: flex; align-items: center; justify-content: center; min-height: 400rpx; padding: 32rpx; } .loading-text { font-size: 28rpx; color: #999; } /* 空数据状态 */ .empty-container { display: flex; align-items: center; justify-content: center; min-height: 400rpx; padding: 32rpx; } .empty-text { font-size: 28rpx; color: #999; } /* 保存按钮 */ .save-button-container { position: fixed; bottom: 0; left: 0; right: 0; padding: 24rpx 32rpx; padding-bottom: calc(env(safe-area-inset-bottom)); background-color: #fff; border-top: 1px solid #f0f0f0; box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); z-index: 100; box-sizing: border-box; } .save-button { width: 100%; height: 88rpx; line-height: 88rpx; background: linear-gradient(135deg, #1d6ff6 0%, #0d5dd8 100%); border-radius: 44rpx; color: #fff; font-size: 32rpx; font-weight: bold; border: none; display: block; text-align: center; transition: all 0.3s; &::after { border: none; } &[disabled] { background: #ccc; opacity: 0.6; } &:not([disabled]):active { opacity: 0.8; transform: scale(0.98); } }