Merge branch 'main' of http://182.92.169.222:3000/dlsx/virtualSimulation
JayChou
2 weeks ago
commit
a2b15566cb
21 changed files with 2122 additions and 195 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,25 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
|
||||
export const getCode = (time: any) => { |
||||
return request({ |
||||
url: '/sys/randomImage/' + time, |
||||
}) |
||||
} |
||||
// 获取院系列表
|
||||
export const getFaculties = (params: any) => { |
||||
return request({ |
||||
url: '/sys/sysDepart/stu', |
||||
params, |
||||
}) |
||||
} |
||||
|
||||
|
||||
// 注册
|
||||
export const sturegister = (data: any) => { |
||||
return request({ |
||||
url: '/sys/user/stuRegister', |
||||
method: 'POST', |
||||
data, |
||||
}) |
||||
} |
||||
|
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: 3.2 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
@ -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