parent
134ed3f04f
commit
92abe14796
11 changed files with 69 additions and 983 deletions
|
After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 129 KiB |
@ -1,907 +0,0 @@ |
||||
<template> |
||||
<div class="box" style="overflow-x: hidden"> |
||||
<el-row :gutter="20" style="padding-top: 20px;"> |
||||
<el-col :span="24"> |
||||
<el-col :span="18"> |
||||
<div class="cover"> |
||||
<img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%"> |
||||
<template v-else-if="iframeSrc"> |
||||
<iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe> |
||||
<template v-if="showMask"> |
||||
<div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div> |
||||
<div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div> |
||||
</template> |
||||
<template v-if="showMask1"> |
||||
<div class="word-mask" style="height: 40px;"></div> |
||||
<div class="word-mask2" |
||||
style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div> |
||||
</template> |
||||
<template v-if="showMask2"> |
||||
<div class="excel-mask1" style="height: 48px;"></div> |
||||
</template> |
||||
</template> |
||||
<div class="pdf inner" v-else-if="pdfSrc"> |
||||
<pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf> |
||||
</div> |
||||
<div v-else> |
||||
<video ref="video" controls class="video_wid" :src="videoSrc" |
||||
controlsList="nodownload"></video> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="catalog"> |
||||
<div class="btns"> |
||||
<!-- <el-button type="primary" @click="toEvaluation(1,2)">虚拟仿真实验</el-button> |
||||
<el-button type="primary" @click="toEvaluation(1,3)">教学实验</el-button> --> |
||||
<el-button type="primary" @click="toEvaluation(0,2)">能力测评</el-button> |
||||
</div> |
||||
<ul class="filter" style="margin: 10px 0"> |
||||
<li> |
||||
<label>系统</label> |
||||
<el-select v-model="systemId" placeholder="请选择" @change="systemChange"> |
||||
<el-option |
||||
v-for="item in systemList" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.id" |
||||
></el-option> |
||||
</el-select> |
||||
</li> |
||||
</ul> |
||||
|
||||
<div class="list_he"> |
||||
<h4 class="list_title">学习资源</h4> |
||||
<template v-if="systemId == 1"> |
||||
<div v-for="(item,index) in videoList1" :key="index"> |
||||
<div class="flex-between list_catalog"> |
||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template v-else-if="systemId == 4"> |
||||
<div v-for="(item,index) in videoList4" :key="index"> |
||||
<div class="flex-between list_catalog"> |
||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template v-else-if="systemId == 5"> |
||||
<div v-for="(item,index) in videoList5" :key="index"> |
||||
<div class="flex-between list_catalog"> |
||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template v-else-if="systemId == 6"> |
||||
<div v-for="(item,index) in videoList6" :key="index"> |
||||
<div class="flex-between list_catalog"> |
||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template v-else-if="systemId == 7"> |
||||
<div v-for="(item,index) in videoList7" :key="index"> |
||||
<div class="flex-between list_catalog"> |
||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template v-else-if="systemId == 8"> |
||||
<div v-for="(item,index) in videoList8" :key="index"> |
||||
<div class="flex-between list_catalog"> |
||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template v-else-if="systemId == 9"> |
||||
<div v-for="(item,index) in videoList9" :key="index"> |
||||
<div class="flex-between list_catalog"> |
||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template v-else-if="systemId == 10"> |
||||
<div v-for="(item,index) in videoList10" :key="index"> |
||||
<div class="flex-between list_catalog"> |
||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template v-else> |
||||
<div v-for="(item,index) in videoList1" :key="index"> |
||||
<div class="flex-between list_catalog"> |
||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<!-- 答题弹框 --> |
||||
<el-dialog :visible.sync="evaluationVisible" width="30%" custom-class="evaluation_dialog" center |
||||
:close-on-click-modal="false"> |
||||
<div class="title">能力测评</div> |
||||
<div class="ques-wrap"> |
||||
<p class="serial">{{ question.currentQuestionSortNo }}/{{ question.totalQuestionNum }}</p> |
||||
<p class="type">({{ question.questionTypeName }})</p> |
||||
<div class="ques">{{ question.questionStem }}</div> |
||||
<div class="countdown flex-center"> |
||||
<img src="@/assets/img/hourglass.png" alt=""> |
||||
<span>倒计时：{{ countdown }}</span> |
||||
</div> |
||||
<ul class="options" :class="{isDone}"> |
||||
<li v-for="(item,key) in question.options" :key="key" :class="{active: selected.includes(key)}" |
||||
@click="selectOption(key)"><em>{{ key }}.</em><span>{{ item }}</span></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div slot="footer" class="dialog-footer" v-if="!isDone"> |
||||
<template v-if="lastOne"> |
||||
<el-button @click="prevQues">上一题</el-button> |
||||
<el-button type="primary" @click="submitQues">提交</el-button> |
||||
</template> |
||||
<template v-else> |
||||
<el-button class="first" @click="prevQues">上一题</el-button> |
||||
<el-button class="second" type="primary" @click="nextQues">下一题</el-button> |
||||
</template> |
||||
</div> |
||||
</el-dialog> |
||||
|
||||
<!-- 提交成绩弹框 --> |
||||
<el-dialog :visible.sync="resultVisible" width="30%" custom-class="result_dialog" center |
||||
:close-on-click-modal="false"> |
||||
<div class="result"><span>{{ result.isPassed }}</span></div> |
||||
|
||||
<div class="ques-wrap"> |
||||
<div class="point"> |
||||
<span>{{ result.totalScore }}</span>分 |
||||
</div> |
||||
<p class="tips"> |
||||
{{ result.isPassed == "通过" ? "恭喜" : "" }}你答对{{ result.correctQuestionNum |
||||
}}题，正确率{{ result.correctRate }}！</p> |
||||
</div> |
||||
|
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button class="first" @click="toEvaluation(0)">再试一次</el-button> |
||||
<el-button class="second" type="primary" @click="getDetail">成绩详情</el-button> |
||||
<el-button v-if="result.isPassed == '通过'" class="third" type="primary" @click="goSubSystem">进入实训 |
||||
</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
|
||||
<!-- 成绩详情弹框 --> |
||||
<el-dialog :visible.sync="detailVisible" width="30%" custom-class="detail_dialog" center |
||||
:close-on-click-modal="false"> |
||||
<div class="title">成绩详情</div> |
||||
<div style="min-height: 370px"> |
||||
<el-table :data="detailData" height="340" border style="width: 100%"> |
||||
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column> |
||||
<el-table-column prop="date" label="正误" min-width="45" align="center"> |
||||
<template slot-scope="scope"> |
||||
<img v-if="scope.row.questionScore" width="15" src="@/assets/img/true.png" alt=""> |
||||
<img v-else width="15" src="@/assets/img/false.png" alt=""> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="questionScore" label="得分" min-width="45" align="center"></el-table-column> |
||||
<el-table-column prop="answer" label="正确答案" min-width="70" align="center"></el-table-column> |
||||
<el-table-column prop="userAnswer" label="你的答案" min-width="70" align="center"></el-table-column> |
||||
<el-table-column prop="answerAnalysis" label="解析" min-width="80"></el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<p class="total">得分：{{ totalScore }}分</p> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapState, mapActions } from "vuex"; |
||||
import util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
import pdf from "@/components/pdf"; |
||||
import { videoList1, videoList4, videoList5, videoList6, videoList7, videoList8 } from "@/libs/videoList"; |
||||
|
||||
export default { |
||||
components: { pdf }, |
||||
data() { |
||||
return { |
||||
systemId: Setting.systemId, |
||||
systemList: Setting.systemList, |
||||
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4", |
||||
videoSrc: "", |
||||
curLink: "", |
||||
videoList1, |
||||
videoList4, |
||||
videoList5, |
||||
videoList6, |
||||
videoList7, |
||||
videoList8, |
||||
evaluationVisible: false, |
||||
resultVisible: false, |
||||
detailVisible: false, |
||||
lastOne: false, |
||||
question: { |
||||
options: {} |
||||
}, |
||||
countdown: "", |
||||
selected: "", |
||||
result: {}, |
||||
detail: {}, |
||||
timer: null, |
||||
totalScore: 0, |
||||
detailData: [], |
||||
isDone: false, |
||||
history: [], |
||||
btnType: 1, |
||||
|
||||
coverUrl: "", |
||||
playAuth: "", |
||||
player: null, |
||||
previewImg: "", |
||||
iframeSrc: "", |
||||
isWord: false, |
||||
isPPT: false, |
||||
isExcel: false, |
||||
showMask: false, |
||||
showMask1: false, |
||||
showMask2: false, |
||||
closePosi: { |
||||
top: "80px" |
||||
}, |
||||
pdfVisible: false, |
||||
pdfSrc: "" |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState("user", [ |
||||
"studentId", "userId" |
||||
]) |
||||
}, |
||||
watch: { |
||||
question: { |
||||
handler(newVal, oldVal) { |
||||
for (let n in newVal.options) { |
||||
if (newVal.options[n] == "") delete (newVal.options[n]); |
||||
} |
||||
}, |
||||
deep: true |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.insertScript(); |
||||
// this.getData() |
||||
this.preview(this.videoList1[0]); |
||||
this.$once("hook:beforeDestroy", function() { |
||||
clearInterval(this.timer); |
||||
this.timer = null; |
||||
}); |
||||
}, |
||||
methods: { |
||||
// async getData(){ |
||||
// let res = await this.$get(this.api.getCoursevideo, { |
||||
// page: 1, |
||||
// size: 10 |
||||
// }) |
||||
// this.videoList = res.data.list |
||||
// }, |
||||
async toEvaluation(type, btn) { |
||||
clearInterval(this.timer); |
||||
this.lastOne = false; |
||||
this.selected = ""; |
||||
this.resultVisible = false; |
||||
this.history = []; |
||||
if (btn) this.btnType = btn; |
||||
if (type) { |
||||
let res = null; |
||||
if (btn == 2) { |
||||
res = await this.$get(this.api.openExercise, { userId: this.userId }); |
||||
} else { |
||||
res = await this.$get(this.api.openTeaching, { userId: this.userId }); |
||||
} |
||||
if (res.errmessage == "true") { |
||||
if (btn == 2) { |
||||
this.goSubSystem(); |
||||
} |
||||
if (btn == 3) { |
||||
this.$router.push("/project"); |
||||
} |
||||
} else { |
||||
this.$alert("请先完成能力测评并达到60分以上才可以进行实验", "提示", { |
||||
confirmButtonText: "进入测评", |
||||
callback: action => { |
||||
action == "confirm" && this.toEvaluation(0); |
||||
} |
||||
}); |
||||
} |
||||
} else { |
||||
this.start(); |
||||
this.getCountdown(); |
||||
} |
||||
}, |
||||
handleQues() { |
||||
this.question.options = {}; |
||||
for (let n in this.question) { |
||||
if (n.includes("option") && n != "options") { |
||||
this.question.options[n.replace("option", "")] = this.question[n]; |
||||
} |
||||
} |
||||
if (this.question.currentQuestionSortNo == this.question.totalQuestionNum) { |
||||
this.lastOne = true; |
||||
} else { |
||||
this.lastOne = false; |
||||
} |
||||
}, |
||||
async start() { |
||||
let res = await this.$get(this.api.experimentStart, { userId: this.userId, types: this.btnType }); |
||||
if (res.data) { |
||||
this.question = res.data; |
||||
this.isDone = false; |
||||
this.question.currentQuestionSortNo == 1 && this.$store.commit("answerHistoryData", { answerHistory: [] }); |
||||
this.handleQues(); |
||||
this.evaluationVisible = true; |
||||
} else { |
||||
util.warningMsg(res.message); |
||||
} |
||||
}, |
||||
async getCountdown() { |
||||
let res = await this.$get(this.api.experimentRemaining, { userId: this.userId }); |
||||
res.data && this.countDown(res.data); |
||||
// this.countDown('00:00:05') |
||||
}, |
||||
countDown(time) { |
||||
this.countdown = time; |
||||
this.timer = setInterval(() => { |
||||
let timeList = this.countdown.split(":"); |
||||
let total = Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2]); |
||||
if (total > 0) { |
||||
--total; |
||||
let minutes = Math.floor(total / 60); |
||||
let seconds = Math.floor(total % 60); |
||||
this.countdown = `00:${util.formateTime(minutes)}:${util.formateTime(seconds)}`; |
||||
} else { |
||||
this.isDone = true; |
||||
util.warningMsg("测评时间结束"); |
||||
clearInterval(this.timer); |
||||
this.prevQues(); |
||||
} |
||||
}, 1000); |
||||
}, |
||||
selectOption(option) { |
||||
if (!this.isDone) { |
||||
if (this.selected.includes(option)) { |
||||
this.selected = this.selected.replace(option, ""); |
||||
} else { |
||||
if (this.question.questionType == 2) { |
||||
this.selected += option; |
||||
} else { |
||||
this.selected = option; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
getHistory() { |
||||
this.history = this.$store.state.answerHistory; |
||||
}, |
||||
async nextQues() { |
||||
if (!this.selected) return util.warningMsg("请选择答案"); |
||||
this.getHistory(); |
||||
if (this.history.length > this.question.currentQuestionSortNo) { |
||||
this.history[this.question.currentQuestionSortNo - 1] = this.selected; |
||||
} else if (this.history.length < this.question.currentQuestionSortNo) { |
||||
this.history.push(this.selected); |
||||
} |
||||
this.$store.commit("answerHistoryData", { answerHistory: this.history }); |
||||
let res = await this.$post(this.api.experimentNext, { |
||||
id: this.question.id, |
||||
currentQuestionSortNo: this.question.currentQuestionSortNo, |
||||
// userAnswer: this.selected.split('').sort().join(',') |
||||
userAnswer: this.selected |
||||
}); |
||||
if (res.data) { |
||||
this.question = res.data; |
||||
this.selected = ""; |
||||
if (this.history.length >= this.question.currentQuestionSortNo) { |
||||
this.selected = this.history[this.question.currentQuestionSortNo - 1]; |
||||
} else { |
||||
this.selected = ""; |
||||
} |
||||
this.handleQues(); |
||||
} |
||||
}, |
||||
async prevQues() { |
||||
if (this.question.currentQuestionSortNo > 1) { |
||||
this.getHistory(); |
||||
let res = await this.$post(this.api.experimentPrevious, { |
||||
id: this.question.id, |
||||
currentQuestionSortNo: this.question.currentQuestionSortNo, |
||||
// userAnswer: this.selected.split('').sort().join(',') |
||||
userAnswer: this.selected |
||||
}); |
||||
if (res.data) { |
||||
this.question = res.data; |
||||
this.selected = this.history[this.question.currentQuestionSortNo - 1]; |
||||
this.isDone ? this.submitQues() : this.handleQues(); |
||||
} |
||||
} else if (this.isDone) { |
||||
if (!this.selected) this.selected = "A"; |
||||
this.submitQues(); |
||||
} |
||||
}, |
||||
async submitQues() { |
||||
if (!this.selected) return util.warningMsg("请选择答案"); |
||||
let res = await this.$post(this.api.experimentSubmit, { |
||||
id: this.question.id, |
||||
currentQuestionSortNo: this.question.currentQuestionSortNo, |
||||
// userAnswer: this.selected.split('').sort().join(','), |
||||
userAnswer: this.selected, |
||||
userId: this.userId, |
||||
types: this.btnType |
||||
}); |
||||
if (res.data) { |
||||
this.result = res.data; |
||||
this.evaluationVisible = false; |
||||
this.resultVisible = true; |
||||
} |
||||
}, |
||||
async getDetail() { |
||||
let res = await this.$get(this.api.experimentDetail, { |
||||
evaluationRecordId: this.question.id |
||||
}); |
||||
if (res.data) { |
||||
this.totalScore = res.data.totalScore; |
||||
this.detailData = res.data.evaluationDetailVOS; |
||||
this.resultVisible = false; |
||||
this.detailVisible = true; |
||||
} |
||||
}, |
||||
systemChange() { |
||||
this.videoSrc = ""; |
||||
this.preview(this[`videoList${this.systemId}`][0]); |
||||
}, |
||||
preview(row) { |
||||
let url = row.links; |
||||
this.videoSrc = ""; |
||||
this.coverUrl = ""; |
||||
this.pdfSrc = ""; |
||||
this.iframeSrc = ""; |
||||
this.curLink = row.title; |
||||
let ext = util.getFileExt(url); |
||||
if (util.isVideo(ext)) { |
||||
this.videoSrc = url; |
||||
} else if (ext == "pdf") { |
||||
this.pdfSrc = url; |
||||
this.pdfVisible = true; |
||||
} else if (util.isImg(ext)) { |
||||
window.open(url); |
||||
} else if (util.isDoc(ext)) { |
||||
if (ext == "pptx") { |
||||
this.isPPT = true; |
||||
this.isWord = false; |
||||
this.isExcel = false; |
||||
} else if (ext == "doc" || ext == "docx") { |
||||
this.isPPT = false; |
||||
this.isWord = true; |
||||
this.isExcel = false; |
||||
} else if (ext == "xls" || ext == "xlsx") { |
||||
this.isExcel = true; |
||||
this.isPPT = false; |
||||
this.isWord = false; |
||||
} else { |
||||
this.isPPT = false; |
||||
this.isWord = false; |
||||
this.isExcel = false; |
||||
} |
||||
if (this.isPPT) { |
||||
this.showMask = true; |
||||
} else { |
||||
this.showMask = false; |
||||
} |
||||
if (this.isWord) { |
||||
this.showMask1 = true; |
||||
} else { |
||||
this.showMask1 = false; |
||||
} |
||||
if (this.isExcel) { |
||||
this.showMask2 = true; |
||||
} else { |
||||
this.showMask2 = false; |
||||
} |
||||
this.iframeSrc = `https://view.officeapps.live.com/op/view.aspx?src=${url}`; |
||||
} |
||||
}, |
||||
closeIframe() { |
||||
this.iframeSrc = ""; |
||||
this.showMask = false; |
||||
this.showMask1 = false; |
||||
this.showMask2 = false; |
||||
this.curLink = ""; |
||||
}, |
||||
// 插入阿里云播放器脚本 |
||||
insertScript() { |
||||
const linkTag = document.createElement("link"); |
||||
linkTag.id = "aliplayerLink"; |
||||
linkTag.rel = "stylesheet"; |
||||
linkTag.href = "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"; |
||||
document.body.appendChild(linkTag); |
||||
|
||||
const scriptTag = document.createElement("script"); |
||||
scriptTag.id = "aliplayerScript"; |
||||
scriptTag.type = "text/javascript"; |
||||
scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"; |
||||
document.body.appendChild(scriptTag); |
||||
this.$once("hook:beforeDestroy", function() { |
||||
document.body.removeChild(document.querySelector("#aliplayerLink")); |
||||
document.body.removeChild(document.querySelector("#aliplayerScript")); |
||||
}); |
||||
}, |
||||
goSubSystem() { // 进入实训 |
||||
util.cookies.set("assessmentId", "", -1); |
||||
util.cookies.set("studentId", this.studentId); |
||||
util.cookies.set("projectId", "", -1); |
||||
util.cookies.set("startTime", "", -1); |
||||
util.cookies.set("stopTime", "", -1); |
||||
location.href = Setting.defaultSubSystem; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.video_wid { |
||||
width: 100%; |
||||
height: 650px; |
||||
border: 0; |
||||
} |
||||
|
||||
.video_wid:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
.title_view { |
||||
background-color: #2F3236; |
||||
padding: 12px 10px; |
||||
} |
||||
|
||||
h3 { |
||||
color: #9076FF; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.catalog .title_view .el-button { |
||||
padding: 8px 20px; |
||||
} |
||||
|
||||
.btns { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.btns .el-button { |
||||
flex: 1; |
||||
height: 90px; |
||||
font-size: 30px; |
||||
background: transparent url(../../../assets/img/ques1.png) 0 0/100% 100% no-repeat; |
||||
border: 0; |
||||
} |
||||
|
||||
.list_he { |
||||
height: 500px; |
||||
overflow-y: auto; |
||||
padding: 20px 12px; |
||||
background: #3f4449; |
||||
} |
||||
|
||||
.list_he ul { |
||||
padding: 20px 0; |
||||
} |
||||
|
||||
.list_he ul li:first-child { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.list_he ul li { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.list_title { |
||||
color: #9278FF; |
||||
font-size: 20px; |
||||
margin-left: 12px; |
||||
} |
||||
|
||||
.list_catalog { |
||||
padding: 0 8px; |
||||
font-size: 14px; |
||||
margin-top: 15px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.mar0 { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.list_catalog .catalog_button .el-button { |
||||
background-color: #2F3236; |
||||
border: 1px solid rgba(144, 118, 255, 1); |
||||
color: #9278FF; |
||||
padding: 6px 8px; |
||||
} |
||||
|
||||
.experimental_title { |
||||
color: #fff; |
||||
word-wrap: break-word; |
||||
|
||||
&.active { |
||||
color: #9278FF; |
||||
} |
||||
} |
||||
|
||||
.experimental_status { |
||||
margin-right: 10px; |
||||
color: #7A7A7A; |
||||
} |
||||
|
||||
.curriculum_name { |
||||
color: #fff; |
||||
} |
||||
|
||||
.curriculum_name i { |
||||
margin-left: 5px; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.curriculum_status { |
||||
color: #7A7A7A; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog { |
||||
min-height: 700px; |
||||
background: url(../../../assets/img/evaluation_bg1.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .el-dialog__headerbtn, /deep/ .evaluation_dialog .el-dialog__headerbtn, /deep/ .detail_dialog .el-dialog__headerbtn { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .title, /deep/ .detail_dialog .title { |
||||
margin-bottom: 45px; |
||||
text-align: center; |
||||
font-size: 24px |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .title { |
||||
margin-bottom: 55px; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .serial { |
||||
font-size: 12px; |
||||
text-align: center; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .ques-wrap { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .type { |
||||
color: #666; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .ques { |
||||
margin: 20px 0; |
||||
min-height: 145px; |
||||
color: #666; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .countdown { |
||||
margin-bottom: 20px; |
||||
justify-content: center; |
||||
text-align: center; |
||||
color: #DC3434; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .countdown img { |
||||
width: 15px !important; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .options { |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: 340px; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .options.isDone { |
||||
min-height: 395px; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .options li { |
||||
padding: 0 15px; |
||||
margin-bottom: 15px; |
||||
line-height: 40px; |
||||
border: 1px solid #9070FF; |
||||
border-radius: 20px; |
||||
color: #666; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .options li:hover { |
||||
color: #fff; |
||||
background-color: #b038bb; |
||||
border-color: #b038bb; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .options li.active { |
||||
color: #fff; |
||||
background-color: #916CFF; |
||||
border-color: #916CFF; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .options em { |
||||
margin-right: 10px; |
||||
font-weight: bold; |
||||
font-style: normal; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .options span { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .el-dialog__footer { |
||||
text-align: center; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .first, /deep/ .result_dialog .first { |
||||
color: #fff; |
||||
background-color: #9268FF; |
||||
border-color: #9268FF; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .second, /deep/ .result_dialog .second { |
||||
color: #fff; |
||||
background-color: #E371DA; |
||||
border-color: #E371DA; |
||||
} |
||||
|
||||
/deep/ .result_dialog { |
||||
min-height: 500px; |
||||
background: url(../../../assets/img/evaluation_bg2.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
|
||||
/deep/ .result_dialog .el-dialog__headerbtn .el-dialog__close { |
||||
color: #5a5a5a; |
||||
font-size: 28px; |
||||
} |
||||
|
||||
/deep/ .result_dialog .result { |
||||
margin-top: 60px; |
||||
text-align: center; |
||||
color: #fff; |
||||
font-size: 24px; |
||||
} |
||||
|
||||
/deep/ .result_dialog .point { |
||||
margin: 30px 0 20px; |
||||
text-align: center; |
||||
font-size: 30px; |
||||
color: #666; |
||||
} |
||||
|
||||
/deep/ .result_dialog .point span { |
||||
font-size: 120px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/deep/ .result_dialog .tips { |
||||
color: #666; |
||||
text-align: center; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
/deep/ .result_dialog .third { |
||||
color: #fff; |
||||
background-color: #418cf5; |
||||
border-color: #418cf5; |
||||
} |
||||
|
||||
/deep/ .detail_dialog { |
||||
background: url(../../../assets/img/evaluation_bg3.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
|
||||
/deep/ .detail_dialog .title { |
||||
margin-top: -20px; |
||||
} |
||||
|
||||
/deep/ .detail_dialog .el-table__header th:nth-last-child(2) { |
||||
text-align: center; |
||||
} |
||||
|
||||
/deep/ .detail_dialog .total { |
||||
margin-top: 20px; |
||||
text-align: center; |
||||
font-size: 30px; |
||||
color: #DC3434; |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog { |
||||
margin: 0 !important; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
max-height: calc(100% - 30px); |
||||
max-width: calc(100% - 30px); |
||||
} |
||||
|
||||
/deep/ .evaluation_dialog .el-dialog__body { |
||||
flex: 1; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.mask { |
||||
z-index: 9; |
||||
position: absolute; |
||||
background-color: rgb(57, 58, 61); |
||||
} |
||||
|
||||
.word-mask { |
||||
z-index: 9; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
background-color: rgb(243, 242, 241); |
||||
} |
||||
|
||||
.word-mask1 { |
||||
z-index: 9; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
background-color: #185abd; |
||||
} |
||||
|
||||
.word-mask2 { |
||||
z-index: 9; |
||||
position: absolute; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.excel-mask1 { |
||||
z-index: 9; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 20%; |
||||
width: 60%; |
||||
background-color: #107c41; |
||||
} |
||||
|
||||
$height: 650px; |
||||
.cover { |
||||
position: relative; |
||||
height: $height; |
||||
border: 0; |
||||
|
||||
.fileIframe { |
||||
width: 100%; |
||||
height: $height !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,23 +0,0 @@ |
||||
import BasicLayout from "@/layouts/home"; |
||||
|
||||
const meta = {}; |
||||
|
||||
const pre = "preview-"; |
||||
|
||||
export default { |
||||
path: "/preview", |
||||
name: "preview", |
||||
redirect: { |
||||
name: `${pre}list` |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name: `${pre}list`, |
||||
path: `list`, |
||||
component: () => import("@/pages/preview/list"), |
||||
meta: { title: "课前预习" } |
||||
} |
||||
] |
||||
}; |
||||
Loading…
Reference in new issue