<template>
|
<div class="questionnaire-optimized">
|
<div class="content-wrapper" v-if="!accomplish">
|
<div class="questionnaire-container">
|
<!-- 问卷标题区域 -->
|
<div class="questionnaire-header">
|
<h1 class="questionnaire-title">
|
{{ taskname ? taskname : "问卷" }}
|
</h1>
|
<div class="questionnaire-description">
|
{{
|
kcb
|
? kcb
|
: "亲爱的患者-家属，我们是医院的医护人员，为了更好地了解您的康复情况，请您抽一点宝贵时间，完成这份随访问卷。"
|
}}
|
</div>
|
</div>
|
|
<el-divider class="custom-divider"></el-divider>
|
|
<!-- 问卷题目区域 -->
|
<div class="questions-section">
|
<div
|
class="question-item"
|
v-for="(item, index) in visibleQuestions"
|
:key="item.id"
|
:class="{
|
'has-warning':
|
item.prompt &&
|
item.scriptResult &&
|
(item.scriptType !== 2 || item.scriptResult.length > 0),
|
}"
|
>
|
<!-- 题目题干 -->
|
<div class="question-stem">
|
<span class="question-number"
|
>{{ getVisibleQuestionIndex(index) }}.</span
|
>
|
<span class="question-text">{{ item.scriptContent }}</span>
|
<span class="question-type-tag">
|
{{
|
item.scriptType === 1
|
? "[单选]"
|
: item.scriptType === 2
|
? "[多选]"
|
: "[问答]"
|
}}
|
</span>
|
</div>
|
|
<!-- 单选题目 -->
|
<div
|
class="question-options"
|
v-if="item.scriptType == 1 && !item.ishide"
|
>
|
<el-radio-group class="options-group" v-model="item.scriptResult">
|
<el-radio
|
v-for="(
|
option, optionIndex
|
) in item.svyTaskTemplateTargetoptions"
|
:key="optionIndex"
|
:label="option.optioncontent"
|
:class="{
|
'abnormal-option':
|
option.isabnormal &&
|
item.scriptResult == option.optioncontent,
|
}"
|
@click.native.prevent="
|
handleRadioToggle(
|
item,
|
index,
|
item.svyTaskTemplateTargetoptions,
|
option.optioncontent
|
)
|
"
|
class="option-radio"
|
>
|
<span class="option-text">{{ option.optioncontent }}</span>
|
</el-radio>
|
</el-radio-group>
|
</div>
|
|
<!-- 多选题目 -->
|
<div class="question-options" v-if="item.scriptType == 2">
|
<el-checkbox-group
|
class="options-group"
|
v-model="item.scriptResult"
|
>
|
<el-checkbox
|
v-for="(
|
option, optionIndex
|
) in item.svyTaskTemplateTargetoptions"
|
:key="optionIndex"
|
:label="option.optioncontent"
|
:class="{
|
'abnormal-option': option.isabnormal,
|
}"
|
@change="$forceUpdate()"
|
class="option-checkbox"
|
>
|
<span class="option-text">{{ option.optioncontent }}</span>
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
|
<!-- 填空题目 -->
|
<div class="question-input" v-if="item.scriptType == 4">
|
<el-input
|
type="textarea"
|
:rows="3"
|
placeholder="请输入您的回答"
|
v-model="item.scriptResult"
|
clearable
|
class="answer-textarea"
|
></el-input>
|
</div>
|
|
<!-- 提示信息 -->
|
<div
|
class="question-warning"
|
v-show="
|
item.prompt &&
|
item.scriptResult &&
|
(item.scriptType !== 2 || item.scriptResult.length > 0)
|
"
|
>
|
<el-alert
|
:title="item.prompt"
|
type="warning"
|
:closable="false"
|
class="warning-alert"
|
></el-alert>
|
</div>
|
</div>
|
</div>
|
|
<!-- 提交按钮 -->
|
<div class="submit-section">
|
<el-button type="primary" @click="cache(true)" class="submit-button">
|
提交问卷
|
</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 完成页面 -->
|
<div class="completion-page" v-else>
|
<div class="completion-content">
|
<div class="completion-icon">✓</div>
|
<h2 class="completion-title">感谢您的配合!</h2>
|
<p class="completion-message">
|
{{
|
jsy
|
? jsy
|
: "生活上要劳逸结合，注意休息和营养，适当锻炼，戒烟限酒，保持心情舒畅，定期复诊。那本次回访就到这里，祝您身体健康！"
|
}}
|
</p>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getExternalfollowup,
|
getCachequestionnaire,
|
Cachequestionnaire,
|
Submitaquestionnaire,
|
geturlinfo,
|
} from "@/api/AiCentre/index";
|
import JSEncrypt from "jsencrypt";
|
export default {
|
data() {
|
return {
|
taskid: 355,
|
patid: 265823,
|
kcb: "",
|
excep: 0,
|
isabnormal: 0,
|
taskname: "",
|
questionList: [],
|
jsy: null,
|
dialogVisible: false,
|
Endornot: true,
|
accomplish: false,
|
// 前端公钥
|
publicKey:
|
"MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKR0yHv0rbJWQE+Sc7/FwpW66qMd9qX2k6z+SDgkSdxWh/1GbBoAP7bDQQRF6vXmoKsD2ya42H6XRLSDXAoayuMCAwEAAQ== ",
|
// 后端私钥
|
privateKey:
|
" MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEAtDOpbUQhcEoYy77agRhIHmAzs7H+KHJhN56gTTI9fWq23j77nI055MFV3oQQziIrNUTNaPpEQhZXBpI0+f9K9QIDAQABAkB3n0fcWfrcoMN/FU3VnrnZOEF6CzFNxkgU9P8y36QECWKZ9JhYQkNpKrMC9oXlN3VSaRigV7B+L/I/a0Rs1W+tAiEA4jx7xcXJ4y4BNwAmVHt6NNiEkzIwWnwC/0qsEu8NsOsCIQDL6MMn1D2uznC6OuOWpxDCkBh1JL1NzZTZeH2G+hj7nwIgKGAC9tjFnvWm4dn0/T7MIIJDpsFeP8fCAS2iZ/6hwuECIAS/eLvWr1EAsZNEh8QcQ8GkBU3E+ztyjAK8UX/xFt/VAiBf79/1tDErX4/DChecM8w3c3DhbBcjuE3fHZn7p6/UKg==",
|
formData: {
|
question1: "",
|
question2: "",
|
question3: "",
|
},
|
};
|
},
|
mounted() {
|
// window.addEventListener("beforeunload", this.cache);
|
},
|
beforeDestroy() {
|
// window.removeEventListener("beforeunload", this.cache);
|
},
|
created() {
|
this.geturlinfo();
|
},
|
computed: {
|
// 计算属性：获取所有可见的题目
|
visibleQuestions() {
|
return this.questionList.filter((question) => !question.ishide);
|
},
|
},
|
methods: {
|
// 解析urlid
|
geturlinfo() {
|
// let url = window.location.href;
|
let url = this.$route.query.p;
|
console.log(url, "url");
|
// let url = 'http://218.108.11.22:8093/sf/003';
|
// let urlid = this.extractLastSegmentFromUrl(url);
|
|
geturlinfo(url).then((res) => {
|
if (res.code == 200) {
|
this.getQuestionnaire(
|
res.data.param1,
|
res.data.param2,
|
res.data.param3,
|
res.data.param5
|
);
|
}
|
});
|
},
|
// extractLastSegmentFromUrl(url) {
|
// // 找到最后一个'/'的位置
|
// const lastSlashIndex = url.lastIndexOf('/');
|
// // 如果找到了'/'，截取其后的所有字符
|
// if (lastSlashIndex !== -1) {
|
// return url.substring(lastSlashIndex + 1);
|
// }
|
// // 如果没有找到'/'，返回空字符串
|
// return '';
|
// },
|
|
// 获取数据
|
getQuestionnaire(param1, param2, param3) {
|
this.taskid = decodeURIComponent(param1);
|
this.patid = decodeURIComponent(param2);
|
this.taskname = decodeURIComponent(param3);
|
// let taskid =
|
// "OFp7tn/B6x7IzKJetvGWHdSWBj7msRlnlj6am9dyuHTH6sEt4uBbVCUXs5kcF/e4O2W6vqHf2Bz9K3/evbYDmw==";
|
// let patid =
|
// "CVk0j8O86AeCqhV5WPsBBYDg9fec0wDoDlP9imYK4wDBNIkxywZzMJEGlPagOxnq6qr2WYZo0U8MUGWRGnq8ZA==";
|
// this.taskid = this.decrypt(taskid);
|
// this.patid = this.decrypt(patid);
|
// let taskids = this.encrypt(this.taskid);
|
// let patids = this.encrypt(this.patid);
|
// 先取缓存
|
getCachequestionnaire({ param1: this.taskid, param2: this.patid }).then(
|
(res) => {
|
if (res.code == 200) {
|
this.questionList = res.data;
|
this.accomplish = res.data.submit;
|
if (this.questionList[0]) {
|
this.questionList.forEach((item) => {
|
if (item.scriptResult && item.scriptType != 2) {
|
item.scriptResult = JSON.parse(item.scriptResult);
|
} else if (item.scriptResult && item.scriptType == 2) {
|
item.scriptResult = item.scriptResult.split("&");
|
}
|
});
|
return;
|
} else {
|
this.getExternalfollowup();
|
}
|
} else {
|
this.getExternalfollowup();
|
}
|
}
|
);
|
},
|
// 获取数据
|
getExternalfollowup() {
|
getExternalfollowup({ param1: this.taskid, param2: this.patid }).then(
|
(res) => {
|
if (res.code == 200) {
|
this.questionList = res.data.script;
|
this.jsy = res.data.jsy;
|
this.kcb = res.data.kcb;
|
// 处理题目收集结果格式
|
this.questionList.forEach((item) => {
|
item.nextScriptno = Number(item.nextScriptno);
|
if (item.scriptType == 2) {
|
item.scriptResult = [];
|
}
|
});
|
}
|
}
|
);
|
},
|
// 加密函数
|
encrypt(txt) {
|
const encryptor = new JSEncrypt();
|
encryptor.setPublicKey(this.publicKey); // 设置公钥
|
return encryptor.encrypt(txt); // 对数据进行加密
|
},
|
// 解密函数
|
decrypt(txt) {
|
const encryptor = new JSEncrypt();
|
encryptor.setPrivateKey(this.privateKey); // 设置私钥
|
return encryptor.decrypt(txt); // 对数据进行解密
|
},
|
// 提交
|
submitForm() {
|
// 提交表单逻辑
|
let form = {
|
param1: this.taskid,
|
param2: this.patid,
|
excep: this.excep,
|
isabnormal: this.isabnormal,
|
serviceSubtaskDetailList: [],
|
};
|
console.log(form.isabnormal, "formisabnormal");
|
|
const arr = structuredClone(this.questionList);
|
// arr.forEach((item) => {
|
// item.asrtext = JSON.stringify(item.scriptResult);
|
// if (item.scriptType == 2 && item.scriptResult[0]) {
|
// item.scriptResult = item.scriptResult.join("&");
|
// }
|
// });
|
form.serviceSubtaskDetailList = arr;
|
Submitaquestionnaire(form).then((res) => {
|
if (res.code == 200) {
|
if (this.jsy) {
|
this.dialogVisible = true;
|
}
|
this.accomplish = true;
|
this.$modal.msgSuccess("提交成功");
|
}
|
});
|
},
|
// 缓存
|
cache(subm) {
|
console.log("进入缓存");
|
let form = {
|
param1: this.taskid,
|
param2: this.patid,
|
svyTaskTemplateScriptVOS: [],
|
};
|
const arr = structuredClone(this.questionList);
|
arr.forEach((item) => {
|
item.ishide = item.ishide ? 1 : 0;
|
});
|
arr.forEach((item, index) => {
|
if (item.scriptType == 1 && item.scriptResult) {
|
var obj = item.svyTaskTemplateTargetoptions.find(
|
(items) => items.optioncontent == item.scriptResult
|
);
|
console.log(item);
|
|
console.log(obj, "obj");
|
if (obj.sendTaskid) {
|
item.sendTaskname = obj.sendTaskname;
|
item.sendTaskid = obj.sendTaskid;
|
console.log(String(obj.sendTaskid).split(","));
|
item.sendTaskids = String(obj.sendTaskid).split(",");
|
}
|
if (obj) {
|
form.excep = obj.isabnormal;
|
form.isabnormal = obj.isabnormal;
|
if (this.isabnormal != 1 && obj.isabnormal) {
|
this.excep = obj.isabnormal;
|
this.isabnormal = obj.isabnormal;
|
}
|
console.log(obj.isabnormal);
|
}
|
}
|
});
|
|
arr.forEach((item) => {
|
if (item.scriptType == 2 && item.scriptResult[0]) {
|
item.scriptResult = item.scriptResult.join("&");
|
} else if (item.scriptType != 2 && item.scriptResult) {
|
item.scriptResult = JSON.stringify(item.scriptResult);
|
}
|
});
|
form.svyTaskTemplateScriptVOS = arr;
|
form.type = 2;
|
Cachequestionnaire(form).then((res) => {
|
if (res.code == 200) {
|
if (subm) {
|
this.submitForm();
|
}
|
}
|
});
|
},
|
// 获取可见题目的正确序号（解决跳题后序号不连续的问题）
|
getVisibleQuestionIndex(index) {
|
return index + 1;
|
},
|
// 新增的切换选中/取消选中方法
|
handleRadioToggle(questionItem, index, options, optionValue) {
|
// 保存当前状态以便后续比较
|
const previousState = JSON.parse(JSON.stringify(this.questionList));
|
|
// 原有的处理逻辑
|
if (questionItem.scriptResult === optionValue) {
|
questionItem.scriptResult = "";
|
questionItem.isabnormal = 0;
|
questionItem.showAppendInput = false;
|
} else {
|
questionItem.scriptResult = optionValue;
|
this.handleOptionChange(optionValue, index, options, questionItem);
|
}
|
|
// 处理完成后，确保重新计算可见题目的序号
|
this.$forceUpdate();
|
},
|
|
// 在methods部分，修改handleOptionChange方法:
|
handleOptionChange(selectedOption, questionIndex, options, a) {
|
console.log(selectedOption, questionIndex, options, a, "888");
|
|
if (document.activeElement) {
|
document.activeElement.blur();
|
}
|
|
// 找到被选中的选项对象
|
const selectedOptionObj = options.find(
|
(item) => item.optioncontent == selectedOption
|
);
|
if (selectedOptionObj) {
|
this.questionList[questionIndex].nextScriptno =
|
selectedOptionObj.nextQuestion;
|
this.questionList[questionIndex].score = selectedOptionObj.score;
|
this.questionList[questionIndex].prompt = selectedOptionObj.prompt;
|
}
|
// 处理异常状态高亮
|
this.questionList[questionIndex].isabnormal =
|
selectedOptionObj.isabnormal;
|
// 处理附加输入框显示
|
|
this.questionList[questionIndex].showAppendInput =
|
selectedOptionObj.appendflag == 1;
|
console.log(this.questionList);
|
|
// if (!this.questionList[questionIndex].showAppendInput) {
|
// this.questionList[questionIndex].answerps = ""; // 清除附加信息
|
// }
|
// 保存当前题目之前已经隐藏的题目状态
|
const previouslyHiddenBeforeCurrent = this.questionList
|
.slice(0, questionIndex)
|
.map((item, index) => (item.ishide ? index : -1))
|
.filter((index) => index !== -1);
|
|
// 保存之前因nextQuestion=0而隐藏的题目范围
|
const previouslyHiddenByEnd = this.questionList
|
.map((item, index) => (item.hiddenByEnd ? index : -1))
|
.filter((index) => index !== -1);
|
|
// 如果branchFlag为1，处理题目跳转
|
if (a.branchFlag == 1) {
|
if (selectedOptionObj.nextQuestion == 0) {
|
// 结束问答 - 隐藏后面所有题目并标记
|
this.questionList = this.questionList.map((item, index) => ({
|
...item,
|
ishide: index > questionIndex,
|
hiddenByEnd: index > questionIndex, // 标记这些题目是被结束问答隐藏的
|
}));
|
} else {
|
// 正常跳转逻辑
|
const nextQuestionIndex = selectedOptionObj.nextQuestion - 1;
|
|
this.questionList = this.questionList.map((item, index) => {
|
// 保留当前题目之前的隐藏状态
|
if (index < questionIndex) {
|
return {
|
...item,
|
ishide: previouslyHiddenBeforeCurrent.includes(index),
|
hiddenByEnd: false, // 清除结束标记
|
};
|
}
|
|
// 当前题目总是可见
|
if (index === questionIndex) {
|
return { ...item, ishide: 0, hiddenByEnd: false };
|
}
|
|
// 显示目标下一题
|
if (index === nextQuestionIndex) {
|
return { ...item, ishide: 0, hiddenByEnd: false };
|
}
|
|
// 如果是之前被结束问答隐藏的题目，现在应该恢复显示
|
if (item.hiddenByEnd) {
|
return { ...item, ishide: 0, hiddenByEnd: false };
|
}
|
|
// 隐藏当前题和目标题之间的题目
|
if (index > questionIndex && index < nextQuestionIndex) {
|
return { ...item, ishide: 1, hiddenByEnd: false };
|
}
|
|
// 其他情况保持原状
|
return item;
|
});
|
}
|
} else {
|
// 如果没有跳转，只需确保下一题可见
|
this.questionList = this.questionList.map((item, index) => ({
|
...item,
|
ishide: index === questionIndex + 1 ? 0 : item.ishide,
|
hiddenByEnd: index === questionIndex + 1 ? false : item.hiddenByEnd,
|
}));
|
}
|
|
// 在处理完题目显示/隐藏后，强制更新视图以确保序号正确
|
this.$nextTick(() => {
|
this.$forceUpdate();
|
});
|
},
|
// 处理单选选项
|
// handleOptionChange(selectedvalue, index, arr) {
|
// // 查找选中的选项对象
|
// const selectedOption = arr.svyTaskTemplateTargetoptions.find(
|
// (option) => option.optioncontent == selectedvalue
|
// );
|
// if (selectedOption) {
|
// this.questionList[index].nextScriptno = selectedOption.nextQuestion;
|
// this.questionList[index].score = selectedOption.score;
|
// this.questionList[index].prompt = selectedOption.prompt;
|
// }
|
// },
|
// 处理多选选项
|
// updateScore(selectedvalues, index, arr) {
|
// // ��加分数
|
// let score = 0;
|
// selectedvalues.forEach((value) => {
|
// const selectedOption = arr.svyTaskTemplateTargetoptions.find(
|
// (option) => option.optioncontent == value
|
// );
|
// if (selectedOption) {
|
// score += Number(selectedOption.score);
|
// }
|
// });
|
// this.questionList[index].score = score;
|
// },
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.questionnaire-optimized {
|
min-height: 100vh;
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
|
padding: 20px 0;
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
}
|
|
.content-wrapper {
|
max-width: 800px;
|
margin: 0 auto;
|
padding: 0 15px;
|
}
|
|
.questionnaire-container {
|
background: #ffffff;
|
border-radius: 12px;
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
padding: 30px;
|
margin-bottom: 30px;
|
}
|
|
.questionnaire-header {
|
text-align: center;
|
margin-bottom: 25px;
|
}
|
|
.questionnaire-title {
|
color: #175997;
|
font-size: 28px;
|
font-weight: 700;
|
margin-bottom: 15px;
|
line-height: 1.3;
|
}
|
|
.questionnaire-description {
|
font-size: 18px;
|
color: #5a6c84;
|
line-height: 1.6;
|
max-width: 700px;
|
margin: 0 auto;
|
}
|
|
.custom-divider {
|
margin: 25px 0;
|
background-color: #eaeef2;
|
}
|
|
.questions-section {
|
margin-bottom: 40px;
|
}
|
|
.question-item {
|
margin-bottom: 35px;
|
padding: 20px;
|
border-radius: 8px;
|
border: 1px solid #eaeef2;
|
transition: all 0.3s ease;
|
|
&:hover {
|
border-color: #d1e0f0;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
&.has-warning {
|
border-left: 4px solid #e6a23c;
|
}
|
}
|
|
.question-stem {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 20px;
|
font-size: 18px;
|
}
|
|
.question-number {
|
font-weight: 600;
|
color: #175997;
|
margin-right: 8px;
|
min-width: 24px;
|
}
|
|
.question-text {
|
flex: 1;
|
line-height: 1.5;
|
color: #2c3e50;
|
font-weight: 500;
|
}
|
|
.question-type-tag {
|
color: #3ba2f7;
|
font-size: 14px;
|
margin-left: 10px;
|
font-weight: 500;
|
}
|
|
.question-options {
|
margin: 15px 0;
|
}
|
|
.options-group {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.option-radio,
|
.option-checkbox {
|
margin: 0;
|
padding: 12px 15px;
|
border-radius: 6px;
|
border: 1px solid #e0e0e0;
|
transition: all 0.2s;
|
|
&:hover {
|
border-color: #c0c4cc;
|
background-color: #f8fafc;
|
}
|
}
|
|
: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;
|
}
|
|
.abnormal-indicator {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
|
.abnormal-option {
|
:deep(.el-radio__inner) {
|
border-color: #f56c6c;
|
}
|
|
:deep(.el-checkbox__inner) {
|
border-color: #f56c6c;
|
}
|
}
|
|
.question-input {
|
margin: 15px 0;
|
}
|
|
.answer-textarea {
|
:deep(.el-textarea__inner) {
|
font-size: 16px;
|
line-height: 1.5;
|
}
|
}
|
|
.question-warning {
|
margin-top: 15px;
|
}
|
|
.warning-alert {
|
:deep(.el-alert__title) {
|
font-size: 15px;
|
line-height: 1.4;
|
}
|
}
|
|
.submit-section {
|
text-align: center;
|
padding: 20px 0 10px;
|
}
|
|
.submit-button {
|
width: 100%;
|
max-width: 300px;
|
height: 50px;
|
font-size: 18px;
|
font-weight: 500;
|
border-radius: 8px;
|
background: linear-gradient(135deg, #175997 0%, #2a77c9 100%);
|
border: none;
|
box-shadow: 0 4px 12px rgba(23, 89, 151, 0.3);
|
transition: all 0.3s;
|
|
&:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 6px 16px rgba(23, 89, 151, 0.4);
|
}
|
|
&:active {
|
transform: translateY(0);
|
}
|
}
|
|
.completion-page {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
min-height: 70vh;
|
padding: 20px;
|
}
|
|
.completion-content {
|
text-align: center;
|
max-width: 600px;
|
padding: 40px;
|
background: #ffffff;
|
border-radius: 12px;
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
}
|
|
.completion-icon {
|
font-size: 80px;
|
color: #52c41a;
|
margin-bottom: 20px;
|
}
|
|
.completion-title {
|
color: #175997;
|
font-size: 32px;
|
font-weight: 700;
|
margin-bottom: 20px;
|
}
|
|
.completion-message {
|
font-size: 18px;
|
color: #5a6c84;
|
line-height: 1.6;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.content-wrapper {
|
padding: 0 10px;
|
}
|
|
.questionnaire-container {
|
padding: 20px 15px;
|
}
|
|
.questionnaire-title {
|
font-size: 24px;
|
}
|
|
.questionnaire-description {
|
font-size: 16px;
|
}
|
|
.question-stem {
|
font-size: 16px;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
|
.question-type-tag {
|
margin-left: 0;
|
margin-top: 5px;
|
}
|
|
.question-item {
|
padding: 15px;
|
}
|
|
.completion-content {
|
padding: 30px 20px;
|
}
|
|
.completion-title {
|
font-size: 28px;
|
}
|
|
.completion-message {
|
font-size: 16px;
|
}
|
}
|
|
@media (max-width: 480px) {
|
.questionnaire-title {
|
font-size: 22px;
|
}
|
|
.completion-title {
|
font-size: 24px;
|
}
|
|
.completion-icon {
|
font-size: 60px;
|
}
|
}
|
</style>
|
