From 800cd247bc78fb8c05faa2dc858534cec0326a93 Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期一, 10 十一月 2025 17:12:22 +0800
Subject: [PATCH] 测试完成
---
src/views/outsideChainwtnew.vue | 849 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 497 insertions(+), 352 deletions(-)
diff --git a/src/views/outsideChainwtnew.vue b/src/views/outsideChainwtnew.vue
index b4aeab6..c149057 100644
--- a/src/views/outsideChainwtnew.vue
+++ b/src/views/outsideChainwtnew.vue
@@ -1,149 +1,114 @@
<template>
- <div class="questionnaire">
- <div class="CONTENT" v-if="!accomplish">
- <div class="preview-left">
- <div class="toptitle">
- <div class="title">{{ taskname ? taskname : "闂嵎" }}</div>
- <div style="font-size: 22px; margin-bottom: 20px; line-height: 1.5">
- {{
- kcb
- ? kcb
- : "浜茬埍鐨勬偅鑰�-瀹跺睘锛屾垜浠槸" +
- localStorage.getItem("orgname") +
- "鐨勫尰鎶や汉鍛橈紝涓轰簡鏇村ソ鍦颁簡瑙ｆ偍鐨勫悍澶嶆儏鍐碉紝璇锋偍鎶戒竴鐐瑰疂璐垫椂闂达紝瀹屾垚杩欎唤闅忚闂嵎銆�"
- }}
- <!-- 浜茬埍鐨勬偅鑰�/瀹跺睘鎮ㄥソ锛屼负浜嗘洿濂界殑浜嗚В鎮ㄥ嚭闄㈠悗鐨勫悍澶嶆儏鍐碉紝缁欐偍閫傚綋鍙婃椂鐨勫仴搴锋寚瀵硷紝璇锋偍鎶戒竴鐐瑰疂璐垫椂闂达紝瀹屾垚杩欎唤鍑洪櫌闅忚闂嵎璋冩煡銆� -->
+ <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></el-divider>
- <!-- 鍗曢�� -->
- <div
- class="topic-dev"
- v-for="(item, index) in questionList"
- :key="item.aaa"
- v-if="!item.ishide"
- >
- <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 1">
- <div class="dev-text">
- {{ index + 1 }}銆�<span style="line-height: 1.5"
- >{{ item.scriptContent }}
- <span style="color: #3ba2f7">[鍗曢�塢</span></span
- >
+
+ <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="dev-xx">
- <el-radio-group
- class="custom-radio"
- v-model="item.scriptResult"
- @change="handleOptionChange($event, index, item)"
- >
+
+ <!-- 鍗曢�夐鐩� -->
+ <div class="question-options" v-if="item.scriptType == 1 && !item.ishide">
+ <el-radio-group class="options-group" v-model="item.scriptResult">
<el-radio
- border
- v-for="(items, index) in item.svyTaskTemplateTargetoptions"
- :class="
- items.isabnormal && item.scriptResult == items.optioncontent
- ? 'red-star'
- : ''
- "
- :key="index"
- :label="items.optioncontent"
- >{{ items.optioncontent }}</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>
+ <span v-if="option.isabnormal" class="abnormal-indicator">*</span>
+ </el-radio>
</el-radio-group>
</div>
- <div v-show="item.prompt">
- <el-alert :title="item.prompt" type="warning"> </el-alert>
- </div>
- </div>
- <!-- 澶氶�� -->
- <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 2">
- <div class="dev-text">
- {{ index + 1 }}銆�<span style="line-height: 1.5"
- >{{ item.scriptContent }}
- <span style="color: #3ba2f7">[澶氶�塢</span></span
- >
- </div>
- <div class="dev-xx">
- <el-checkbox-group
- class="custom-radio"
- v-model="item.scriptResult"
- >
+
+ <!-- 澶氶�夐鐩� -->
+ <div class="question-options" v-if="item.scriptType == 2">
+ <el-checkbox-group class="options-group" v-model="item.scriptResult">
<el-checkbox
- border
+ v-for="(option, optionIndex) in item.svyTaskTemplateTargetoptions"
+ :key="optionIndex"
+ :label="option.optioncontent"
+ :class="{
+ 'abnormal-option': option.isabnormal
+ }"
@change="$forceUpdate()"
- v-for="(items, indexs) in item.svyTaskTemplateTargetoptions"
- :key="indexs"
- :label="items.optioncontent"
+ class="option-checkbox"
>
- {{ items.optioncontent }}
+ <span class="option-text">{{ option.optioncontent }}</span>
+ <span v-if="option.isabnormal" class="abnormal-indicator">*</span>
</el-checkbox>
</el-checkbox-group>
</div>
- <!-- :class="items.isabnormal ? 'red-star' : ''" -->
- <div v-show="item.prompt && item.scriptResult[0]">
- <el-alert :title="item.prompt" type="warning"> </el-alert>
- </div>
- </div>
- <!-- 濉┖ -->
- <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 4">
- <div class="dev-text">
- {{ index + 1 }}銆�<span style="line-height: 1.5"
- >{{ item.scriptContent
- }}<span style="color: #3ba2f7">[闂瓟]</span></span
- >
- </div>
- <div class="dev-xx">
+
+ <!-- 濉┖棰樼洰 -->
+ <div class="question-input" v-if="item.scriptType == 4">
<el-input
type="textarea"
:rows="3"
- placeholder="璇疯緭鍏ョ瓟妗�"
+ placeholder="璇疯緭鍏ユ偍鐨勫洖绛�"
v-model="item.scriptResult"
clearable
- >
- </el-input>
+ 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="bottom-fixed">
+
+ <!-- 鎻愪氦鎸夐挳 -->
+ <div class="submit-section">
<el-button
type="primary"
- style="width: 80%; font-size: 20px"
@click="cache(true)"
- >鎻愪氦闂嵎</el-button
+ class="submit-button"
>
+ 鎻愪氦闂嵎
+ </el-button>
</div>
</div>
</div>
- <div class="CONTENT" v-else>
- <div class="preview-lefts">
- <div
- style="
- text-align: center;
- padding-top: 50px;
- font-size: 24px;
- color: #175997;
- font-weight: 600;
- margin-bottom: 10px;
- "
- >
- 鎰熻阿鎮ㄧ殑閰嶅悎!
- </div>
- <div style="font-size: 20px">
- {{
- jsy
- ? jsy
- : "鐢熸椿涓婅鍔抽�哥粨鍚堬紝娉ㄦ剰浼戞伅鍜岃惀鍏伙紝閫傚綋閿荤偧锛屾垝鐑熼檺閰掞紝淇濇寔蹇冩儏鑸掔晠锛屽畾鏈熷璇娿�傞偅鏈鍥炶灏卞埌杩欓噷锛岀鎮ㄨ韩浣撳仴搴凤紒"
- }}
- </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>
- <!-- <el-dialog
- :visible.sync="dialogVisible"
- width="50%"
- >
- <div>
- <el-alert :title="jsy" type="success"> </el-alert>
- </div>
- </el-dialog> -->
</div>
</template>
@@ -163,93 +128,8 @@
patid: 265823,
kcb: "",
excep: "",
- questionList: [
- // {
- // scriptType: 1,
- // scriptContent: "鎮ㄧ殑骞撮緞鑼冨洿鏄紵",
- // scriptResult: null,
- // svyTaskTemplateTargetoptions: [
- // { optioncontent: "18-25", value: "18-25", isabnormal: true },
- // { optioncontent: "26-35", value: "26-35" },
- // { optioncontent: "36-45", value: "36-45" },
- // { optioncontent: "46-55", value: "46-55" },
- // { optioncontent: "56+", value: "56+" },
- // ],
- // required: true,
- // },
- // {
- // scriptType: 1,
- // scriptContent: "鎮ㄧ殑鑱屼笟鏄粈涔堬紵",
- // scriptResult: null,
- // svyTaskTemplateTargetoptions: [
- // { optioncontent: "瀛︾敓", value: "student" },
- // { optioncontent: "鏁欏笀", value: "teacher" },
- // { optioncontent: "宸ョ▼甯�", value: "engineer" },
- // { optioncontent: "鍖荤敓", value: "doctor" },
- // { optioncontent: "鍏朵粬", value: "other" },
- // ],
- // required: false,
- // },
- // {
- // scriptType: 2,
- // scriptContent: "鎮ㄦ劅鍏磋叮鐨勬椿鍔ㄦ湁鍝簺锛�",
- // scriptResult: [],
- // svyTaskTemplateTargetoptions: [
- // { optioncontent: "鏃呮父", value: "travel", isabnormal: true },
- // { optioncontent: "闃呰", value: "reading", isabnormal: true },
- // { optioncontent: "杩愬姩", value: "sports", isabnormal: true },
- // { optioncontent: "闊充箰", value: "music" },
- // { optioncontent: "鐢靛奖", value: "movies" },
- // ],
- // required: false,
- // },
- // {
- // scriptType: 1,
- // scriptContent: "鎮ㄧ殑鑱屼笟鏄粈涔堬紵",
- // scriptResult: null,
- // svyTaskTemplateTargetoptions: [
- // { optioncontent: "瀛︾敓", value: "student" },
- // { optioncontent: "鏁欏笀", value: "teacher" },
- // { optioncontent: "宸ョ▼甯�", value: "engineer" },
- // { optioncontent: "鍖荤敓", value: "doctor" },
- // { optioncontent: "鍏朵粬", value: "other" },
- // ],
- // required: false,
- // },
- // {
- // scriptType: 1,
- // scriptContent: "鎮ㄧ殑鑱屼笟鏄粈涔堬紵",
- // scriptResult: null,
- // svyTaskTemplateTargetoptions: [
- // { optioncontent: "瀛︾敓", value: "student" },
- // { optioncontent: "鏁欏笀", value: "teacher" },
- // { optioncontent: "宸ョ▼甯�", value: "engineer", isabnormal: true },
- // { optioncontent: "鍖荤敓", value: "doctor" },
- // { optioncontent: "鍏朵粬", value: "other" },
- // ],
- // required: false,
- // },
- // {
- // scriptType: 1,
- // scriptContent: "鎮ㄧ殑鑱屼笟鏄粈涔堬紵",
- // scriptResult: null,
- // svyTaskTemplateTargetoptions: [
- // { optioncontent: "瀛︾敓", value: "student" },
- // { optioncontent: "鏁欏笀", value: "teacher" },
- // { optioncontent: "宸ョ▼甯�", value: "engineer" },
- // { optioncontent: "鍖荤敓", value: "doctor" },
- // { optioncontent: "鍏朵粬", value: "other" },
- // ],
- // required: false,
- // },
- // {
- // scriptType: 4,
- // scriptContent: "鎮ㄧ殑濮撳悕鏄粈涔堬紵",
- // scriptResult: "name",
- // required: true,
- // scriptResult: null,
- // },
- ],
+ taskname: "",
+ questionList: [],
jsy: null,
dialogVisible: false,
Endornot: true,
@@ -268,13 +148,19 @@
};
},
mounted() {
- window.addEventListener("beforeunload", this.cache);
+ // window.addEventListener("beforeunload", this.cache);
},
beforeDestroy() {
- window.removeEventListener("beforeunload", this.cache);
+ // window.removeEventListener("beforeunload", this.cache);
},
created() {
this.geturlinfo();
+ },
+ computed: {
+ // 璁＄畻灞炴�э細鑾峰彇鎵�鏈夊彲瑙佺殑棰樼洰
+ visibleQuestions() {
+ return this.questionList.filter((question) => !question.ishide);
+ },
},
methods: {
// 瑙ｆ瀽urlid
@@ -426,7 +312,6 @@
item.sendTaskid = obj.sendTaskid;
console.log(String(obj.sendTaskid).split(","));
item.sendTaskids = String(obj.sendTaskid).split(",");
-
}
if (obj) {
if (obj.isabnormal) {
@@ -455,19 +340,143 @@
}
});
},
- // 澶勭悊鍗曢�夐�夐」
- handleOptionChange(selectedvalue, index, arr) {
- // 鏌ユ壘閫変腑鐨勯�夐」瀵硅薄
- const selectedOption = arr.svyTaskTemplateTargetoptions.find(
- (option) => option.optioncontent == selectedvalue
+ // 鑾峰彇鍙棰樼洰鐨勬纭簭鍙凤紙瑙ｅ喅璺抽鍚庡簭鍙蜂笉杩炵画鐨勯棶棰橈級
+ 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 = false;
+ questionItem.showAppendInput = false;
+ } else {
+ questionItem.scriptResult = optionValue;
+ this.handleOptionChange(optionValue, index, options, questionItem);
+ }
+
+ // 澶勭悊瀹屾垚鍚庯紝纭繚閲嶆柊璁＄畻鍙棰樼洰鐨勫簭鍙�
+ this.$forceUpdate();
+ },
+
+ // 鍦╩ethods閮ㄥ垎锛屼慨鏀筯andleOptionChange鏂规硶:
+ 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 (selectedOption) {
- // 灏嗛�変腑鐨勯�夐」瀵硅薄鐨� id 璧嬪�肩粰 obj.sonId
- this.questionList[index].nextScriptno = selectedOption.nextQuestion;
- this.questionList[index].score = selectedOption.score;
- this.questionList[index].prompt = selectedOption.prompt;
+ this.questionList[questionIndex].nextScriptno =
+ selectedOption.nextQuestion;
+ this.questionList[questionIndex].score = selectedOption.score;
+ this.questionList[questionIndex].prompt = selectedOption.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);
+
+ // 淇濆瓨涔嬪墠鍥爊extQuestion=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) {
// // 锟斤拷鍔犲垎鏁�
@@ -487,158 +496,294 @@
</script>
<style lang="scss" scoped>
-.questionnaire {
- // background-image: url("../assets/images/chainbackground.jpg");
- background-color: #f9f9fb;
- background-size: cover;
- background-attachment: fixed; /* 淇濇寔鑳屾櫙鍥哄畾 */
- background-position: center;
- font-family: Arial, sans-serif;
+.questionnaire-optimized {
min-height: 100vh;
- margin: 0;
- padding: 0;
- .CONTENT {
- .title {
- color: #3769f3;
- font-size: 22px;
- font-weight: bold;
- margin-bottom: 20px;
- text-align: center;
- }
- }
-}
-.preview-left {
- margin: 10px;
- margin-bottom: 60px;
- background-color: #fff;
- border-radius: 5px;
- // margin: 20px;
- padding: 10px;
- height: 100%;
- // background: #ffff;
- border: 1px solid #dcdfe6;
- -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
- 0 0 6px 0 rgba(0, 0, 0, 0.04);
- .topic-dev {
- margin-bottom: 25px;
- font-size: 20px !important;
- .dev-text {
- margin-bottom: 10px;
- }
- }
-}
-.preview-lefts {
- margin: 10px;
- background-color: #fff;
- border-radius: 5px;
- // margin: 20px;
- padding: 10px;
- height: 95vh; // background: #ffff;
- border: 1px solid #dcdfe6;
- -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
- 0 0 6px 0 rgba(0, 0, 0, 0.04);
- .topic-dev {
- margin-bottom: 25px;
- font-size: 20px !important;
- .dev-text {
- margin-bottom: 10px;
- }
- }
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
+ padding: 20px 0;
+ font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
-.red-star {
- ::v-deep.el-radio__label {
- position: relative;
- padding-right: 10px; /* 鏍规嵁闇�瑕佽皟鏁� */
- }
- ::v-deep.el-radio__label::after {
- content: "*";
- color: red;
- position: absolute;
- right: -5px; /* 鏍规嵁闇�瑕佽皟鏁� */
- top: 0;
- }
- ::v-deep.el-checkbox__label {
- position: relative;
- padding-right: 10px; /* 鏍规嵁闇�瑕佽皟鏁� */
- }
- ::v-deep.el-checkbox__label::after {
- content: "*";
- color: red;
- position: absolute;
- right: -5px; /* 鏍规嵁闇�瑕佽皟鏁� */
- top: 0;
- }
-}
-::v-deep.el-checkbox-group {
- font-size: 0;
- display: flex;
- flex-direction: column;
- margin: 5px 0;
-}
-::v-deep.el-checkbox.is-bordered + .el-checkbox.is-bordered {
- margin-left: 0;
+.content-wrapper {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 0 15px;
}
-::v-deep.el-radio-group {
- display: flex;
- flex-direction: column;
- margin: 5px 0;
-}
-::v-deep.el-radio.is-bordered + .el-radio.is-bordered {
- /* margin-left: 10px; */
- margin-left: 0;
-}
-::v-deep.custom-radio .el-radio {
- margin: 2px 0;
+.questionnaire-container {
+ background: #ffffff;
+ border-radius: 12px;
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+ padding: 30px;
+ margin-bottom: 30px;
}
-.radio-option {
- flex: none; /* 涓嶈閫夐」鑷姩濉厖绌洪棿 */
- white-space: nowrap; /* 闃叉閫夐」鏂囨湰鎹㈣ */
- margin: 0 10px; /* 璁剧疆閫夐」宸﹀彸鐨勯棿闅� */
- font-size: 20px; /* 澧炲ぇ瀛椾綋澶у皬 */
-}
-
-.el-radio__label {
- font-size: 20px; /* 澧炲ぇ鏍囩鏂囧瓧澶у皬 */
-}
-.toptitle {
-}
-.bottom-fixed {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
+.questionnaire-header {
text-align: center;
- padding: 10px 0; /* 鏍规嵁闇�瑕佽皟鏁村唴杈硅窛 */
- background: #fff; /* 鏍规嵁闇�瑕佽皟鏁磋儗鏅鑹� */
- box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 鍙�夌殑闃村奖鏁堟灉 */
- z-index: 1000; /* 纭繚鎸夐挳鍦ㄩ〉闈㈡渶涓婂眰 */
+ margin-bottom: 25px;
}
-::v-deep.el-alert--warning.is-light {
- background-color: #fbf9f3;
- color: #ffba00;
+
+.questionnaire-title {
+ color: #175997;
+ font-size: 28px;
+ font-weight: 700;
+ margin-bottom: 15px;
+ line-height: 1.3;
}
-::v-deep {
- .el-alert__title {
- font-size: 20px;
- line-height: 18px;
+
+.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;
}
}
-::v-deep.el-radio--medium.is-bordered .el-radio__label {
- font-size: 20px;
+
+.question-stem {
+ display: flex;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ font-size: 18px;
}
-::v-deep.el-radio--medium.is-bordered {
- padding: 5px 20px 0px 10px;
- border-radius: 4px;
- height: 36px;
+
+.question-number {
+ font-weight: 600;
+ color: #175997;
+ margin-right: 8px;
+ min-width: 24px;
}
-::v-deep.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label {
- line-height: 17px;
- font-size: 20px;
+
+.question-text {
+ flex: 1;
+ line-height: 1.5;
+ color: #2c3e50;
+ font-weight: 500;
}
-::v-deep.el-checkbox {
- margin-right: 0px;
+
+.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>
--
Gitblit v1.9.3