You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
2.8 KiB
Vue
38 lines
2.8 KiB
Vue
<template>
|
|
<section v-if="questions.length" class="training-step-one-questions" aria-label="第一步选择题">
|
|
<header>
|
|
<span>知识自测</span>
|
|
<p>请根据实训资料选择最符合的答案。</p>
|
|
</header>
|
|
<article v-for="(question, index) in questions" :key="question.id" class="training-step-one-question">
|
|
<h4><b>{{ String(index + 1).padStart(2, '0') }}</b>{{ question.title }}</h4>
|
|
<el-radio-group :model-value="answers[question.id] || ''" @update:model-value="setAnswer(question.id, $event)">
|
|
<el-radio v-for="option in question.options" :key="option.key" :label="option.key" border>
|
|
<strong>{{ option.key }}.</strong> {{ option.content }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</article>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
import { parseStepOneChoiceQuestions } from "@/utils/stepOneChoiceQuestions";
|
|
|
|
const props = defineProps({
|
|
questions: { type: [Array, String], default: () => [] },
|
|
modelValue: { type: Object, default: () => ({}) },
|
|
});
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
const questions = computed(() => parseStepOneChoiceQuestions(props.questions));
|
|
const answers = computed(() => props.modelValue || {});
|
|
|
|
function setAnswer(questionId, answer) {
|
|
emit("update:modelValue", { ...answers.value, [questionId]: answer });
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.training-step-one-questions { margin:20px 0; padding:18px; border:1px solid rgba(70,218,255,.38); border-radius:14px; background:linear-gradient(135deg,rgba(8,76,111,.26),rgba(3,28,45,.38)); }.training-step-one-questions header { display:flex; align-items:baseline; gap:12px; padding-bottom:12px; border-bottom:1px solid rgba(90,211,255,.22); }.training-step-one-questions header span { color:#60e6e1; font-size:15px; font-weight:900; letter-spacing:.08em; }.training-step-one-questions header p { margin:0; color:#b9ddea; font-size:13px; }.training-step-one-question { padding:17px 0 4px; }.training-step-one-question + .training-step-one-question { border-top:1px dashed rgba(93,214,255,.2); }.training-step-one-question h4 { display:flex; gap:9px; margin:0 0 12px; color:#edfaff; font-size:16px; line-height:1.65; }.training-step-one-question h4 b { flex:0 0 auto; color:#59dcff; }.training-step-one-question :deep(.el-radio-group) { display:grid; gap:9px; }.training-step-one-question :deep(.el-radio.is-bordered) { width:100%; height:auto; min-height:38px; margin:0; padding:9px 12px; color:#d9f5ff; line-height:1.55; border-color:rgba(100,219,255,.36); background:rgba(3,23,38,.55); }.training-step-one-question :deep(.el-radio.is-bordered.is-checked) { border-color:#59dcff; background:rgba(17,149,207,.2); }.training-step-one-question :deep(.el-radio__label) { white-space:normal; }.training-step-one-question strong { color:#61e7ff; }
|
|
</style>
|