| | |
| | | : "亲爱的患者-家属,我们是医院的医护人员,为了更好地了解您的康复情况,请您抽一点宝贵时间,完成这份随访问卷。" |
| | | }} |
| | | </div> |
| | | <div v-if="orgname" class="questionnaire-signature">———{{ orgname }}</div> |
| | | <div v-if="orgname" class="questionnaire-signature"> |
| | | ———{{ orgname }} |
| | | </div> |
| | | </div> |
| | | |
| | | <el-divider class="custom-divider"></el-divider> |
| | |
| | | <div class="completion-content"> |
| | | <div class="completion-icon">✓</div> |
| | | <h2 class="completion-title">感谢您的配合!</h2> |
| | | <h2 class="completion-title">祝您健康快乐!</h2> |
| | | <p class="completion-message"> |
| | | {{ |
| | | jsy |
| | |
| | | res.data.param3, |
| | | res.data.param5 |
| | | ); |
| | | this.orgname = res.data.orgname; |
| | | if ( |
| | | res.data.orgname == "省立同德翠苑院区" || |
| | | res.data.orgname == "省立同德之江院区" || |
| | | res.data.orgname == "省立同德闲林院区" |
| | | ) { |
| | | this.orgname = "浙江省立同德医院"; |
| | | } else { |
| | | this.orgname = res.data.orgname; |
| | | } |
| | | |
| | | this.param6 = res.data.param6; |
| | | } |
| | |
| | | } |
| | | |
| | | .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 { |
| | | font-size: 16px; |
| | | color: #5a6c84; |
| | | color: #303a47; |
| | | line-height: 1.8; |
| | | max-width: 720px; |
| | | margin: 0; |
| | |
| | | text-indent: 2em; /* 首行缩进 */ |
| | | } |
| | | .questionnaire-signature { |
| | | font-size: 15px; |
| | | color: #8a9bb5; /* 比正文颜色稍浅,体现附属感 */ |
| | | font-size: 16px; |
| | | color: #303a47; |
| | | text-align: right; /* 右对齐 */ |
| | | max-width: 720px; |
| | | margin: 8px 0 0 auto; /* 上边距8px,右边靠齐 */ |
| | |
| | | |
| | | .question-stem { |
| | | display: grid; |
| | | grid-template-columns: auto 1fr auto; /* 题号自适应,文本占满剩余空间,题型标签自适应 */ |
| | | grid-template-columns: auto 1fr auto; |
| | | gap: 3px; |
| | | align-items: center; |
| | | align-items: start; /* 改为 start 避免居中导致的视觉问题 */ |
| | | margin-bottom: 20px; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .question-text { |
| | | line-height: 1.5; |
| | | color: #2c3e50; |
| | | font-weight: 500; |
| | | word-wrap: break-word; |
| | | overflow-wrap: break-word; |
| | | white-space: normal; /* 确保允许换行 */ |
| | | min-width: 0; /* 防止 grid 项溢出 */ |
| | | } |
| | | |
| | | .question-number { |
| | |
| | | min-width: 16px; |
| | | } |
| | | |
| | | .question-text { |
| | | line-height: 1.5; |
| | | color: #2c3e50; |
| | | font-weight: 500; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | // .question-text { |
| | | // line-height: 1.5; |
| | | // color: #2c3e50; |
| | | // font-weight: 500; |
| | | // overflow: hidden; |
| | | // text-overflow: ellipsis; |
| | | // white-space: nowrap; |
| | | // } |
| | | |
| | | .question-type-tag { |
| | | color: #3ba2f7; |
| | |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | |
| | | // 确保 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; |
| | | } |
| | | // :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; |
| | |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .question-stem { |
| | | font-size: 16px; |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | } |
| | | // .question-stem { |
| | | // font-size: 16px; |
| | | // flex-direction: column; |
| | | // align-items: flex-start; |
| | | // } |
| | | |
| | | .question-type-tag { |
| | | margin-left: 0; |