|
|
|
|
@ -8,37 +8,40 @@ |
|
|
|
|
<!-- 左边按钮 --> |
|
|
|
|
<button class="submit-left" @click="SubLeft"></button> |
|
|
|
|
<div class="question-body"> |
|
|
|
|
<div class="question" > |
|
|
|
|
第<span class="question-count" >{{ currentSum }}</span>题 |
|
|
|
|
<div class="timer">{{ formattedTime }} 秒</div> |
|
|
|
|
<div class="question"> |
|
|
|
|
第<span class="question-count">{{ currentSum }}</span>题 |
|
|
|
|
<!-- <div class="timer">{{ formattedTime }} 秒</div> --> |
|
|
|
|
</div> |
|
|
|
|
<p class="questions">共<span class="questions-count">{{questions.length}}</span>题</p> |
|
|
|
|
<p class="questions">共<span class="questions-count">{{ questions.length }}</span>题</p> |
|
|
|
|
<!-- 遍历题目 --> |
|
|
|
|
<div v-if="currentQuestionIndex < questions.length" class="txt"> |
|
|
|
|
<span>{{ currentQuestion }}</span> |
|
|
|
|
</div> |
|
|
|
|
<!-- 遍历选项 --> |
|
|
|
|
<div class="options"> |
|
|
|
|
<button |
|
|
|
|
v-for="option in xnOptionsList" |
|
|
|
|
:key="option.id" |
|
|
|
|
:class="['option', { 'selected': selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid == option.id }]" |
|
|
|
|
@click="selectOption(option.id)" |
|
|
|
|
class="option" |
|
|
|
|
> |
|
|
|
|
<button v-for="option in xnOptionsList" :key="option.id" |
|
|
|
|
:class="['option', { |
|
|
|
|
// 'selected': option.hasOwnProperty('isChecked') ? option.isChecked : |
|
|
|
|
// selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid == option.id |
|
|
|
|
// 'selected': option.isChecked || (selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid === option.id) |
|
|
|
|
'selected': |
|
|
|
|
complete == true |
|
|
|
|
? option.isChecked |
|
|
|
|
: (selectedOption[currentQuestionIndex] && selectedOption[currentQuestionIndex].oid === option.id) |
|
|
|
|
}]" |
|
|
|
|
@click="selectOption(option.id)" class="option"> |
|
|
|
|
<span class="option-letter">{{ option.optionName }}</span> |
|
|
|
|
{{ option.optionText }} |
|
|
|
|
{{ option.optionText }} |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<div class="submit-buttons"> |
|
|
|
|
<button class="submit-btn" @click="resetAnswers">退出答题</button> |
|
|
|
|
<button class="submit-btn" @click="submitAnswers">提交成绩</button> |
|
|
|
|
<button class="submit-btn" @click="resetAnswers">退出答题</button> |
|
|
|
|
<button class="submit-btn" @click="submitAnswers" v-if="complete === false">提交成绩</button> |
|
|
|
|
</div> |
|
|
|
|
<el-dialog |
|
|
|
|
v-model="isVisible" :close-on-click-modal="false" :show-close="false"> |
|
|
|
|
<resultsAnnounced :score = "score" :formattedTime ="formattedTime "@recreate="handleRecreate"/> |
|
|
|
|
<el-dialog v-model="isVisible" :close-on-click-modal="false" :show-close="false"> |
|
|
|
|
<resultsAnnounced :score="score" :formattedTime="formattedTime" @recreate="handleRecreate" /> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -46,160 +49,169 @@ |
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import resultsAnnounced from '@/views/resultsAnnounced/index.vue' |
|
|
|
|
import settingStore from "@/store/modules/setting"; |
|
|
|
|
import {subTestapi,checkapi} from '@/api/index.ts' |
|
|
|
|
import { ref,computed,onMounted, onUnmounted} from "vue" |
|
|
|
|
import { subTestapi, checkapi } from '@/api/index.ts' |
|
|
|
|
import { ref, computed, onMounted, onUnmounted } from "vue" |
|
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
|
const setting = settingStore(); |
|
|
|
|
//左箭头 |
|
|
|
|
const SubLeft =()=>{ |
|
|
|
|
console.log(currentQuestionIndex.value) |
|
|
|
|
if(currentQuestionIndex.value >= 1){ |
|
|
|
|
currentQuestionIndex.value = currentQuestionIndex.value - 1 |
|
|
|
|
}else{ |
|
|
|
|
ElMessage.warning('无法上翻') |
|
|
|
|
} |
|
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
|
const setting = settingStore(); |
|
|
|
|
//左箭头 |
|
|
|
|
const SubLeft = () => { |
|
|
|
|
console.log(currentQuestionIndex.value) |
|
|
|
|
if (currentQuestionIndex.value >= 1) { |
|
|
|
|
currentQuestionIndex.value = currentQuestionIndex.value - 1 |
|
|
|
|
} else { |
|
|
|
|
ElMessage.warning('无法上翻') |
|
|
|
|
} |
|
|
|
|
//右箭头 |
|
|
|
|
const SubRight = async()=>{ |
|
|
|
|
|
|
|
|
|
const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]); |
|
|
|
|
// answer.value = res.result; |
|
|
|
|
} |
|
|
|
|
//右箭头 |
|
|
|
|
const SubRight = async () => { |
|
|
|
|
console.log(complete.value,'11111111') |
|
|
|
|
if(complete.value == false){ |
|
|
|
|
const res: any = await checkapi(selectedOption.value[currentQuestionIndex.value]); |
|
|
|
|
console.log(selectedOption.value); |
|
|
|
|
console.log(res,'res') |
|
|
|
|
console.log(res, 'res') |
|
|
|
|
// 如果答对了，进入下一题 |
|
|
|
|
if (res.result == "success") { |
|
|
|
|
if(currentSum.value < questions.value.length){ |
|
|
|
|
if (currentSum.value < questions.value.length) { |
|
|
|
|
currentQuestionIndex.value++; // 更新到下一题 |
|
|
|
|
} |
|
|
|
|
else{ |
|
|
|
|
else { |
|
|
|
|
ElMessage.success('答题已完成，请提交') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
else{ |
|
|
|
|
if(selectedOption.value[currentQuestionIndex.value] == null){ |
|
|
|
|
else { |
|
|
|
|
if (selectedOption.value[currentQuestionIndex.value] == null) { |
|
|
|
|
ElMessage.warning('请先答题') |
|
|
|
|
}else{ |
|
|
|
|
} else { |
|
|
|
|
ElMessage.error('回答错误') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}else{ |
|
|
|
|
if (currentSum.value < questions.value.length) { |
|
|
|
|
currentQuestionIndex.value++; // 更新到下一题 |
|
|
|
|
} |
|
|
|
|
else { |
|
|
|
|
ElMessage.warning('无法下翻') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const questions = ref<any[]>([]); |
|
|
|
|
const currentList = async ()=>{ |
|
|
|
|
const res:any = await subTestapi(); |
|
|
|
|
questions.value = res.result |
|
|
|
|
console.log(res.result) |
|
|
|
|
// console.log(questions.value[0].xnOptionsList[0].id) |
|
|
|
|
// console.log(questions.value,'questions1.value') |
|
|
|
|
} |
|
|
|
|
// 当前题目的索引 |
|
|
|
|
const currentQuestionIndex = ref(0); |
|
|
|
|
//计算当前题目的序号（从1开始） |
|
|
|
|
const currentSum = computed(() => currentQuestionIndex.value + 1); |
|
|
|
|
// 当前题目 |
|
|
|
|
const currentQuestion = computed(() => { |
|
|
|
|
// 确保 questions.value 至少有一个元素 |
|
|
|
|
if (questions.value.length > 0) { |
|
|
|
|
return questions.value[currentQuestionIndex.value].questionText; |
|
|
|
|
} |
|
|
|
|
return ''; |
|
|
|
|
}); |
|
|
|
|
const xnOptionsList =computed(() =>{ |
|
|
|
|
if (questions.value.length > 0) { |
|
|
|
|
return questions.value[currentQuestionIndex.value].xnOptionsList |
|
|
|
|
} |
|
|
|
|
console.log(selectedOption.value) |
|
|
|
|
return []; |
|
|
|
|
}) |
|
|
|
|
// 当前选中的按钮索引 |
|
|
|
|
// 初始化为一个数组，数组长度与 questions.value 的长度一致，每个元素初始值为 null |
|
|
|
|
const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.length).fill(null)); |
|
|
|
|
|
|
|
|
|
//选中逻辑 |
|
|
|
|
const selectOption = (option:any) => { |
|
|
|
|
} |
|
|
|
|
const questions = ref<any[]>([]); |
|
|
|
|
const currentList = async () => { |
|
|
|
|
const res: any = await subTestapi(); |
|
|
|
|
questions.value = res.result |
|
|
|
|
console.log(res.result) |
|
|
|
|
// console.log(questions.value[0].xnOptionsList[0].id) |
|
|
|
|
// console.log(questions.value,'questions1.value') |
|
|
|
|
} |
|
|
|
|
// 当前题目的索引 |
|
|
|
|
const currentQuestionIndex = ref(0); |
|
|
|
|
//计算当前题目的序号（从1开始） |
|
|
|
|
const currentSum = computed(() => currentQuestionIndex.value + 1); |
|
|
|
|
// 当前题目 |
|
|
|
|
const currentQuestion = computed(() => { |
|
|
|
|
// 确保 questions.value 至少有一个元素 |
|
|
|
|
if (questions.value.length > 0) { |
|
|
|
|
return questions.value[currentQuestionIndex.value].questionText; |
|
|
|
|
} |
|
|
|
|
return ''; |
|
|
|
|
}); |
|
|
|
|
const xnOptionsList = computed(() => { |
|
|
|
|
if (questions.value.length > 0) { |
|
|
|
|
return questions.value[currentQuestionIndex.value].xnOptionsList |
|
|
|
|
} |
|
|
|
|
console.log(selectedOption.value) |
|
|
|
|
return []; |
|
|
|
|
}) |
|
|
|
|
// 当前选中的按钮索引 |
|
|
|
|
// 初始化为一个数组，数组长度与 questions.value 的长度一致，每个元素初始值为 null |
|
|
|
|
const selectedOption = ref<{ oid: any; qid: string }[]>(Array(questions.value.length).fill(null)); |
|
|
|
|
|
|
|
|
|
//选中逻辑 |
|
|
|
|
const selectOption = (option: any) => { |
|
|
|
|
if (complete.value == false) { |
|
|
|
|
if (questions.value.length > 0) { |
|
|
|
|
|
|
|
|
|
const currentQuestion = questions.value[currentQuestionIndex.value]; |
|
|
|
|
selectedOption.value[currentQuestionIndex.value]= { |
|
|
|
|
selectedOption.value[currentQuestionIndex.value] = { |
|
|
|
|
oid: option, |
|
|
|
|
qid: currentQuestion.id |
|
|
|
|
}; |
|
|
|
|
console.log(selectedOption.value[currentQuestionIndex.value].oid,option); |
|
|
|
|
console.log(selectedOption.value[currentQuestionIndex.value].oid, option); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const score = ref(0); // 初始化分数为0 |
|
|
|
|
const isVisible = ref (false) //成绩公布页的显示与否 |
|
|
|
|
// 提交成绩按钮 |
|
|
|
|
const submitAnswers = async() => { |
|
|
|
|
console.log(selectedOption.value[currentQuestionIndex.value]) |
|
|
|
|
//答完全部题才能提交成绩 |
|
|
|
|
if(selectedOption.value[questions.value.length - 1] == null){ |
|
|
|
|
ElMessage.warning('请先完成答题') |
|
|
|
|
}else{ |
|
|
|
|
const res:any = await checkapi(selectedOption.value[currentQuestionIndex.value]); |
|
|
|
|
if (res.result !== "success"){ |
|
|
|
|
ElMessage.error('回答错误') |
|
|
|
|
}else{ |
|
|
|
|
stopTimer(); // 停止计时 |
|
|
|
|
score.value = 100; // 重置分数 |
|
|
|
|
isVisible.value = true; |
|
|
|
|
// for (let i = 0; i < questions.value.length; i++) { |
|
|
|
|
// // 如果当前题目的选中选项与正确答案一致，则加10分 |
|
|
|
|
// if (res.result == "success") { |
|
|
|
|
// // score.value += 10; |
|
|
|
|
// score.value == 100 |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
// 退出答题 |
|
|
|
|
const router = useRouter() |
|
|
|
|
const resetAnswers = () => { |
|
|
|
|
router.push('/studyPage') |
|
|
|
|
}; |
|
|
|
|
// 计时器相关变量 |
|
|
|
|
const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值 |
|
|
|
|
const elapsedTime = ref(0); // 已经过去的时间（单位：秒） |
|
|
|
|
|
|
|
|
|
// 计算属性：将秒数转换为“分：秒”格式 |
|
|
|
|
const formattedTime = computed(() => { |
|
|
|
|
const minutes = Math.floor(elapsedTime.value / 60); // 计算分钟数 |
|
|
|
|
const seconds = elapsedTime.value % 60; // 计算剩余秒数 |
|
|
|
|
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 开始计时 |
|
|
|
|
const startTimer = () => { |
|
|
|
|
timer.value = setInterval(() => { |
|
|
|
|
elapsedTime.value += 1; // 每秒增加 1 |
|
|
|
|
}, 1000); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 停止计时 |
|
|
|
|
const stopTimer = () => { |
|
|
|
|
if (timer.value) { |
|
|
|
|
clearInterval(timer.value); |
|
|
|
|
timer.value = null; |
|
|
|
|
} |
|
|
|
|
const score = ref(0); // 初始化分数为0 |
|
|
|
|
const isVisible = ref(false) //成绩公布页的显示与否 |
|
|
|
|
const complete = ref<boolean>(Boolean(localStorage.getItem("complete"))); //点击提交按钮后控制答题回显 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 提交成绩按钮 |
|
|
|
|
const submitAnswers = async () => { |
|
|
|
|
|
|
|
|
|
console.log(selectedOption.value[currentQuestionIndex.value]) |
|
|
|
|
//答完全部题才能提交成绩 |
|
|
|
|
if (selectedOption.value[questions.value.length - 1] == null) { |
|
|
|
|
ElMessage.warning('请先完成答题') |
|
|
|
|
}else { |
|
|
|
|
const res: any = await checkapi(selectedOption.value[currentQuestionIndex.value]); |
|
|
|
|
if (res.result !== "success") { |
|
|
|
|
ElMessage.error('回答错误') |
|
|
|
|
} else { |
|
|
|
|
stopTimer(); // 停止计时 |
|
|
|
|
score.value = 100; // 重置分数 |
|
|
|
|
isVisible.value = true; |
|
|
|
|
localStorage.setItem("complete", "true");; |
|
|
|
|
// const display = complete.value |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
// 页面加载时开始计时 |
|
|
|
|
onMounted(() => {startTimer();currentList();}); |
|
|
|
|
|
|
|
|
|
// 页面卸载时停止计时（防止内存泄漏） |
|
|
|
|
onUnmounted(() => {stopTimer();}); |
|
|
|
|
|
|
|
|
|
// 处理子组件触发的重做事件 |
|
|
|
|
const handleRecreate = () => { |
|
|
|
|
console.log(timer.value,"子组件触发了重做事件"); |
|
|
|
|
isVisible.value = false; // 隐藏子组件 |
|
|
|
|
selectedOption.value = Array(questions.value.length).fill(null); // 重置所有选中结果 |
|
|
|
|
currentQuestionIndex.value = 0; // 重置到第一题 |
|
|
|
|
stopTimer()//计时器清零 |
|
|
|
|
elapsedTime.value = 0 |
|
|
|
|
startTimer() |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
// 退出答题 |
|
|
|
|
const router = useRouter() |
|
|
|
|
const resetAnswers = () => { |
|
|
|
|
router.push('/studyPage') |
|
|
|
|
}; |
|
|
|
|
// 计时器相关变量 |
|
|
|
|
const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值 |
|
|
|
|
const elapsedTime = ref(0); // 已经过去的时间（单位：秒） |
|
|
|
|
|
|
|
|
|
// 计算属性：将秒数转换为“分：秒”格式 |
|
|
|
|
const formattedTime = computed(() => { |
|
|
|
|
const minutes = Math.floor(elapsedTime.value / 60); // 计算分钟数 |
|
|
|
|
const seconds = elapsedTime.value % 60; // 计算剩余秒数 |
|
|
|
|
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 开始计时 |
|
|
|
|
const startTimer = () => { |
|
|
|
|
timer.value = setInterval(() => { |
|
|
|
|
elapsedTime.value += 1; // 每秒增加 1 |
|
|
|
|
}, 1000); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 停止计时 |
|
|
|
|
const stopTimer = () => { |
|
|
|
|
if (timer.value) { |
|
|
|
|
clearInterval(timer.value); |
|
|
|
|
timer.value = null; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
// 页面加载时开始计时 |
|
|
|
|
onMounted(() => { startTimer(); currentList();}); |
|
|
|
|
|
|
|
|
|
// 页面卸载时停止计时（防止内存泄漏） |
|
|
|
|
onUnmounted(() => { stopTimer(); }); |
|
|
|
|
|
|
|
|
|
// 处理子组件触发的重做事件 |
|
|
|
|
const handleRecreate = () => { |
|
|
|
|
console.log(timer.value, "子组件触发了重做事件"); |
|
|
|
|
isVisible.value = false; // 隐藏子组件 |
|
|
|
|
selectedOption.value = Array(questions.value.length).fill(null); // 重置所有选中结果 |
|
|
|
|
currentQuestionIndex.value = 0; // 重置到第一题 |
|
|
|
|
stopTimer()//计时器清零 |
|
|
|
|
elapsedTime.value = 0 |
|
|
|
|
startTimer() |
|
|
|
|
localStorage.setItem("complete", "false"); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
@ -213,27 +225,36 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
background: url("@/assets/images/bg3.png") no-repeat; |
|
|
|
|
background-size: cover; |
|
|
|
|
|
|
|
|
|
.submit-right{ |
|
|
|
|
.submit-right { |
|
|
|
|
background: url("@/assets/images/right.png") no-repeat; |
|
|
|
|
background-size: contain; |
|
|
|
|
width: 60px; /* 按钮宽度 */ |
|
|
|
|
height: 60px; /* 按钮高度 */ |
|
|
|
|
width: 60px; |
|
|
|
|
/* 按钮宽度 */ |
|
|
|
|
height: 60px; |
|
|
|
|
/* 按钮高度 */ |
|
|
|
|
border: none; |
|
|
|
|
cursor: pointer; |
|
|
|
|
position: absolute; |
|
|
|
|
right: 0; /* 紧靠右部 */ |
|
|
|
|
top: 40%; /* 垂直居中*/ |
|
|
|
|
right: 0; |
|
|
|
|
/* 紧靠右部 */ |
|
|
|
|
top: 40%; |
|
|
|
|
/* 垂直居中*/ |
|
|
|
|
} |
|
|
|
|
.submit-left{ |
|
|
|
|
|
|
|
|
|
.submit-left { |
|
|
|
|
background: url("@/assets/images/left.png") no-repeat; |
|
|
|
|
background-size: contain; |
|
|
|
|
width: 60px; /* 按钮宽度 */ |
|
|
|
|
height: 60px; /* 按钮高度 */ |
|
|
|
|
width: 60px; |
|
|
|
|
/* 按钮宽度 */ |
|
|
|
|
height: 60px; |
|
|
|
|
/* 按钮高度 */ |
|
|
|
|
border: none; |
|
|
|
|
cursor: pointer; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; /* 紧靠左部 */ |
|
|
|
|
top: 40%; /* 垂直居中*/ |
|
|
|
|
left: 0; |
|
|
|
|
/* 紧靠左部 */ |
|
|
|
|
top: 40%; |
|
|
|
|
/* 垂直居中*/ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top { |
|
|
|
|
@ -252,10 +273,14 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.question-body { |
|
|
|
|
background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; /* 添加 background-position */ |
|
|
|
|
background-size: contain; /* 确保背景图片覆盖整个元素 */ |
|
|
|
|
width: 1100px; /* 100% 宽度以确保背景图片完全显示 */ |
|
|
|
|
height: 500px; /* 固定高度 */ |
|
|
|
|
background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; |
|
|
|
|
/* 添加 background-position */ |
|
|
|
|
background-size: contain; |
|
|
|
|
/* 确保背景图片覆盖整个元素 */ |
|
|
|
|
width: 1100px; |
|
|
|
|
/* 100% 宽度以确保背景图片完全显示 */ |
|
|
|
|
height: 500px; |
|
|
|
|
/* 固定高度 */ |
|
|
|
|
margin-top: 100px; |
|
|
|
|
margin-left: auto; |
|
|
|
|
margin-right: auto; |
|
|
|
|
@ -263,104 +288,162 @@ import { useRouter } from 'vue-router'; |
|
|
|
|
padding-right: 50px; |
|
|
|
|
padding-top: 30px; |
|
|
|
|
|
|
|
|
|
.question{ |
|
|
|
|
font-size: 42px; /* 字体大小 */ |
|
|
|
|
text-align: center; /* 水平居中 */ |
|
|
|
|
letter-spacing: 3px; /* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
// margin-top: 50px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.question-count { |
|
|
|
|
font-weight: bold; /* 数字加粗 */ |
|
|
|
|
color: rgb(165, 144, 95); /* 数字颜色为红色 */ |
|
|
|
|
font-size: 55px; /* 数字字体大小 */ |
|
|
|
|
} |
|
|
|
|
.timer{ |
|
|
|
|
font-size: 18px; /* 字体大小 */ |
|
|
|
|
letter-spacing: 3px; /* 字符间距 */ |
|
|
|
|
text-align: right; |
|
|
|
|
position: absolute; /* 使用绝对定位 */ |
|
|
|
|
top: 25%; /* 距离顶部 */ |
|
|
|
|
left: 71.3%; /* 距离左侧 */ |
|
|
|
|
} |
|
|
|
|
.questions{ |
|
|
|
|
font-size: 23px; /* 字体大小 */ |
|
|
|
|
letter-spacing: 3px; /* 字符间距 */ |
|
|
|
|
text-align: right; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.questions-count { |
|
|
|
|
font-weight: bold; /* 数字加粗 */ |
|
|
|
|
color: rgb(165, 144, 95); /* 数字颜色为红色 */ |
|
|
|
|
font-size: 25px; /* 数字字体大小 */ |
|
|
|
|
} |
|
|
|
|
.txt { |
|
|
|
|
margin-top: 18px; |
|
|
|
|
font-size: 22px; /* 字体大小 */ |
|
|
|
|
font-family: Consolas, sans-serif; /* 字体样式 */ |
|
|
|
|
letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
line-height: 1.5; /* 行间距，1.5 表示字体大小的 1.5 倍 */ |
|
|
|
|
.question { |
|
|
|
|
font-size: 42px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
text-align: center; |
|
|
|
|
/* 水平居中 */ |
|
|
|
|
letter-spacing: 3px; |
|
|
|
|
/* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
// margin-top: 50px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.question-count { |
|
|
|
|
font-weight: bold; |
|
|
|
|
/* 数字加粗 */ |
|
|
|
|
color: rgb(165, 144, 95); |
|
|
|
|
/* 数字颜色为红色 */ |
|
|
|
|
font-size: 55px; |
|
|
|
|
/* 数字字体大小 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.timer { |
|
|
|
|
font-size: 18px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
letter-spacing: 3px; |
|
|
|
|
/* 字符间距 */ |
|
|
|
|
text-align: right; |
|
|
|
|
position: absolute; |
|
|
|
|
/* 使用绝对定位 */ |
|
|
|
|
top: 25%; |
|
|
|
|
/* 距离顶部 */ |
|
|
|
|
left: 71.3%; |
|
|
|
|
/* 距离左侧 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.questions { |
|
|
|
|
font-size: 23px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
letter-spacing: 3px; |
|
|
|
|
/* 字符间距 */ |
|
|
|
|
text-align: right; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.questions-count { |
|
|
|
|
font-weight: bold; |
|
|
|
|
/* 数字加粗 */ |
|
|
|
|
color: rgb(165, 144, 95); |
|
|
|
|
/* 数字颜色为红色 */ |
|
|
|
|
font-size: 25px; |
|
|
|
|
/* 数字字体大小 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.txt { |
|
|
|
|
margin-top: 15px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
font-family: Consolas, sans-serif; |
|
|
|
|
/* 字体样式 */ |
|
|
|
|
letter-spacing: 1.5px; |
|
|
|
|
/* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
line-height: 1.5; |
|
|
|
|
/* 行间距，1.5 表示字体大小的 1.5 倍 */ |
|
|
|
|
color: #9b9a9a; |
|
|
|
|
} |
|
|
|
|
/* 选项容器样式 */ |
|
|
|
|
.options { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
color: #9b9a9a; |
|
|
|
|
display: flex; /* 使用 Flexbox 布局 */ |
|
|
|
|
flex-direction: column; /* 垂直排列按钮 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 单个选项样式 */ |
|
|
|
|
.option { |
|
|
|
|
padding: 5px 10px; /* 内边距，让按钮看起来更舒适 */ |
|
|
|
|
font-size: 20px; /* 字体大小 */ |
|
|
|
|
letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
text-align: left; /* 设置文字左对齐 */ |
|
|
|
|
margin-top: 5px; |
|
|
|
|
background-color: transparent; /* 背景颜色设置为透明 */ |
|
|
|
|
border: none; /* 移除边框 */ |
|
|
|
|
cursor: pointer; /* 鼠标悬停时显示手型 */ |
|
|
|
|
transition: background-color 0.3s ease; /* 平滑过渡效果 */ |
|
|
|
|
} |
|
|
|
|
.option:hover { |
|
|
|
|
color: #e7e2e2; /* 鼠标悬停时的字体颜色 */ |
|
|
|
|
} |
|
|
|
|
.option.selected{ |
|
|
|
|
color: #d4cb48; /* 按钮按下或获得焦点时的背景颜色 */ |
|
|
|
|
} |
|
|
|
|
.option-letter{ |
|
|
|
|
font-size: 30px; |
|
|
|
|
font-weight: bold; /* 字母加粗 */ |
|
|
|
|
margin-right: 5px; /* 字母与后面文字的间距 */ |
|
|
|
|
color: rgb(165, 144, 95); |
|
|
|
|
} |
|
|
|
|
/* 选项容器样式 */ |
|
|
|
|
.options { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
color: #9b9a9a; |
|
|
|
|
display: flex; |
|
|
|
|
/* 使用 Flexbox 布局 */ |
|
|
|
|
flex-direction: column; |
|
|
|
|
/* 垂直排列按钮 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 单个选项样式 */ |
|
|
|
|
.option { |
|
|
|
|
padding: 5px 10px; |
|
|
|
|
/* 内边距，让按钮看起来更舒适 */ |
|
|
|
|
font-size: 19px; |
|
|
|
|
/* 字体大小 */ |
|
|
|
|
letter-spacing: 1.5px; |
|
|
|
|
/* 字符间距，单位可以是 px、em 等 */ |
|
|
|
|
text-align: left; |
|
|
|
|
/* 设置文字左对齐 */ |
|
|
|
|
margin-top: 5px; |
|
|
|
|
background-color: transparent; |
|
|
|
|
/* 背景颜色设置为透明 */ |
|
|
|
|
border: none; |
|
|
|
|
/* 移除边框 */ |
|
|
|
|
cursor: pointer; |
|
|
|
|
/* 鼠标悬停时显示手型 */ |
|
|
|
|
transition: background-color 0.3s ease; |
|
|
|
|
/* 平滑过渡效果 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.option:hover { |
|
|
|
|
color: #e7e2e2; |
|
|
|
|
/* 鼠标悬停时的字体颜色 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.option.selected { |
|
|
|
|
color: #d4cb48; |
|
|
|
|
/* 按钮按下或获得焦点时的背景颜色 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.option-letter { |
|
|
|
|
font-size: 30px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
/* 字母加粗 */ |
|
|
|
|
margin-right: 5px; |
|
|
|
|
/* 字母与后面文字的间距 */ |
|
|
|
|
color: rgb(165, 144, 95); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.submit-buttons { |
|
|
|
|
display: flex; /* 使用 Flexbox 布局 */ |
|
|
|
|
flex-direction: row; /* 水平排列按钮 */ |
|
|
|
|
justify-content: center; /* 水平居中 */ |
|
|
|
|
gap: 450px; /* 按钮之间的间距 */ |
|
|
|
|
display: flex; |
|
|
|
|
/* 使用 Flexbox 布局 */ |
|
|
|
|
flex-direction: row; |
|
|
|
|
/* 水平排列按钮 */ |
|
|
|
|
justify-content: center; |
|
|
|
|
/* 水平居中 */ |
|
|
|
|
gap: 450px; |
|
|
|
|
/* 按钮之间的间距 */ |
|
|
|
|
margin-top: 50px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.submit-btn { |
|
|
|
|
background: url("@/assets/images/Button.png") center; |
|
|
|
|
background-size: contain; /* 确保背景图片覆盖整个元素 */ |
|
|
|
|
background-color: transparent; /* 背景颜色设置为透明 */ |
|
|
|
|
border: none; /* 移除边框 */ |
|
|
|
|
cursor: pointer; /* 鼠标悬停时显示手型 */ |
|
|
|
|
background-size: contain; |
|
|
|
|
/* 确保背景图片覆盖整个元素 */ |
|
|
|
|
background-color: transparent; |
|
|
|
|
/* 背景颜色设置为透明 */ |
|
|
|
|
border: none; |
|
|
|
|
/* 移除边框 */ |
|
|
|
|
cursor: pointer; |
|
|
|
|
/* 鼠标悬停时显示手型 */ |
|
|
|
|
width: 300px; |
|
|
|
|
height: 41px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
font-weight: bold; /* 文字加粗 */ |
|
|
|
|
font-weight: bold; |
|
|
|
|
/* 文字加粗 */ |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 覆盖 el-dialog 的背景和边框样式 */ |
|
|
|
|
:deep(.el-dialog){ |
|
|
|
|
background: transparent !important; /* 设置背景为透明 */ |
|
|
|
|
border: none !important; /* 移除边框 */ |
|
|
|
|
box-shadow: none !important; /* 移除阴影 */ |
|
|
|
|
overflow: hidden; /* 防止内容溢出 */ |
|
|
|
|
:deep(.el-dialog) { |
|
|
|
|
background: transparent !important; |
|
|
|
|
/* 设置背景为透明 */ |
|
|
|
|
border: none !important; |
|
|
|
|
/* 移除边框 */ |
|
|
|
|
box-shadow: none !important; |
|
|
|
|
/* 移除阴影 */ |
|
|
|
|
overflow: hidden; |
|
|
|
|
/* 防止内容溢出 */ |
|
|
|
|
width: 640px; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
