| | |
| | | } |
| | | |
| | | .questionnaire-title { |
| | | color: #175997; |
| | | color: #0d3b6b; // 基础深蓝色 |
| | | font-size: 28px; |
| | | font-weight: 700; |
| | | margin-bottom: 15px; |
| | | line-height: 1.3; |
| | | text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4); |
| | | |
| | | // 针对夜间模式的优化 |
| | | @media (prefers-color-scheme: dark) { |
| | | color: #4a90d9; // 夜间模式使用更亮的蓝色 |
| | | text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); |
| | | } |
| | | } |
| | | |
| | | .questionnaire-description { |
| | |
| | | } |
| | | |
| | | .question-options { |
| | | margin: 15px 0; |
| | | margin: 12px 0; |
| | | padding: 0 4px; |
| | | } |
| | | |
| | | // 修改 options-group 的样式 |
| | | .options-group { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 12px; |
| | | display: grid; |
| | | grid-template-columns: repeat(2, 1fr); // 改为两列网格 |
| | | gap: 10px; |
| | | width: 100%; |
| | | } |
| | | // 针对多选的 checkbox-group 也应用同样的网格布局 |
| | | :deep(.el-checkbox-group) { |
| | | display: grid; |
| | | grid-template-columns: repeat(2, 1fr); |
| | | gap: 10px; |
| | | width: 100%; |
| | | |
| | | @media (max-width: 420px) { |
| | | grid-template-columns: 1fr; |
| | | } |
| | | } |
| | | // 修改选项的样式 |
| | | .option-radio, |
| | | .option-checkbox { |
| | | margin: 0; |
| | | padding: 12px 15px; |
| | | padding: 10px 12px; |
| | | border-radius: 6px; |
| | | border: 1px solid #e0e0e0; |
| | | transition: all 0.2s; |
| | | display: flex; |
| | | align-items: center; |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | |
| | | &:hover { |
| | | border-color: #c0c4cc; |
| | | background-color: #f8fafc; |
| | | } |
| | | |
| | | // 确保内部内容自适应 |
| | | :deep(.el-radio__label), |
| | | :deep(.el-checkbox__label) { |
| | | display: inline; |
| | | font-size: 15px; |
| | | line-height: 1.4; |
| | | word-break: break-all; // 允许在任意字符处换行 |
| | | white-space: normal; // 允许自动换行 |
| | | padding-left: 6px; |
| | | } |
| | | |
| | | :deep(.option-radio .el-radio__label), |
| | | :deep(.option-checkbox .el-checkbox__label) { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 16px; |
| | | // 确保 radio/checkbox 图标不压缩 |
| | | :deep(.el-radio__input), |
| | | :deep(.el-checkbox__input) { |
| | | flex-shrink: 0; |
| | | } |
| | | } |
| | | |
| | | // :deep(.option-radio .el-radio__label), |
| | | // :deep(.option-checkbox .el-checkbox__label) { |
| | | // display: flex; |
| | | // align-items: center; |
| | | // font-size: 16px; |
| | | // } |
| | | |
| | | .option-text { |
| | | margin-right: 5px; |
| | | word-break: break-all; |
| | | white-space: normal; |
| | | line-height: 1.4; |
| | | } |
| | | |
| | | // 在小屏幕上调整为单列 |
| | | @media (max-width: 300px) { |
| | | .options-group { |
| | | grid-template-columns: 1fr; // 超小屏幕恢复单列 |
| | | } |
| | | } |
| | | .abnormal-indicator { |
| | | color: #f56c6c; |
| | | font-weight: bold; |