|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<div class="panel"> |
|
|
|
|
<el-container class="scrollbar" v-if="pannelVisible"> |
|
|
|
|
<el-header> |
|
|
|
|
<div class="flex between"> |
|
|
|
|
@ -35,19 +35,19 @@ |
|
|
|
|
<div class="countDownBox"> |
|
|
|
|
<div> |
|
|
|
|
总得分： |
|
|
|
|
<span class="gradeSpan">{{grade}}</span> |
|
|
|
|
<span class="total-score">{{grade}}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<el-button class="reload" @click="reload" v-show="projectPermissions == 0">重新开始</el-button> |
|
|
|
|
<el-button class="submit" @click="confirmSubmit" :disabled="isSubmit">提交</el-button> |
|
|
|
|
<el-button type="primary" class="submit btn" @click="confirmSubmit" :disabled="isSubmit">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-header> |
|
|
|
|
<el-container> |
|
|
|
|
<el-aside width="30%"> |
|
|
|
|
<div class="aside-header"> |
|
|
|
|
<div class="header_h flex"> |
|
|
|
|
<div class="p-title color"> |
|
|
|
|
<i class="el-icon-s-order"></i> |
|
|
|
|
<p>实验目标</p> |
|
|
|
|
</div> |
|
|
|
|
@ -58,7 +58,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="aside-footer"> |
|
|
|
|
<div class="header_h flex"> |
|
|
|
|
<div class="p-title color"> |
|
|
|
|
<i class="el-icon-s-management"></i> |
|
|
|
|
<p>实验任务</p> |
|
|
|
|
</div> |
|
|
|
|
@ -105,9 +105,9 @@ |
|
|
|
|
<el-collapse-item v-for="(loop, index) in points" :key="index"> |
|
|
|
|
<template slot="title"> |
|
|
|
|
<i class="el-icon-s-ticket"></i> |
|
|
|
|
<div class="break-all" v-html="loop.experimentalRequirements"></div> |
|
|
|
|
<div class="break-all" v-html="loop.name"></div> |
|
|
|
|
</template> |
|
|
|
|
<div class="break-all" v-html="loop.expserimentalRequirements"></div> |
|
|
|
|
<div class="break-all" v-html="loop.experimentalRequirements"></div> |
|
|
|
|
</el-collapse-item> |
|
|
|
|
</el-collapse> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
@ -119,12 +119,10 @@ |
|
|
|
|
</el-container> |
|
|
|
|
</el-container> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
:style="pannelVisible ? {position: 'fixed', left: '85%',top:'50%'} : {position: 'fixed',top:'50%'}" |
|
|
|
|
> |
|
|
|
|
<div :class="['toggle-panel', {active: pannelVisible}]"> |
|
|
|
|
<div @click="togglePannel"> |
|
|
|
|
<img :src="require(`@/assets/images/system/${systemId}/left.png`)" alt class="left-btn" v-if="pannelVisible" /> |
|
|
|
|
<img :src="require(`@/assets/images/system/${systemId}/right.png`)" alt class="right-btn" v-if="!pannelVisible" /> |
|
|
|
|
<img :src="require(`@/assets/images/system/${systemId}/left.png`)" alt class="c-p" v-if="pannelVisible" /> |
|
|
|
|
<img :src="require(`@/assets/images/system/${systemId}/right.png`)" alt class="c-p" v-if="!pannelVisible" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -191,7 +189,8 @@ export default { |
|
|
|
|
// 获取项目列表 |
|
|
|
|
getList(){ |
|
|
|
|
let data = { |
|
|
|
|
systemId: this.systemId, |
|
|
|
|
// systemId: this.systemId, |
|
|
|
|
systemId: 1, |
|
|
|
|
cId: this.courseId, // 课程id |
|
|
|
|
permissions: this.projectPermissions // 练习/考核 |
|
|
|
|
} |
|
|
|
|
@ -488,21 +487,6 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.break-all{ |
|
|
|
|
word-break: break-all; |
|
|
|
|
} |
|
|
|
|
.left-btn { |
|
|
|
|
height: 150px; |
|
|
|
|
width: 35px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
display: block !important; |
|
|
|
|
} |
|
|
|
|
.right-btn { |
|
|
|
|
height: 150px; |
|
|
|
|
width: 35px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
display: block !important; |
|
|
|
|
} |
|
|
|
|
.el-main { |
|
|
|
|
width: 60%; |
|
|
|
|
background-color: #fff; |
|
|
|
|
@ -512,7 +496,16 @@ export default { |
|
|
|
|
margin: 0px 20px 10px 10px; |
|
|
|
|
white-space: pre-wrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.toggle-panel { |
|
|
|
|
position: fixed; |
|
|
|
|
top: 50%; |
|
|
|
|
&.active { |
|
|
|
|
left: 85%; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
height: 150px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
::v-deep .el-collapse-item__wrap { |
|
|
|
|
border-bottom: none; |
|
|
|
|
} |
|
|
|
|
@ -523,20 +516,18 @@ export default { |
|
|
|
|
margin: 0 20px; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-icon-s-ticket:before { |
|
|
|
|
font-size: 16px; |
|
|
|
|
padding: 5px; |
|
|
|
|
color: #fdca17; |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-collapse-item__arrow { |
|
|
|
|
margin: 0 5px 0 0; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-icon-arrow-right:before { |
|
|
|
|
font-size: 12px; |
|
|
|
|
padding: 1px; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
background-color: #fdca17; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #fff; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-tabs__item { |
|
|
|
|
font-size: 16px; |
|
|
|
|
@ -557,9 +548,8 @@ export default { |
|
|
|
|
overflow: hidden; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-tabs__item.is-active { |
|
|
|
|
color: #333; |
|
|
|
|
background-color: #fdca17; |
|
|
|
|
/deep/.el-tabs__item.is-active { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-tabs__header { |
|
|
|
|
padding: 5px 20px; |
|
|
|
|
@ -580,17 +570,20 @@ export default { |
|
|
|
|
margin: 0px 10px 10px 10px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
.header_h { |
|
|
|
|
height: 40px; |
|
|
|
|
background-color: #fdca17; |
|
|
|
|
.p-title { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
height: 40px; |
|
|
|
|
p { |
|
|
|
|
padding-left: 10px; |
|
|
|
|
line-height: 40px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
i { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.header_h p { |
|
|
|
|
line-height: 40px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
padding-left: 10px; |
|
|
|
|
} |
|
|
|
|
//表格 |
|
|
|
|
::v-deep .el-card__body { |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
@ -609,28 +602,14 @@ export default { |
|
|
|
|
color: #ffffff; |
|
|
|
|
font-size: 10px; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-table th, |
|
|
|
|
.el-table tr { |
|
|
|
|
background-color: #202020; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-table { |
|
|
|
|
/deep/.el-table { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #202020; |
|
|
|
|
} |
|
|
|
|
.el-header { |
|
|
|
|
padding: 0 12px; |
|
|
|
|
.submit { |
|
|
|
|
margin: 5px 7px 5px 5px; |
|
|
|
|
background-color: #fdca17; |
|
|
|
|
color: #202020; |
|
|
|
|
border: none; |
|
|
|
|
font-size: 16px; |
|
|
|
|
&:hover, |
|
|
|
|
&:focus, |
|
|
|
|
&:active { |
|
|
|
|
background-color: #fdca17; |
|
|
|
|
color: #202020; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.reload { |
|
|
|
|
color: #d0d0d0; |
|
|
|
|
@ -641,53 +620,47 @@ export default { |
|
|
|
|
.between { |
|
|
|
|
justify-content: space-between; |
|
|
|
|
} |
|
|
|
|
//字体样式 |
|
|
|
|
.font_css { |
|
|
|
|
margin: 0 10px; |
|
|
|
|
text-indent: 2em; |
|
|
|
|
font-size: 14px; |
|
|
|
|
padding: 10px 0; |
|
|
|
|
} |
|
|
|
|
//改变placeholder的样式 |
|
|
|
|
.select ::v-deep input::-webkit-input-placeholder { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
.select ::v-deep input::-moz-input-placeholder { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
.select ::v-deep input::-ms-input-placeholder { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
//下拉框的icon |
|
|
|
|
.select ::v-deep .el-input__icon { |
|
|
|
|
line-height: 60px; |
|
|
|
|
} |
|
|
|
|
//下拉框 |
|
|
|
|
.select ::v-deep .el-select__caret:before { |
|
|
|
|
content: "\e78f"; |
|
|
|
|
font-size: 16px; |
|
|
|
|
padding: 3px; |
|
|
|
|
background-color: #fdca17; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
.select ::v-deep .el-input--suffix .el-input__inner { |
|
|
|
|
color: #333; |
|
|
|
|
font-size: 14px; |
|
|
|
|
border-radius: 30px; |
|
|
|
|
border: none; |
|
|
|
|
background-color: #fff; |
|
|
|
|
margin-left: 15px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
// white-space: pre-line; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.select ::v-deep .el-input { |
|
|
|
|
padding: 10px 0; |
|
|
|
|
/deep/.select { |
|
|
|
|
.el-select__caret:before { |
|
|
|
|
content: "\e78f"; |
|
|
|
|
padding: 3px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #fff; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
.el-input__icon { |
|
|
|
|
line-height: 60px; |
|
|
|
|
} |
|
|
|
|
.el-input { |
|
|
|
|
padding: 10px 0; |
|
|
|
|
} |
|
|
|
|
input::-webkit-input-placeholder { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
input::-moz-input-placeholder { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
input::-ms-input-placeholder { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
.el-input--suffix .el-input__inner { |
|
|
|
|
color: #333; |
|
|
|
|
font-size: 14px; |
|
|
|
|
border-radius: 30px; |
|
|
|
|
border: none; |
|
|
|
|
background-color: #fff; |
|
|
|
|
margin-left: 15px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
//实训时间、得分 |
|
|
|
|
.countDownBox { |
|
|
|
|
font-size: 16px; |
|
|
|
|
margin: 0 10px; |
|
|
|
|
@ -702,29 +675,24 @@ export default { |
|
|
|
|
margin: 0 5px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.gradeSpan { |
|
|
|
|
color: #ffffff; |
|
|
|
|
.total-score { |
|
|
|
|
padding: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
background: #000000; |
|
|
|
|
border-radius: 6px; |
|
|
|
|
text-align: center; |
|
|
|
|
border-radius: 6px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//公共类 |
|
|
|
|
::v-deep .el-container { |
|
|
|
|
/deep/.el-container { |
|
|
|
|
height: 80%; |
|
|
|
|
&.is-vertical { |
|
|
|
|
background-color: #f5f5f5; |
|
|
|
|
width: 85%; |
|
|
|
|
height: 70%; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 200px; |
|
|
|
|
bottom: 20px; |
|
|
|
|
left: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.el-container.is-vertical { |
|
|
|
|
background-color: #f5f5f5; |
|
|
|
|
width: 85%; |
|
|
|
|
height: 70%; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 200px; |
|
|
|
|
bottom: 20px; |
|
|
|
|
left: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.flex { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
jialong.yu
3 years ago