master
parent
ef8522d1e1
commit
707e739922
24 changed files with 958 additions and 623 deletions
@ -0,0 +1,124 @@ |
||||
<template> |
||||
<div> |
||||
<el-dialog |
||||
custom-class="pdf-dia" |
||||
:close-on-click-modal="false" |
||||
:visible.sync="visible" |
||||
@close="closePdf" |
||||
:fullscreen="true" |
||||
:modal="false" |
||||
:append-to-body="true"> |
||||
<div> |
||||
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closePdf"><i class="el-dialog__close el-icon el-icon-close"></i></button> |
||||
<div class="pdf"> |
||||
<p class="arrow"> |
||||
<span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span> |
||||
{{currentPage}} / {{pageCount}} |
||||
<span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span> |
||||
</p> |
||||
<pdf |
||||
class="pdf-wrap" |
||||
:src="src" |
||||
:page="currentPage" |
||||
@num-pages="pageCount=$event" |
||||
@page-loaded="currentPage=$event" |
||||
@loaded="loadPdfHandler" |
||||
> |
||||
</pdf> |
||||
</div> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import pdf from "vue-pdf"; |
||||
export default { |
||||
props: ['visible','src'], |
||||
data() { |
||||
return { |
||||
pdfVisible: false, |
||||
pdfSrc: '', |
||||
currentPage: 0, |
||||
pageCount: 0, |
||||
fileType: 'pdf', |
||||
}; |
||||
}, |
||||
components: { pdf }, |
||||
mounted(){ |
||||
this.addEvent() |
||||
}, |
||||
methods: { |
||||
closePdf(){ |
||||
this.$emit('update:visible',false) |
||||
this.$emit('update:src','') |
||||
this.currentPage = 1 |
||||
}, |
||||
changePdfPage (val) { |
||||
if (val === 0 && this.currentPage > 1) { |
||||
this.currentPage-- |
||||
} |
||||
if (val === 1 && this.currentPage < this.pageCount) { |
||||
this.currentPage++ |
||||
} |
||||
}, |
||||
loadPdfHandler (e) { |
||||
this.currentPage = 1 |
||||
}, |
||||
addEvent(){ |
||||
document.onkeydown = e => { |
||||
let key = window.event.keyCode |
||||
if(key == 37){ |
||||
this.changePdfPage(0) |
||||
}else if(key == 39){ |
||||
this.changePdfPage(1) |
||||
} |
||||
} |
||||
this.$once('hook:beforeDestroy',() => { |
||||
document.onkeydown = null |
||||
}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
/deep/.pdf-dia{ |
||||
border-radius: 0 !important; |
||||
.el-dialog__header{ |
||||
display: none; |
||||
} |
||||
.el-dialog__body{ |
||||
padding: 0; |
||||
} |
||||
.el-dialog__headerbtn{ |
||||
top: 10px; |
||||
.el-dialog__close{ |
||||
color: #fff; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
.pdf{ |
||||
.arrow{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
padding: 10px 0; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
background-color: #333; |
||||
.turn{ |
||||
margin: 0 10px; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.pdf-wrap{ |
||||
height: calc(100vh - 45px); |
||||
margin: 0 auto; |
||||
overflow: auto; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,70 @@ |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
playAuth: '', |
||||
player: null, |
||||
iframeSrc: '', |
||||
pdfVisible: false, |
||||
pdfSrc: '' |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.insertScript() |
||||
}, |
||||
methods: { |
||||
preview(row){ |
||||
let ext = row.fileurl.substring(row.fileurl.lastIndexOf('.') + 1) |
||||
console.log(11,row.fileurl,row.fileurl.lastIndexOf('.'),ext) |
||||
if(row.videoAudio){ |
||||
this.$get(`${this.api.getPlayAuth}/${row.fileurl}`).then(res => { |
||||
this.playAuth = res.data.playAuth |
||||
if(this.player){ |
||||
this.player.replayByVidAndPlayAuth(row.fileurl,this.playAuth) |
||||
}else{ |
||||
console.log(11,row,res.data.playAuth) |
||||
this.player = new Aliplayer({ |
||||
id: 'player', |
||||
width: '100%', |
||||
autoplay: false, |
||||
vid : row.fileurl, |
||||
playauth : this.playAuth, |
||||
encryptType:1, //当播放私有加密流时需要设置。
|
||||
}) |
||||
} |
||||
}).catch(res => {}) |
||||
}else if(ext == 'pdf'){ |
||||
this.pdfSrc = row.fileurl |
||||
this.pdfVisible = true |
||||
}else if(util.isDoc(ext)){ |
||||
window.open(`https://view.officeapps.live.com/op/view.aspx?src=${row.fileurl}`) |
||||
}else if(util.isImg(ext)){ |
||||
window.open(row.fileurl) |
||||
} |
||||
}, |
||||
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')) |
||||
}) |
||||
}, |
||||
closePlayer(){ |
||||
this.playAuth = '' |
||||
this.player.pause() |
||||
}, |
||||
download(row){ |
||||
window.open(row.fileurl) |
||||
} |
||||
} |
||||
} |
||||
@ -1,291 +0,0 @@ |
||||
<template> |
||||
<div class="box"> |
||||
<h1 class="title">{{paperName }}</h1> |
||||
<div class="metas"> |
||||
<div class="m-r-20"> |
||||
<span class="name">总分：</span> |
||||
<span class="val">100分</span> |
||||
</div> |
||||
<div class="m-r-20" v-if="thisScore != null"> |
||||
<span class="name">得分：</span> |
||||
<span class="val">{{thisScore}}分</span> |
||||
</div> |
||||
<div class="m-r-20"> |
||||
<span class="name">考试时长：</span> |
||||
<span class="val">{{time}}分钟</span> |
||||
</div> |
||||
<div> |
||||
<span class="name">排名：</span> |
||||
<span class="val">{{ranking === 0 ? 1 : ranking}}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="tab"> |
||||
<template v-for="(item,index) in tabs"> |
||||
<li v-if="item.show" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="wrap"> |
||||
<div class="item" v-for="(item,index) in curType" :key="index"> |
||||
<div class="answer"> |
||||
<div class="info"> |
||||
<p class="key">序号：</p> |
||||
<p class="val">{{index+1}}</p> |
||||
</div> |
||||
<div class="info"> |
||||
<p class="key">得分：</p> |
||||
<p class="val">{{item.question_score}}</p> |
||||
</div> |
||||
</div> |
||||
<div class="meta"> |
||||
<p class="key">题干：</p> |
||||
<p class="val" v-html="item.question_stem"></p> |
||||
</div> |
||||
<div class="meta"> |
||||
<p class="key">选项：</p> |
||||
<div class="val"> |
||||
<p v-for="(option,i) in item.options" :key="i">{{i}}.{{item.options[i]}}</p> |
||||
</div> |
||||
</div> |
||||
<div class="meta ans"> |
||||
<div class="info"> |
||||
<p class="key">正确答案：</p> |
||||
<p class="val">{{item.answer}}</p> |
||||
</div> |
||||
<div class="info"> |
||||
<p class="key">学生答案：</p> |
||||
<p class="val">{{item.user_answer}}</p> |
||||
</div> |
||||
</div> |
||||
<div class="meta"> |
||||
<p class="key">答案解析：</p> |
||||
<p class="val" v-html="item.answer_analysis"></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import mixins from '@/mixins/setBackground' |
||||
import { mapState } from 'vuex' |
||||
export default { |
||||
mixins: [ mixins ], |
||||
data() { |
||||
return { |
||||
paperName: '', |
||||
time: 0, |
||||
ranking: 1, |
||||
selectVisible: false, |
||||
tabs: [ |
||||
{ |
||||
id: 1, |
||||
name: '单选题', |
||||
show: false |
||||
},{ |
||||
id: 2, |
||||
name: '多选题', |
||||
show: false |
||||
},{ |
||||
id: 3, |
||||
name: '判断题', |
||||
show: false |
||||
},{ |
||||
id: 4, |
||||
name: '简答题', |
||||
show: false |
||||
},{ |
||||
id: 5, |
||||
name: '填空题', |
||||
show: false |
||||
} |
||||
], |
||||
active: 1, |
||||
curType: [] |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'userId' |
||||
]), |
||||
...mapState('achievement', [ |
||||
'id','assessmentId','stuId','thisScore' |
||||
]) |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(`${this.api.answerDetail}?userId=${this.stuId}&assessmentId=${this.assessmentId}&paperId=${this.id}`) |
||||
.then(res => { |
||||
this.paperName = res.paperName |
||||
this.time = res.time |
||||
this.ranking = res.ranking |
||||
this.allData = res.data |
||||
let tabs = this.tabs |
||||
res.data.list1.length && (tabs[0].show = true) |
||||
res.data.list2.length && (tabs[1].show = true) |
||||
res.data.list3.length && (tabs[2].show = true) |
||||
res.data.list4.length && (tabs[3].show = true) |
||||
res.data.list5.length && (tabs[4].show = true) |
||||
for(let n of tabs){ |
||||
if(n.show){ |
||||
this.active = n.id |
||||
this.curType = this.allData[`list${n.id}`] |
||||
break |
||||
} |
||||
} |
||||
this.handleOptions() |
||||
}) |
||||
.catch(err => {}) |
||||
}, |
||||
tabChange(id){ |
||||
this.active = id |
||||
this.curType = this.allData[`list${id}`] |
||||
this.handleOptions() |
||||
}, |
||||
handleOptions(){ |
||||
let curType = this.curType |
||||
curType.forEach(n => { |
||||
if(!n.options){ |
||||
let options = {} |
||||
let answer = [] |
||||
for(let i in n){ |
||||
if(i.includes('option') && n[i]){ |
||||
options[i.replace('option_','')] = n[i] |
||||
if(n.typeName == '填空题') answer.push(n[i]) |
||||
} |
||||
} |
||||
if(n.typeName == '填空题') n.answer = answer.join('|') |
||||
n.options = options |
||||
} |
||||
}) |
||||
this.curType = curType |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.box{ |
||||
width: 90%; |
||||
margin: 0 auto; |
||||
} |
||||
.title{ |
||||
text-align: center; |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
} |
||||
.metas{ |
||||
display: flex; |
||||
justify-content: center; |
||||
margin: 20px 0 30px; |
||||
.name{ |
||||
font-size: 12px; |
||||
color: #717171; |
||||
} |
||||
.val{ |
||||
font-size: 12px; |
||||
color: #929292; |
||||
} |
||||
} |
||||
.tab{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 10px; |
||||
li{ |
||||
position: relative; |
||||
padding: 0 44px; |
||||
margin-right: 7px; |
||||
font-size: 13px; |
||||
line-height: 46px; |
||||
text-align: center; |
||||
color: #444; |
||||
border: 1px solid #ececec; |
||||
cursor: pointer; |
||||
&:hover{ |
||||
opacity: .8; |
||||
} |
||||
&.active:after{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 4px; |
||||
background-color: $main-color; |
||||
} |
||||
} |
||||
} |
||||
.wrap{ |
||||
.item{ |
||||
padding-bottom: 30px; |
||||
margin-bottom: 30px; |
||||
border-bottom: 1px dashed #f4f4f4; |
||||
|
||||
.key{ |
||||
font-weight: bold; |
||||
color: #333; |
||||
font-size: 14px; |
||||
} |
||||
.val{ |
||||
color: #757575; |
||||
font-size: 14px; |
||||
} |
||||
.answer{ |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 15px; |
||||
margin: 15px 0; |
||||
font-size: 12px; |
||||
border: 1px solid #e8e8e8; |
||||
background-color: #f3f2f2; |
||||
.info{ |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin-right: 30px; |
||||
} |
||||
} |
||||
.meta{ |
||||
padding-left: 10px; |
||||
margin: 20px 0; |
||||
font-size: 12px; |
||||
&.ans{ |
||||
display: flex; |
||||
.info{ |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
.key{ |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.btns{ |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 20px; |
||||
button{ |
||||
height: 30px; |
||||
padding: 0 30px; |
||||
margin: 0 15px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
line-height: 30px; |
||||
background-color: #fff; |
||||
border: 1px solid #ededed; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
&.submit{ |
||||
color: #fff; |
||||
background-color: $main-color; |
||||
border-color: $main-color; |
||||
} |
||||
&:hover{ |
||||
opacity: .8; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,343 @@ |
||||
<template> |
||||
<div class="box"> |
||||
<h1 class="title">{{paperName}}</h1> |
||||
<div class="metas"> |
||||
<div> |
||||
<span class="name">学生姓名：</span> |
||||
<span class="val">{{userName}}</span> |
||||
</div> |
||||
<div> |
||||
<span class="name">学生得分：</span> |
||||
<span class="val">{{(reviewStatus == 2 || reviewStatus == 3) ? this_score : '--'}}</span> |
||||
</div> |
||||
<div> |
||||
<span class="name">试卷总分：</span> |
||||
<span class="val">100</span> |
||||
</div> |
||||
<div> |
||||
<span class="name">练习时长：</span> |
||||
<span class="val">{{duration}}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="wrap"> |
||||
<div class="select"> |
||||
<el-radio v-model="look" label="1">查看全部</el-radio> |
||||
<el-radio v-model="look" label="2" v-if="reviewStatus == 2 || reviewStatus == 3">只看错题</el-radio> |
||||
</div> |
||||
|
||||
<div class="item" v-for="(item,index) in list" :key="index"> |
||||
<div class="status" :class="{done: item.isCorrecting}">{{item.isSub ? '简答题' : '客观题'}}：{{getCorrectingName(item.isCorrecting)}}</div> |
||||
<div class="name" v-html="item.question_stem"></div> |
||||
<div class="answer"> |
||||
<div class="info" v-if="!item.isSub"> |
||||
<p class="key">正确答案：</p> |
||||
<p class="val">{{item.answer}}</p> |
||||
</div> |
||||
<div class="info"> |
||||
<p class="key">学生答案：</p> |
||||
<p class="val">{{item.user_answer}}</p> |
||||
</div> |
||||
</div> |
||||
<div class="meta"> |
||||
<span class="key">知识点：</span> |
||||
<span class="val">{{item.knowledge_points}}</span> |
||||
</div> |
||||
<div class="meta" v-if="item.isSub"> |
||||
<p class="key">附件：</p> |
||||
<div class="val"> |
||||
<el-button v-if="item.fileUrl || item.videoAudio" type="text" @click="preview(item)">{{item.fileName}}</el-button> |
||||
<el-button v-if="item.fileUrl" type="primary" size="mini" @click="download(item)">下载</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="meta"> |
||||
<span class="key">答案解析：</span> |
||||
<span class="val">{{item.answer_analysis}}</span> |
||||
</div> |
||||
<div class="flex a-center point"> |
||||
<div class="meta"> |
||||
<span class="key">题目分数：</span> |
||||
<div class="val">{{item.question_points}} 分</div> |
||||
</div> |
||||
<div class="meta"> |
||||
<span class="key">考试得分：</span> |
||||
<div class="val"> |
||||
<input type="text" v-model.number="item.question_score" :disabled="!isReview || !item.isSub"> 分 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="btns" v-if="isReview"> |
||||
<button type="button" class="submit" @click="save(1)">提交</button> |
||||
<button type="button" @click="save(0)">保存</button> |
||||
</div> |
||||
|
||||
<div v-show="playAuth" class="el-image-viewer__wrapper" :class="{active: playAuth}" style="z-index: 2000"> |
||||
<div class="el-image-viewer__mask"></div> |
||||
<span class="el-image-viewer__btn el-image-viewer__close" @click="closePlayer"><i class="el-icon-circle-close" style="color: #fff"></i></span> |
||||
<div class="player" id="player"></div> |
||||
</div> |
||||
<pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import setBackground from '@/mixins/setBackground' |
||||
import file from '@/mixins/file' |
||||
import { mapState,mapGetters,mapActions } from 'vuex' |
||||
import pdf from '@/components/pdf' |
||||
export default { |
||||
mixins: [ setBackground,file ], |
||||
data() { |
||||
return { |
||||
paperName: '', |
||||
userName: '', |
||||
this_score: '', |
||||
duration: '', |
||||
list: [], |
||||
look: '1', |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'userId','clientId' |
||||
]), |
||||
...mapState('assessment', [ |
||||
'reviewId','paperId','isReview','reviewStatus','stuId' |
||||
]), |
||||
...mapGetters('assessment', [ |
||||
'getCorrectingName' |
||||
]) |
||||
}, |
||||
watch: { |
||||
look(val,oldVal){ |
||||
val == 1 ? this.getData() : this.getWrong() |
||||
} |
||||
}, |
||||
components: { pdf }, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(`${this.api.correcting}?assessmentId=${this.reviewId}&userId=${this.stuId}&paperId=${this.paperId}`) |
||||
.then(res => { |
||||
let list = res.data.list |
||||
list.map(n => { |
||||
n.isCorrecting == 0 && (n.question_score = '') |
||||
n.isSub = n.typeName == '简答题' |
||||
if(n.typeName == '填空题'){ |
||||
let answer = [] |
||||
for(let i in n){ |
||||
if(i.includes('option_')) answer.push(n[i]) |
||||
} |
||||
n.answer = answer.join('|') |
||||
n.user_answer = n.user_answer.replace(/<>/g,'|') |
||||
} |
||||
if(n.fileUrl){ |
||||
let file = n.fileUrl.split(',') |
||||
n.fileName = file[0] |
||||
n.fileurl = file[1] |
||||
} |
||||
if(n.videoAudio){ |
||||
let file = n.videoAudio.split(',') |
||||
n.fileName = file[0] |
||||
n.fileurl = file[1] |
||||
} |
||||
}) |
||||
this.list = list |
||||
this.paperName = list[0].name |
||||
this.userName = list[0].userName |
||||
this.this_score = list[0].this_score |
||||
this.duration = list[0].duration |
||||
}) |
||||
.catch(err => {}) |
||||
}, |
||||
getWrong(){ |
||||
this.$post(`${this.api.getWrong}?assessmentId=${this.reviewId}&userId=${this.stuId}&paperId=${this.paperId}`) |
||||
.then(res => { |
||||
let list = res.data.list |
||||
list.map(n => { |
||||
n.isCorrecting == 0 && (n.question_score = '') |
||||
n.isSub = n.typeName == '简答题' |
||||
if(n.typeName == '填空题'){ |
||||
let answer = [] |
||||
for(let i in n){ |
||||
if(i.includes('option_')) answer.push(n[i]) |
||||
} |
||||
n.answer = answer.join('|') |
||||
n.user_answer = n.user_answer.replace(/<>/g,'|') |
||||
} |
||||
if(n.fileUrl){ |
||||
let file = n.fileUrl.split(',') |
||||
n.fileName = file[0] |
||||
n.fileurl = file[1] |
||||
} |
||||
if(n.videoAudio){ |
||||
let file = n.videoAudio.split(',') |
||||
n.fileName = file[0] |
||||
n.fileurl = file[1] |
||||
} |
||||
}) |
||||
this.list = list |
||||
}).catch(err => {}) |
||||
}, |
||||
save(status) { |
||||
let isEmpty = false |
||||
let isNotNum = false |
||||
let invalid = false |
||||
this.list.map(n => { |
||||
if(n.question_score === '') isEmpty = true |
||||
if(isNaN(n.question_score)) isNotNum = true |
||||
if(Number(n.question_score) > Number(n.question_points)) invalid = true |
||||
}) |
||||
if(status){ |
||||
if(isEmpty) return this.$message.warning('请批阅完所有题目') |
||||
if(isNotNum) return this.$message.warning('考试得分请输入数字') |
||||
} |
||||
if(invalid) return this.$message.warning('考试得分不得大于题目分数') |
||||
let data = { |
||||
review: [], |
||||
assessmentId: this.reviewId, |
||||
userId: this.stuId, |
||||
paperId: this.paperId, |
||||
teacherId: this.userId, |
||||
} |
||||
let totalScore = 0 |
||||
this.list.map(n => { |
||||
n.question_score !== '' && n.isSub && data.review.push({ |
||||
detailId: Number(n.detailId) , |
||||
score: Number(n.question_score) |
||||
}) |
||||
totalScore += Number(n.question_score) |
||||
}) |
||||
if(!data.review.length) return this.$message.warning('请至少批阅一道题目') |
||||
|
||||
if(status || this.list.filter(n => n.isSub).length == data.review.length){ |
||||
data.totalScore = totalScore |
||||
} |
||||
this.$post(this.api.reviewByid,data).then(res => { |
||||
this.$message.success(status ? '提交成功' : '保存成功') |
||||
this.$router.back() |
||||
}).catch(err => {}) |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.title{ |
||||
text-align: center; |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
} |
||||
.metas{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 20px 0 30px; |
||||
.name{ |
||||
font-size: 12px; |
||||
color: #717171; |
||||
} |
||||
.val{ |
||||
font-size: 12px; |
||||
color: #929292; |
||||
} |
||||
} |
||||
.wrap{ |
||||
padding: 20px; |
||||
background-color: #fbfbfb; |
||||
|
||||
.select{ |
||||
padding: 10px; |
||||
margin-bottom: 20px; |
||||
border-bottom: 1px solid #f4f4f4; |
||||
} |
||||
|
||||
.item{ |
||||
padding-bottom: 30px; |
||||
margin-bottom: 30px; |
||||
border-bottom: 1px dashed #d2d2d2; |
||||
&:last-child{ |
||||
border-bottom: 0; |
||||
} |
||||
|
||||
.status{ |
||||
color: #cb221c; |
||||
&.done{ |
||||
color: #56d5bf; |
||||
} |
||||
} |
||||
.name{ |
||||
margin-top: 15px; |
||||
font-size: 14px; |
||||
color: #555555; |
||||
} |
||||
.key{ |
||||
font-weight: bold; |
||||
color: #333; |
||||
} |
||||
.val{ |
||||
color: #757575; |
||||
} |
||||
.answer{ |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 15px; |
||||
margin: 15px 0; |
||||
font-size: 12px; |
||||
border: 1px solid #e8e8e8; |
||||
background-color: #f3f2f2; |
||||
.info{ |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin-right: 30px; |
||||
} |
||||
} |
||||
.meta{ |
||||
display: flex; |
||||
align-items: center; |
||||
padding-left: 10px; |
||||
margin: 10px 0; |
||||
font-size: 12px; |
||||
.key{ |
||||
width: 80px; |
||||
margin-right: 10px; |
||||
text-align: right; |
||||
white-space: nowrap; |
||||
} |
||||
input{ |
||||
width: 60px; |
||||
height: 28px; |
||||
padding: 0 5px; |
||||
margin-right: 5px; |
||||
color: #444; |
||||
background-color: #fff; |
||||
border: 1px solid #ebebeb; |
||||
box-sizing: border-box; |
||||
&:focus{ |
||||
outline: none; |
||||
} |
||||
&:disabled{ |
||||
background-color: #e8e8e8; |
||||
cursor: not-allowed; |
||||
} |
||||
} |
||||
} |
||||
.point{ |
||||
.meta{ |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.player{ |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%,-50%); |
||||
width: 1200px !important; |
||||
height: 600px !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue