Merge branch 'main' of http://182.92.169.222:3000/dlsx/virtualSimulation
commit
1d5d79e316
33 changed files with 1264 additions and 290 deletions
@ -1,4 +1,4 @@ |
|||||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
||||||
NODE_ENV = 'development' |
NODE_ENV = 'development' |
||||||
VITE_APP_TITLE = '大屏数据' |
VITE_APP_TITLE = '实验仿真' |
||||||
VITE_APP_BASE_API = 'http://10.115.6.28:18083/' |
VITE_APP_BASE_API = '//localhost:16066/jeecg-boot' |
||||||
@ -1,2 +1,14 @@ |
|||||||
import request from '@/utils/request' |
import request from '@/utils/request' |
||||||
|
|
||||||
|
export const login = (data: any) => { |
||||||
|
return request({ |
||||||
|
url: '/sys/login', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
export const getCode = (time: any) => { |
||||||
|
return request({ |
||||||
|
url: '/sys/randomImage/' + time, |
||||||
|
}) |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 1018 B |
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 838 B |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 266 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
@ -0,0 +1,23 @@ |
|||||||
|
import router from "./router"; |
||||||
|
import userStore from "./store/modules/user"; |
||||||
|
import { getToken } from "./utils/auth"; |
||||||
|
import pinia from "./store"; |
||||||
|
const store = userStore(pinia); |
||||||
|
router.beforeEach((to: any, from: any, next: any) => { |
||||||
|
if (to.path === "/login") { |
||||||
|
if (store.token) { |
||||||
|
next("/"); |
||||||
|
} else { |
||||||
|
next(); |
||||||
|
} |
||||||
|
// next();
|
||||||
|
} else { |
||||||
|
const token = getToken(); |
||||||
|
if (token) { |
||||||
|
next(); |
||||||
|
} else { |
||||||
|
next("/login"); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
export default router; |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import { defineStore } from "pinia"; |
||||||
|
import { getToken,setToken } from "@/utils/auth"; |
||||||
|
import { login } from "@/api"; |
||||||
|
import { ElMessage } from "element-plus"; |
||||||
|
const userStore = defineStore("userStore", { |
||||||
|
state: () => ({ |
||||||
|
token: getToken(), |
||||||
|
userInfo: {}, |
||||||
|
}), |
||||||
|
actions: { |
||||||
|
async logIn(form: any) { |
||||||
|
console.log(form); |
||||||
|
const res: any = await login(form); |
||||||
|
// if(res.code === 500) return ElMessage.error(res.msg)
|
||||||
|
if(res.code !== 200) { |
||||||
|
ElMessage.error(res.msg) |
||||||
|
return false |
||||||
|
} |
||||||
|
this.token = res.result.token; |
||||||
|
this.userInfo = res.result.userInfo; |
||||||
|
setToken(this.token); |
||||||
|
console.log(res); |
||||||
|
return true |
||||||
|
}, |
||||||
|
clearStatus() { |
||||||
|
this.token = ""; |
||||||
|
this.userInfo = {}; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
export default userStore; |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
const TOKEN_KEY:string = "token"; |
||||||
|
const setToken = (token: string): void => { |
||||||
|
localStorage.setItem(TOKEN_KEY, token); |
||||||
|
}; |
||||||
|
const getToken = () => localStorage.getItem(TOKEN_KEY) || ""; |
||||||
|
const removeToken = () => localStorage.removeItem(TOKEN_KEY); |
||||||
|
export { |
||||||
|
setToken, |
||||||
|
getToken, |
||||||
|
removeToken, |
||||||
|
}; |
||||||
@ -1,23 +1,38 @@ |
|||||||
// 引入第三方请求库axios
|
// 引入第三方请求库axios
|
||||||
import axios from 'axios' |
import axios from "axios"; |
||||||
|
import pinia from "@/store"; |
||||||
|
import { ElMessage } from "element-plus"; |
||||||
|
|
||||||
|
import userStore from "@/store/modules/user"; |
||||||
// 创建axios实例
|
// 创建axios实例
|
||||||
const server = axios.create({ |
const server = axios.create({ |
||||||
baseURL:import.meta.env.VITE_APP_BASE_API, |
baseURL: import.meta.env.VITE_APP_BASE_API, |
||||||
timeout:10000, |
timeout: 30000, |
||||||
}) |
}); |
||||||
// 创建请求拦截器
|
// 创建请求拦截器
|
||||||
|
|
||||||
server.interceptors.request.use((config) => { |
server.interceptors.request.use((config) => { |
||||||
return config |
const useuserStore = userStore(pinia); |
||||||
|
|
||||||
}) |
config.headers.Authorization = useuserStore.token; |
||||||
|
config.headers["x-access-token"] = useuserStore.token; |
||||||
|
return config; |
||||||
|
}); |
||||||
// 创建相应拦截器
|
// 创建相应拦截器
|
||||||
server.interceptors.response.use((response:any) => { |
server.interceptors.response.use((response) => { |
||||||
if(response.status === 200){ |
if (response.data.code === 401) { |
||||||
return response.data |
const useuserStore = userStore(pinia); |
||||||
} |
|
||||||
// return response
|
// useuserStore.clearStatus();
|
||||||
}) |
// return Promise.reject(response);
|
||||||
|
} |
||||||
|
if (response.data.code === 412) { |
||||||
|
ElMessage.error(response.data.message); |
||||||
|
return Promise.reject(response); |
||||||
|
} |
||||||
|
return response.data; |
||||||
|
}); |
||||||
|
|
||||||
// 暴露axios实例
|
// 暴露axios实例
|
||||||
|
|
||||||
export default server |
export default server; |
||||||
|
|||||||
@ -0,0 +1,231 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<div class="top">总分</div> |
||||||
|
<div class="header"> |
||||||
|
<img |
||||||
|
v-if="score >= 60" |
||||||
|
class="pattern" |
||||||
|
src="@/assets/images/bg8.png" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-else |
||||||
|
class="pattern" |
||||||
|
src="@/assets/images/bg9.png" |
||||||
|
/> |
||||||
|
<img |
||||||
|
class="patternBig" |
||||||
|
src="@/assets/images/bg8.png" |
||||||
|
v-if="score >= 80" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-else |
||||||
|
class="patternBig" |
||||||
|
src="@/assets/images/bg9.png" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-if="score >= 100" |
||||||
|
class="pattern" |
||||||
|
src="@/assets/images/bg8.png" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-else |
||||||
|
class="pattern" |
||||||
|
src="@/assets/images/bg9.png" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="mainContent"> |
||||||
|
<div class="up">{{score}}分</div> |
||||||
|
<div class="down">SCORE</div> |
||||||
|
</div> |
||||||
|
<div class="bottoms"> |
||||||
|
<div class="bottom"> |
||||||
|
<img src="@/assets/images/bg10.png"/> |
||||||
|
<div class="txt"> |
||||||
|
{{0}}题 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<img src="@/assets/images/bg11.png"/> |
||||||
|
<div class="txt"> |
||||||
|
{{ formattedTime }} |
||||||
|
</div> |
||||||
|
</div><div class="bottom"> |
||||||
|
<img src="@/assets/images/bg12.png"/> |
||||||
|
<div class="txt"> |
||||||
|
100 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="footer"> |
||||||
|
<button class="btn1">去学习</button> |
||||||
|
<button class="btn2" @click="Recreate">重做</button> |
||||||
|
<button class="btn3" @click="Back">回首页</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import {ref,defineProps,defineEmits } from 'vue' |
||||||
|
import { useRouter } from 'vue-router'; |
||||||
|
|
||||||
|
|
||||||
|
// 定义 Props |
||||||
|
const Props = defineProps({ |
||||||
|
score: Number, |
||||||
|
formattedTime :String |
||||||
|
}); |
||||||
|
|
||||||
|
// 定义自定义事件 |
||||||
|
const emit = defineEmits(['recreate']); |
||||||
|
//重做按钮 |
||||||
|
const Recreate=()=>{ |
||||||
|
// 触发自定义事件，通知父组件 |
||||||
|
emit('recreate'); |
||||||
|
} |
||||||
|
|
||||||
|
//回首页 |
||||||
|
const router = useRouter(); |
||||||
|
const Back =()=>{ |
||||||
|
router.push('/'); // 返回首页 |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container { |
||||||
|
width: 600px; |
||||||
|
height: 540px; |
||||||
|
background: url("@/assets/images/bg4.png") no-repeat center center; |
||||||
|
background-size: contain; |
||||||
|
padding-top: 15px; |
||||||
|
padding-left: 25px; |
||||||
|
padding-right:25px; |
||||||
|
} |
||||||
|
.top{ |
||||||
|
color: #b6b3b3; |
||||||
|
font-size: 18px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.header{ |
||||||
|
height: 140px; |
||||||
|
margin-top: 20px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
gap: 30px; |
||||||
|
padding-left: 90px; |
||||||
|
padding-right: 70px; |
||||||
|
} |
||||||
|
.header{ |
||||||
|
height: 140px; |
||||||
|
margin-top: 20px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
gap: 30px; |
||||||
|
padding-left: 90px; |
||||||
|
padding-right: 70px; |
||||||
|
} |
||||||
|
.pattern{ |
||||||
|
width: 100px; |
||||||
|
height: 100px; |
||||||
|
margin-top: 35px; |
||||||
|
} |
||||||
|
.patternBig{ |
||||||
|
width: 120px; |
||||||
|
height: 120px; |
||||||
|
margin-top: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.mainContent{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; /* 垂直排列 */ |
||||||
|
align-items: center; /*水平居中 */ |
||||||
|
margin-top: 25px; |
||||||
|
} |
||||||
|
.up{ |
||||||
|
color: #fff; |
||||||
|
font-size: 45px; |
||||||
|
} |
||||||
|
.down{ |
||||||
|
color: rgb(165, 129, 45); |
||||||
|
font-size: 17px; |
||||||
|
font-weight: bold; /* 字母加粗 */ |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
.bottoms{ |
||||||
|
display: flex; |
||||||
|
height: 28px; |
||||||
|
width: 100%; |
||||||
|
position: absolute; /* 绝对定位 */ |
||||||
|
bottom: 200px; |
||||||
|
gap: 90px; |
||||||
|
left: 110px; |
||||||
|
} |
||||||
|
.bottom{ |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
} |
||||||
|
.txt{ |
||||||
|
color: #b8b5b5; |
||||||
|
font-size: 15px; |
||||||
|
margin-left: 8px; |
||||||
|
margin-top: 8px; |
||||||
|
} |
||||||
|
.footer{ |
||||||
|
width: 560px; |
||||||
|
height: 160px; |
||||||
|
position: absolute; /* 绝对定位 */ |
||||||
|
bottom: 0; /* 置于底部 */ |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
padding-left: 50px; |
||||||
|
gap: 50px; |
||||||
|
} |
||||||
|
.btn1{ |
||||||
|
background: url("@/assets/images/bg5.png") no-repeat; |
||||||
|
background-size: contain; |
||||||
|
background-color: transparent; /* 背景颜色设置为透明 */ |
||||||
|
border: none; /* 移除边框 */ |
||||||
|
cursor: pointer; /* 鼠标悬停时显示手型 */ |
||||||
|
width: 120px; |
||||||
|
height: auto; |
||||||
|
font-size: 17px; |
||||||
|
color:rgb(13, 58, 102); |
||||||
|
/* 调整文字位置 */ |
||||||
|
padding: 10px 0 20px; /* 上内边距为 10px，下内边距为 20px */ |
||||||
|
display: flex; /* 使用 Flexbox 布局 */ |
||||||
|
align-items: flex-end; /* 文字对齐到底部 */ |
||||||
|
justify-content: center; /* 文字水平居中 */ |
||||||
|
} |
||||||
|
.btn2{ |
||||||
|
background: url("@/assets/images/bg6.png") no-repeat; |
||||||
|
background-size: contain; |
||||||
|
background-color: transparent; /* 背景颜色设置为透明 */ |
||||||
|
border: none; /* 移除边框 */ |
||||||
|
cursor: pointer; /* 鼠标悬停时显示手型 */ |
||||||
|
width: 120px; |
||||||
|
height: auto; |
||||||
|
font-size: 17px; |
||||||
|
color:rgb(13, 58, 102); |
||||||
|
/* 调整文字位置 */ |
||||||
|
padding: 10px 0 20px; /* 上内边距为 10px，下内边距为 20px */ |
||||||
|
display: flex; /* 使用 Flexbox 布局 */ |
||||||
|
align-items: flex-end; /* 文字对齐到底部 */ |
||||||
|
justify-content: center; /* 文字水平居中 */ |
||||||
|
} |
||||||
|
.btn3{ |
||||||
|
background: url("@/assets/images/bg7.png") no-repeat; |
||||||
|
background-size: contain; |
||||||
|
background-color: transparent; /* 背景颜色设置为透明 */ |
||||||
|
border: none; /* 移除边框 */ |
||||||
|
cursor: pointer; /* 鼠标悬停时显示手型 */ |
||||||
|
width: 120px; |
||||||
|
height: auto; |
||||||
|
font-size: 17px; |
||||||
|
color:rgb(13, 58, 102); |
||||||
|
/* 调整文字位置 */ |
||||||
|
padding: 10px 0 20px; /* 上内边距为 10px，下内边距为 20px */ |
||||||
|
display: flex; /* 使用 Flexbox 布局 */ |
||||||
|
align-items: flex-end; /* 文字对齐到底部 */ |
||||||
|
justify-content: center; /* 文字水平居中 */ |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,365 @@ |
|||||||
|
<template> |
||||||
|
<div class="container-bgc"> |
||||||
|
<div class="top"> |
||||||
|
<div class="title">{{ setting.title }}</div> |
||||||
|
</div> |
||||||
|
<!-- 右边箭头 --> |
||||||
|
<button class="submit-right" @click="SubRight"></button> |
||||||
|
<!-- 左边按钮 --> |
||||||
|
<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> |
||||||
|
<p class="questions">共<span class="questions-count">10</span>题</p> |
||||||
|
<!-- 遍历题目 --> |
||||||
|
<div v-if="currentQuestionIndex < questions.length" class="txt"> |
||||||
|
<span>{{ currentQuestion.question }}</span> |
||||||
|
</div> |
||||||
|
<!-- 遍历选项 --> |
||||||
|
<div class="options"> |
||||||
|
<button |
||||||
|
v-for="option in currentQuestion.options" |
||||||
|
:key="option.option" |
||||||
|
:class="{ option: true, selected: selectedOption[currentQuestionIndex] === option.option }" |
||||||
|
@click="selectOption(option.option)" |
||||||
|
class="option" |
||||||
|
> |
||||||
|
<span class="option-letter">{{ option.option }}</span> |
||||||
|
{{ option.content }} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="submit-buttons"> |
||||||
|
<button class="submit-btn" @click="resetAnswers">退出答题</button> |
||||||
|
<button class="submit-btn" @click="submitAnswers">提交成绩</button> |
||||||
|
</div> |
||||||
|
<el-dialog |
||||||
|
v-model="isVisible" :close-on-click-modal="false" :show-close="false"> |
||||||
|
<resultsAnnounced :score = "score" :formattedTime ="formattedTime "@recreate="handleRecreate"/> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import resultsAnnounced from '@/views/resultsAnnounced/index.vue' |
||||||
|
import settingStore from "@/store/modules/setting"; |
||||||
|
import { ref,computed,onMounted, onUnmounted} from "vue" |
||||||
|
import { ElMessage } from 'element-plus' |
||||||
|
const setting = settingStore(); |
||||||
|
//左箭头 |
||||||
|
const SubLeft =()=>{ |
||||||
|
console.log(currentQuestionIndex.value) |
||||||
|
if(currentQuestionIndex.value >= 1){ |
||||||
|
currentQuestionIndex.value = currentQuestionIndex.value - 1 |
||||||
|
}else{ |
||||||
|
ElMessage.warning('无法上翻') |
||||||
|
} |
||||||
|
} |
||||||
|
//右箭头 |
||||||
|
const SubRight =()=>{ |
||||||
|
// 如果答对了，进入下一题 |
||||||
|
if (selectedOption.value[currentQuestionIndex.value] === currentQuestion.value.correctAnswer) { |
||||||
|
if(currentSum.value < questions.length){ |
||||||
|
setTimeout(() => { |
||||||
|
currentQuestionIndex.value++; // 更新到下一题 |
||||||
|
}, 200); // 延迟0.2秒进入下一题 |
||||||
|
} |
||||||
|
else{ |
||||||
|
ElMessage.success('答题已完成，请提交') |
||||||
|
} |
||||||
|
} |
||||||
|
else{ |
||||||
|
if(selectedOption.value[currentQuestionIndex.value] == null){ |
||||||
|
ElMessage.warning('请先答题') |
||||||
|
}else{ |
||||||
|
ElMessage.error('回答错误') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
const questions = [ |
||||||
|
{ |
||||||
|
//题目 |
||||||
|
question: "根据基尔霍夫电压定律（KVL），下列说法正确的是：", |
||||||
|
//选项 |
||||||
|
options: [ |
||||||
|
{ option: "A", content: "在任一瞬时，沿任一闭合回路各段电压的代数和为零。" }, |
||||||
|
{ option: "B", content: "在任一瞬时，沿任一闭合回路各段电压的代数和不为零。" }, |
||||||
|
{ option: "C", content: "在任一瞬时，沿任一闭合回路各段电压的代数和为正。" }, |
||||||
|
{ option: "D", content: "在任一瞬时，沿任一闭合回路各段电压的代数和为负。" } |
||||||
|
], |
||||||
|
correctAnswer: "A" // 正确答案 |
||||||
|
}, |
||||||
|
{ |
||||||
|
question: "根据欧姆定律，下列说法正确的是：", |
||||||
|
options: [ |
||||||
|
{ option: "A", content: "电流与电压成反比，与电阻成正比。" }, |
||||||
|
{ option: "B", content: "电流与电压成正比，与电阻成反比。" }, |
||||||
|
{ option: "C", content: "电流与电压和电阻无关。" }, |
||||||
|
{ option: "D", content: "电流与电压成正比，与电阻成正比。" } |
||||||
|
], |
||||||
|
correctAnswer: "B" // 正确答案 |
||||||
|
}, |
||||||
|
{ |
||||||
|
question: "在电路分析中，欧姆定律是一个基本而重要的原理，它描述了电流、电压和电阻之间的关系。根据欧姆定律，通过导体的电流与导体两端的电压成正比，与导体的电阻成反比。请根据这一定律，选择下列哪个选项最准确地描述了这一关系？此外，考虑到实际应用中，导体的电阻可能会受到温度、材料和几何尺寸等因素的影响，这些因素如何改变电流与电压和电阻之间的关系？", |
||||||
|
options: [ |
||||||
|
{ option: "A", content: "电流与电压成正比，与电阻成正比。" }, |
||||||
|
{ option: "B", content: "电流与电压成正比，与电阻成反比。" }, |
||||||
|
{ option: "C", content: "电流与电压成反比，与电阻无关。" }, |
||||||
|
{ option: "D", content: "电流与电压和电阻均无关，仅受外部磁场影响。" } |
||||||
|
], |
||||||
|
correctAnswer: "C" // 正确答案 |
||||||
|
} |
||||||
|
]; |
||||||
|
// 当前题目的索引 |
||||||
|
const currentQuestionIndex = ref(0); |
||||||
|
//计算当前题目的序号（从1开始） |
||||||
|
const currentSum = computed(() => currentQuestionIndex.value + 1); |
||||||
|
// 当前题目 |
||||||
|
const currentQuestion = computed(() => questions[currentQuestionIndex.value]); |
||||||
|
// 当前选中的按钮索引 |
||||||
|
const selectedOption = ref<string[]>(Array(questions.length).fill(null)); // 初始化数组，默认值为 null |
||||||
|
//选中逻辑 |
||||||
|
const selectOption = (option: string) => { |
||||||
|
selectedOption.value[currentQuestionIndex.value] = option; // 更新当前题目的选中选项 |
||||||
|
console.log(selectedOption.value); |
||||||
|
}; |
||||||
|
|
||||||
|
const score = ref(0); // 初始化分数为0 |
||||||
|
const isVisible = ref (false) //成绩公布页的显示与否 |
||||||
|
// 提交成绩按钮 |
||||||
|
const submitAnswers = () => { |
||||||
|
console.log(selectedOption.value[currentQuestionIndex.value]) |
||||||
|
//答完全部题才能提交成绩 |
||||||
|
if(selectedOption.value[questions.length - 1] == null){ |
||||||
|
ElMessage.warning('请先完成答题') |
||||||
|
}else{ |
||||||
|
if (selectedOption.value[currentQuestionIndex.value] !== currentQuestion.value.correctAnswer){ |
||||||
|
ElMessage.error('回答错误') |
||||||
|
}else{ |
||||||
|
stopTimer(); // 停止计时 |
||||||
|
score.value = 0; // 重置分数 |
||||||
|
isVisible.value = true; |
||||||
|
for (let i = 0; i < questions.length; i++) { |
||||||
|
// 如果当前题目的选中选项与正确答案一致，则加10分 |
||||||
|
if (selectedOption.value[i] === questions[i].correctAnswer) { |
||||||
|
score.value += 10; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
// 退出答题 |
||||||
|
const resetAnswers = () => { |
||||||
|
|
||||||
|
isVisible.value = false; |
||||||
|
}; |
||||||
|
// 计时器相关变量 |
||||||
|
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();}); |
||||||
|
|
||||||
|
// 页面卸载时停止计时（防止内存泄漏） |
||||||
|
onUnmounted(() => {stopTimer();}); |
||||||
|
|
||||||
|
// 处理子组件触发的重做事件 |
||||||
|
const handleRecreate = () => { |
||||||
|
console.log(timer.value,"子组件触发了重做事件"); |
||||||
|
isVisible.value = false; // 隐藏子组件 |
||||||
|
selectedOption.value = Array(questions.length).fill(null); // 重置所有选中结果 |
||||||
|
currentQuestionIndex.value = 0; // 重置到第一题 |
||||||
|
stopTimer()//计时器清零 |
||||||
|
elapsedTime.value = 0 |
||||||
|
startTimer() |
||||||
|
}; |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container-bgc { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
// height: 1000px; |
||||||
|
min-height: 100vh; |
||||||
|
// background-color: #091d22; |
||||||
|
background: url("@/assets/images/bg3.png") no-repeat; |
||||||
|
background-size: cover; |
||||||
|
|
||||||
|
.submit-right{ |
||||||
|
background: url("@/assets/images/right.png") no-repeat; |
||||||
|
background-size: contain; |
||||||
|
width: 60px; /* 按钮宽度 */ |
||||||
|
height: 60px; /* 按钮高度 */ |
||||||
|
border: none; |
||||||
|
cursor: pointer; |
||||||
|
position: absolute; |
||||||
|
right: 0; /* 紧靠右部 */ |
||||||
|
top: 40%; /* 垂直居中*/ |
||||||
|
} |
||||||
|
.submit-left{ |
||||||
|
background: url("@/assets/images/left.png") no-repeat; |
||||||
|
background-size: contain; |
||||||
|
width: 60px; /* 按钮宽度 */ |
||||||
|
height: 60px; /* 按钮高度 */ |
||||||
|
border: none; |
||||||
|
cursor: pointer; |
||||||
|
position: absolute; |
||||||
|
left: 0; /* 紧靠左部 */ |
||||||
|
top: 40%; /* 垂直居中*/ |
||||||
|
} |
||||||
|
|
||||||
|
.top { |
||||||
|
width: 100%; |
||||||
|
height: 75px; |
||||||
|
text-align: center; |
||||||
|
font-size: 42px; |
||||||
|
line-height: 75px; |
||||||
|
font-style: italic; |
||||||
|
background: url("@/assets/images/topbgc.png") no-repeat; |
||||||
|
background-size: cover; |
||||||
|
|
||||||
|
.title { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.question-body { |
||||||
|
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; |
||||||
|
padding-left: 50px; |
||||||
|
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: 20px; /* 字体大小 */ |
||||||
|
letter-spacing: 3px; /* 字符间距 */ |
||||||
|
text-align: right; |
||||||
|
position: absolute; /* 使用绝对定位 */ |
||||||
|
top: 24.5%; /* 距离顶部 50% */ |
||||||
|
left: 71%; /* 距离左侧 50% */ |
||||||
|
} |
||||||
|
.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: 18px; /* 字体大小 */ |
||||||
|
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: 18px; /* 字体大小 */ |
||||||
|
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; /* 按钮之间的间距 */ |
||||||
|
margin-top: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.submit-btn { |
||||||
|
background: url("@/assets/images/Button.png") center; |
||||||
|
background-size: contain; /* 确保背景图片覆盖整个元素 */ |
||||||
|
background-color: transparent; /* 背景颜色设置为透明 */ |
||||||
|
border: none; /* 移除边框 */ |
||||||
|
cursor: pointer; /* 鼠标悬停时显示手型 */ |
||||||
|
width: 300px; |
||||||
|
height: 41px; |
||||||
|
font-size: 17px; |
||||||
|
font-weight: bold; /* 文字加粗 */ |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
/* 覆盖 el-dialog 的背景和边框样式 */ |
||||||
|
:deep(.el-dialog){ |
||||||
|
background: transparent !important; /* 设置背景为透明 */ |
||||||
|
border: none !important; /* 移除边框 */ |
||||||
|
box-shadow: none !important; /* 移除阴影 */ |
||||||
|
overflow: hidden; /* 防止内容溢出 */ |
||||||
|
width: 640px; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue