parent
3668825847
commit
89a1a63f71
12 changed files with 1141 additions and 286 deletions
|
After Width: | Height: | Size: 593 B |
|
After Width: | Height: | Size: 766 B |
|
After Width: | Height: | Size: 545 B |
|
After Width: | Height: | Size: 545 B |
|
After Width: | Height: | Size: 768 B |
@ -0,0 +1,50 @@ |
||||
export default { |
||||
difficults: [ |
||||
{ |
||||
id: 'basic', |
||||
name: '基础', |
||||
coefficient: 0.2, // 难度系数，试卷里计算试卷难度专用
|
||||
theme: 'success', |
||||
}, |
||||
{ |
||||
id: 'easy', |
||||
name: '普通', |
||||
coefficient: 0.4, |
||||
theme: '', |
||||
}, |
||||
{ |
||||
id: 'medium', |
||||
name: '较难', |
||||
coefficient: 0.6, |
||||
theme: 'warning', |
||||
}, |
||||
{ |
||||
id: 'hard', |
||||
name: '难', |
||||
coefficient: 0.8, |
||||
theme: 'danger', |
||||
}, |
||||
], |
||||
questionTypes: [ |
||||
{ |
||||
id: 'single_choice', |
||||
name: '单选题' |
||||
}, |
||||
{ |
||||
id: 'multiple_choice', |
||||
name: '多选题' |
||||
}, |
||||
{ |
||||
id: 'judgement', |
||||
name: '判断题' |
||||
}, |
||||
{ |
||||
id: 'fill_blank', |
||||
name: '填空题' |
||||
}, |
||||
{ |
||||
id: 'essay', |
||||
name: '问答题' |
||||
}, |
||||
], |
||||
} |
||||
@ -0,0 +1,914 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<el-page-header @back="$router.back()" content="查看报告"></el-page-header> |
||||
</el-card> |
||||
|
||||
|
||||
<div class="report" v-loading="loading"> |
||||
<div class="left"> |
||||
<h6 class="title">答题卡</h6> |
||||
<div v-if="paper" class="type-wrap"> |
||||
<template v-for="(item, i) in paper"> |
||||
<div |
||||
v-if="item.userAnswerList.length && (!sheetStatus || item.userAnswerList.some(e => e.isCorrect === sheetStatus))" |
||||
:key="i" class="type"> |
||||
<h6 class="stem">{{ arabicToChinese(i + 1) }}、{{ item.outlineName }}（本题共{{ item.questionNum }}小题，共{{ |
||||
item.targetScore }}分）</h6> |
||||
<ul class="serials"> |
||||
<template v-for="(ques, j) in item.userAnswerList"> |
||||
<li v-if="!sheetStatus || sheetStatus === ques.isCorrect" :key="j" :class="'status' + ques.isCorrect"> |
||||
<p :class="['serial', { answered: ques.answered, partAnswer: ques.partAnswer }]">{{ j + 1 }}</p> |
||||
<p class="score">{{ ques.userScore }}</p> |
||||
</li> |
||||
</template> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
<ul class="status-filter"> |
||||
<li v-for="(item, i) in statusList" :key="i" :class="{ active: sheetStatus === item.id }" |
||||
@click="filterStatus(item.id)">{{ item.name }}</li> |
||||
</ul> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="text-right"> |
||||
<el-button type="primary" @click="exportPage">导出报告</el-button> |
||||
</div> |
||||
<h6 class="r-title">标准实验报告</h6> |
||||
<div class="info"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/info1.png" alt=""> |
||||
基本信息 |
||||
</h6> |
||||
<ul :class="['info-list', { edit: editing }]"> |
||||
<li> |
||||
<label>学生姓名：</label> |
||||
<el-input v-if="editing" v-model="info.userName" disabled></el-input> |
||||
<span v-else>{{ info.userName }}</span> |
||||
</li> |
||||
<li> |
||||
<label>学生学号：</label> |
||||
<el-input v-if="editing" v-model="info.workNumber" disabled></el-input> |
||||
<span v-else>{{ info.workNumber }}</span> |
||||
</li> |
||||
<li> |
||||
<label>学生班级：</label> |
||||
<el-input v-if="editing" v-model="info.className"></el-input> |
||||
<span v-else>{{ info.className }}</span> |
||||
</li> |
||||
<li> |
||||
<label>成绩：</label> |
||||
<el-input v-if="editing" v-model="info.score" disabled></el-input> |
||||
<div v-else class="score-wrap"> |
||||
<em>{{ info.score }}</em> |
||||
<img src="@/assets/img/point.png" alt=""> |
||||
<p v-if="essayExist" class="exist">（部分试题待判分，成绩待定）</p> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<label>提交时间：</label> |
||||
<el-input v-if="editing" v-model="info.submitTime" disabled></el-input> |
||||
<span v-else>{{ info.submitTime }}</span> |
||||
</li> |
||||
<li> |
||||
<label>用时：</label> |
||||
<el-input v-if="editing" v-model="info.timeSum"></el-input> |
||||
<span v-else>{{ info.timeSum }}</span> |
||||
</li> |
||||
<li> |
||||
<label>指导老师：</label> |
||||
<el-input v-if="editing" v-model="info.instructor"></el-input> |
||||
<span v-else>{{ info.instructor }}</span> |
||||
</li> |
||||
</ul> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report4.png" alt=""> |
||||
得分情况 |
||||
</h6> |
||||
<el-table :data="paper" class="table" border stripe header-align="center"> |
||||
<el-table-column prop="outlineName" label="大题名称" align="center"></el-table-column> |
||||
<el-table-column prop="questionNum" label="小题总数" align="center"></el-table-column> |
||||
<el-table-column prop="targetScore" label="总分" align="center"></el-table-column> |
||||
<el-table-column prop="userTotalScore" label="得分" align="center"> |
||||
<template slot-scope="scope"> |
||||
<p v-if="scope.row.questionType === 'essay'" class="text-red">待评分</p> |
||||
<p v-else>{{ scope.row.userTotalScore }}</p> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="scoreRatePercentage" label="得分率" align="center"></el-table-column> |
||||
</el-table> |
||||
</div> |
||||
|
||||
<ul v-if="paper" class="ques-wrap"> |
||||
<li v-for="(item, i) in paper" :key="i"> |
||||
<div class="outline"> |
||||
{{ arabicToChinese(i + 1) }}、{{ item.questionTypeName }}（本题共{{ item.questionNum }}小题，共{{ |
||||
item.targetScore }}分） |
||||
<img :class="['shrink', { active: item.shrink }]" src="@/assets/img/shrink.svg" alt="" |
||||
@click="item.shrink = !item.shrink"> |
||||
</div> |
||||
<div :class="['ques', { hide: item.shrink }]"> |
||||
<div v-for="(ques, j) in item.userAnswerList" :key="j" class="item"> |
||||
<div class="stem-wrap"> |
||||
<div class="labels"> |
||||
<span class="label">{{ j + 1 }} / {{ item.questionNum }}</span> |
||||
<span class="label">{{ item.questionTypeName }}</span> |
||||
</div> |
||||
<el-tag class="m-r-5" :type="ques.difficultTheme">{{ ques.difficult }}</el-tag> |
||||
|
||||
<div class="stem" :id="'stem' + ques.id" v-html="getQuesStem(ques)"></div> |
||||
<p>（{{ ques.questionScore }}分）</p> |
||||
</div> |
||||
|
||||
<div |
||||
v-if="item.questionType !== 'fill_blank' && item.questionType !== 'essay' && ques.questionAnswerVersionsList" |
||||
class="m-b-10"> |
||||
<div v-for="(opt, j) in ques.questionAnswerVersionsList" :key="j" class="opt"> |
||||
<el-checkbox v-if="item.questionType === 'multiple_choice'" v-model="opt.answerIsCorrect" |
||||
:true-label="1"></el-checkbox> |
||||
<el-radio v-else v-model="opt.answerIsCorrect" :true-label="1" :label="1" disabled></el-radio> |
||||
<span>{{ numToLetter(j) }}. </span> |
||||
<div class="text" v-html="opt.optionText"></div> |
||||
</div> |
||||
</div> |
||||
<template v-if="item.questionType === 'essay'"> |
||||
<div v-if="ques.stemAttachment" class="m-b-10"> |
||||
<el-link class="m-r-10" type="primary">{{ ques.stemAttachment }}</el-link> |
||||
<el-button type="primary" size="mini" round @click="download(ques.stemAttachment)">下载</el-button> |
||||
</div> |
||||
<div v-if="ques.uploadInstructions" class="line m-b-10"> |
||||
<span>考生上传附件说明：</span> |
||||
<div v-html="ques.uploadInstructions"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<div class="m-b-10"> |
||||
<span>【知识点】</span> |
||||
<el-tag v-for="(kp, k) in ques.kpList" :key="k" class="m-r-5">{{ kp }}</el-tag> |
||||
</div> |
||||
<div class="flex m-b-10"> |
||||
<span>【解析】</span> |
||||
<div |
||||
v-if="ques.questionAnswerVersionsList.length && ques.questionAnswerVersionsList[0].answerAnalysis" |
||||
v-html="ques.questionAnswerVersionsList[0].answerAnalysis"></div> |
||||
<div v-else>暂无解析</div> |
||||
</div> |
||||
|
||||
<div :class="['ques-info', { essay: item.questionType === 'essay' }]"> |
||||
<template v-if="item.questionType === 'essay'"> |
||||
<div class="line"> |
||||
<span>参考答案：</span> |
||||
<div v-html="ques.questionAnswerVersionsList[0].referenceAnswer"></div> |
||||
</div> |
||||
<div class="line"> |
||||
<span>考生答案：</span> |
||||
<div v-html="ques.answerContent"></div> |
||||
</div> |
||||
<div v-if="ques.attachmentUrl" class="line"> |
||||
<span>考生上传附件：</span> |
||||
<el-link class="m-r-10" type="primary">{{ ques.attachmentName }}</el-link> |
||||
<el-button type="primary" size="mini" round @click="download(ques)">下载</el-button> |
||||
</div> |
||||
</template> |
||||
<template v-else> |
||||
<div class="line">正确答案：{{ ques.quesAnswer }}</div> |
||||
<div class="line"> |
||||
<span>考生答案：</span> |
||||
<p v-if="item.questionType !== 'fill_blank'">{{ ques.userAnswerStr }}</p> |
||||
<div v-else-if="ques.userAnswerFill" class="fill-answers"> |
||||
<p v-for="(ans, j) in ques.userAnswerFill" :key="j" class="fill-answer"> |
||||
填空{{ j + 1 }}：{{ ans.studentAnswer }} |
||||
<img v-if="ans.correct" src="@/assets/img/right.svg" alt="" class="icon"> |
||||
<img v-else src="@/assets/img/wrong.svg" alt="" class="icon">； |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<div class="line">题目分值：{{ ques.questionScore }}分</div> |
||||
<div class="line">考生得分：<el-input class="score-input" size="small" :value="ques.userScore" |
||||
disabled />分 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report5.png" alt=""> |
||||
考试总结与体会 |
||||
</h6> |
||||
<quill v-if="editing" :border="true" v-model="form.summarize" :minHeight="150" :height="150" /> |
||||
<div v-else class="pre-wrap" v-html="form.summarize"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import QuesConst from '@/const/ques' |
||||
import TestPaperConst from '@/const/testPaper' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
data () { |
||||
return { |
||||
numToLetter: Util.numToLetter, |
||||
arabicToChinese: Util.arabicToChinese, |
||||
reportId: this.$route.query.reportId, |
||||
title: "实验报告", |
||||
form: { |
||||
className: "", |
||||
instructor: "", |
||||
period: "", |
||||
projectName: "", |
||||
summarize: "", |
||||
}, |
||||
info: {}, |
||||
outline: [], |
||||
editing: false, |
||||
loadIns: null, |
||||
loading: false, |
||||
sheetStatus: '', |
||||
statusList: [ |
||||
{ |
||||
id: 1, |
||||
name: '正确' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '错误' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '部分正确' |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '待判分' |
||||
}, |
||||
], |
||||
paper: [], |
||||
essayExist: 0, |
||||
}; |
||||
}, |
||||
mounted () { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
async getData () { |
||||
this.loading = true |
||||
try { |
||||
const { userAnswers: paper, report } = await this.$get(`${this.api.getDetailedExamScores}?reportId=${this.reportId}`) |
||||
this.form = report |
||||
|
||||
// 处理试题信息 |
||||
const { questionTypes: types, difficults } = QuesConst |
||||
const { numToLetter } = Util |
||||
let essayExist = 0 |
||||
paper.map(e => { |
||||
if (e.questionType === 'essay') essayExist = 1 |
||||
e.shrink = false |
||||
const type = e.questionType |
||||
e.questionTypeName = types.find(n => n.id === type).name |
||||
e.userAnswerList && e.userAnswerList.map(n => { |
||||
if (n.difficulty) { |
||||
const curDiff = difficults.find(m => m.id === n.difficulty) |
||||
if (curDiff) { |
||||
n.difficult = curDiff.name |
||||
n.difficultTheme = curDiff.theme |
||||
} |
||||
} |
||||
n.kpList = n.knowledgePointName.split(',') |
||||
|
||||
const opts = n.questionAnswerVersionsList |
||||
if (type !== 'fill_blank' && type !== 'essay') { // 选择题 |
||||
n.isCorrect = n.userScore && n.userScore === n.questionScore ? 1 : 2 |
||||
const quesAnswer = [] |
||||
opts && opts.map((m, j) => { |
||||
m.answerIsCorrect && quesAnswer.push(numToLetter(j)) |
||||
}) |
||||
n.quesAnswer = quesAnswer.join('') |
||||
let { userAnswer } = n |
||||
if (userAnswer) { |
||||
userAnswer = JSON.parse(userAnswer) |
||||
n.userAnswerStr = userAnswer.map(m => numToLetter(+m - 1)).join('') |
||||
} |
||||
} else if (type === 'fill_blank') { // 填空题 |
||||
// 学生做的填空题答案及分数 |
||||
let { jsonText } = n |
||||
if (jsonText) { |
||||
n.userAnswerFill = JSON.parse(jsonText) |
||||
} |
||||
|
||||
// 正确答案 |
||||
if (opts && opts.length) { |
||||
let { answerData } = opts[0] |
||||
if (answerData) { |
||||
answerData = JSON.parse(answerData) |
||||
let quesAnswer = '' |
||||
answerData.map((m, j) => { |
||||
if (m.fills) { |
||||
quesAnswer += `填空${j + 1}：${m.fills.map(n => n.val).join(' ||| ')}；` |
||||
} |
||||
}) |
||||
n.quesAnswer = quesAnswer |
||||
} |
||||
} |
||||
|
||||
// 填空题需要区分部分正确还是正确、错误 |
||||
let rightLen = 0 |
||||
if (n.userAnswerFill) rightLen = n.userAnswerFill.filter(m => m.correct).length // 正确的空的数量 |
||||
n.isCorrect = n.userScore && n.questionScore === n.userScore ? 1 : (rightLen ? 3 : 2) |
||||
} else if (type === 'essay') { // 简答题 |
||||
n.isCorrect = 4 // 简答题显示待判分 |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
this.essayExist = essayExist // 是否存在简答题 |
||||
this.paper = paper |
||||
let { form } = this |
||||
this.info = { |
||||
workNumber: form.workNumber, |
||||
timeSum: form.timeSum, |
||||
instructor: form.instructor, |
||||
submitTime: form.submitTime, |
||||
score: form.score, |
||||
className: form.className, |
||||
userName: form.userName |
||||
} |
||||
|
||||
this.loading = false |
||||
} catch (e) { |
||||
this.loading = false |
||||
} |
||||
}, |
||||
// 答题卡筛选 |
||||
filterStatus (e) { |
||||
this.sheetStatus = this.sheetStatus === e ? '' : e |
||||
}, |
||||
// 处理题干显示 |
||||
getQuesStem (ques) { |
||||
let { stem } = ques |
||||
if (ques.questionType === 'fill_blank') { // 填空题 |
||||
return stem |
||||
let { fills } = ques |
||||
|
||||
const regex = /<span class="gapfilling-span" data-id="(.*?)">______<\/span>/g |
||||
let match |
||||
let index = 0 // 用于跟踪索引 |
||||
let result = stem |
||||
|
||||
while ((match = regex.exec(stem)) !== null) { |
||||
const newInput = `______` |
||||
result = result.replace(match[0], newInput) |
||||
index++ |
||||
} |
||||
return result |
||||
} else { |
||||
return stem |
||||
} |
||||
}, |
||||
// 下载附件 |
||||
download (ques) { |
||||
Util.downloadFile(ques.attachmentName, ques.attachmentUrl) |
||||
}, |
||||
// 导出 |
||||
exportPage () { |
||||
const form = Object.assign(this.form, this.info) |
||||
const list = JSON.parse(JSON.stringify(this.expData)) |
||||
list.map((e, i) => { |
||||
const item = this.userScores.find(n => n.judgmentId == e.judgmentId) |
||||
if (item && item.runThePicture) e.runThePicture = item.runThePicture |
||||
if (item && item.runThePictureList) e.runThePictureList = item.runThePictureList |
||||
e.id = i + 1 |
||||
// if (e.referenceAnswer && typeof e.referenceAnswer === 'string') e.referenceAnswer = e.referenceAnswer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
if (e.answer && typeof e.answer === 'string') e.answer = e.answer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
}) |
||||
for (const i in form) { |
||||
if (form[i] && typeof form[i] === 'string') form[i] = form[i].replace(/<[^>]+>/g, '') |
||||
} |
||||
form.purpose = form.purpose.replace(/<[^>]+>/g, '') |
||||
this.$post(this.project ? this.api.exportBankExperimentReport : this.api.exportLabReport, { |
||||
...form, |
||||
experimentalData: list |
||||
}).then(res => { |
||||
console.log(res) |
||||
Util.downloadFileDirect(`实验报告.docx`, new Blob([res])) |
||||
}).catch(res => { }) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
padding: 10px; |
||||
} |
||||
|
||||
.text-right { |
||||
text-align: right; |
||||
} |
||||
|
||||
.text-red { |
||||
color: #f00; |
||||
} |
||||
|
||||
code, |
||||
kbd, |
||||
samp { |
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif; |
||||
word-wrap: break-word; |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
/deep/ pre { |
||||
white-space: pre-wrap; |
||||
/* css-3 */ |
||||
white-space: -moz-pre-wrap; |
||||
/* Mozilla, since 1999 */ |
||||
white-space: pre-wrap; |
||||
/* Opera 4-6 */ |
||||
white-space: -o-pre-wrap; |
||||
/* Opera 7 */ |
||||
word-wrap: break-word; |
||||
/* Internet Explorer 5.5+ */ |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
font-size: 12px; |
||||
font-weight: 400; |
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif; |
||||
} |
||||
|
||||
.report { |
||||
display: flex; |
||||
|
||||
.r-title { |
||||
margin-bottom: 40px; |
||||
font-size: 24px; |
||||
text-align: center; |
||||
color: #333; |
||||
} |
||||
|
||||
.info { |
||||
padding: 20px 16px; |
||||
border: 1px solid #e1e6f2; |
||||
} |
||||
|
||||
.l-title { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 5px 8px; |
||||
margin-bottom: 12px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
background-color: #f7f5ff; |
||||
} |
||||
|
||||
.info-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
padding: 10px 0 0 20px; |
||||
|
||||
li { |
||||
display: inline-flex; |
||||
width: 23%; |
||||
padding: 0 10px; |
||||
margin-bottom: 34px; |
||||
} |
||||
|
||||
&.edit { |
||||
li { |
||||
align-items: center; |
||||
} |
||||
} |
||||
|
||||
label { |
||||
font-size: 14px; |
||||
color: #333; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
span { |
||||
min-width: 150px; |
||||
padding: 0 10px 3px; |
||||
border-bottom: 1px solid #e1e6f2; |
||||
} |
||||
|
||||
/deep/.el-input { |
||||
width: 174px; |
||||
} |
||||
} |
||||
|
||||
.score-wrap { |
||||
position: relative; |
||||
min-width: 150px; |
||||
border-bottom: 1px solid #e1e6f2; |
||||
|
||||
em { |
||||
position: absolute; |
||||
top: -12px; |
||||
left: 30px; |
||||
font-family: din; |
||||
font-size: 30px; |
||||
font-weight: 600; |
||||
color: #0b1d30; |
||||
} |
||||
|
||||
img { |
||||
position: absolute; |
||||
bottom: -15px; |
||||
left: 0; |
||||
} |
||||
|
||||
.exist { |
||||
position: absolute; |
||||
left: 70px; |
||||
white-space: nowrap; |
||||
color: #f00; |
||||
} |
||||
} |
||||
|
||||
/deep/.el-textarea .el-textarea__inner, |
||||
.pre-wrap { |
||||
min-height: 72px; |
||||
padding: 10px 16px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
|
||||
&.edit { |
||||
color: #abb3c6; |
||||
border: 1px solid #cacfdb; |
||||
border-radius: 4px; |
||||
background-color: #f6f7f9; |
||||
} |
||||
} |
||||
|
||||
/deep/ .table th { |
||||
background-color: #e5dfff !important; |
||||
|
||||
.cell { |
||||
line-height: 35px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
|
||||
.left { |
||||
width: 290px; |
||||
max-height: calc(100vh - 267px); |
||||
margin-right: 15px; |
||||
background-color: #fff; |
||||
overflow: auto; |
||||
|
||||
.title { |
||||
padding: 10px 0; |
||||
font-size: 16px; |
||||
text-align: center; |
||||
color: #333; |
||||
} |
||||
|
||||
.progress { |
||||
padding: 10px; |
||||
color: #5a5a5a; |
||||
background-color: #d4e9ff; |
||||
} |
||||
|
||||
.type-wrap { |
||||
padding: 10px; |
||||
|
||||
.type { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.stem { |
||||
font-size: 15px; |
||||
color: #333; |
||||
} |
||||
} |
||||
|
||||
.serials { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-top: 5px; |
||||
|
||||
li { |
||||
position: relative; |
||||
width: 30px; |
||||
margin: 7px 9px; |
||||
font-size: 13px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.serial { |
||||
color: #505050; |
||||
line-height: 30px; |
||||
border: 1px solid #d3d3d3; |
||||
border-bottom: 1px solid transparent; |
||||
} |
||||
|
||||
.status1 .serial { |
||||
color: #fff; |
||||
background-color: #2abd8c; |
||||
border-color: #2abd8c; |
||||
} |
||||
|
||||
.status2 .serial { |
||||
color: #fff; |
||||
background-color: #e75050; |
||||
border-color: #e75050; |
||||
} |
||||
|
||||
.status3 .serial { |
||||
color: #2abd8c; |
||||
border-color: #2abd8c; |
||||
} |
||||
|
||||
.status4 .serial { |
||||
color: #fff; |
||||
background-color: #fe9f0a; |
||||
border-color: #fe9f0a; |
||||
} |
||||
|
||||
.score { |
||||
height: 22px; |
||||
border: 1px solid #d3d3d3; |
||||
border-top: 0; |
||||
line-height: 22px; |
||||
} |
||||
} |
||||
|
||||
.status-filter { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 10px; |
||||
border-top: 1px solid #e5e5e5; |
||||
|
||||
li { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
padding: 0 3px; |
||||
font-size: 12px; |
||||
color: #333; |
||||
cursor: pointer; |
||||
border: 1px solid transparent; |
||||
|
||||
&:before { |
||||
content: ''; |
||||
width: 13px; |
||||
height: 13px; |
||||
margin-right: 5px; |
||||
border: 1px solid transparent; |
||||
} |
||||
|
||||
&:first-child { |
||||
&.active { |
||||
color: #2abd8c; |
||||
border-color: #2abd8c; |
||||
} |
||||
|
||||
&:before { |
||||
background-color: #2abd8c; |
||||
} |
||||
} |
||||
|
||||
&:nth-child(2) { |
||||
&.active { |
||||
color: #e75050; |
||||
border-color: #e75050; |
||||
} |
||||
|
||||
&:before { |
||||
background-color: #e75050; |
||||
} |
||||
} |
||||
|
||||
&:nth-child(3) { |
||||
&.active { |
||||
color: #2abd8c; |
||||
border-color: #2abd8c; |
||||
} |
||||
|
||||
&:before { |
||||
border-color: #2abd8c; |
||||
} |
||||
} |
||||
|
||||
&:last-child { |
||||
&.active { |
||||
color: #fe9f0a; |
||||
border-color: #fe9f0a; |
||||
} |
||||
|
||||
&:before { |
||||
background-color: #fe9f0a; |
||||
} |
||||
} |
||||
|
||||
&.active { |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
width: calc(100% - 359px); |
||||
height: calc(100vh - 287px); |
||||
padding: 10px; |
||||
background-color: #fff; |
||||
overflow: auto; |
||||
|
||||
&>li { |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
.outline { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 10px 15px; |
||||
font-size: 15px; |
||||
font-weight: 600; |
||||
color: #333; |
||||
background-color: #e8f0ff; |
||||
} |
||||
|
||||
.shrink { |
||||
cursor: pointer; |
||||
transition: .5s; |
||||
|
||||
&.active { |
||||
transform: rotate(180deg); |
||||
} |
||||
} |
||||
|
||||
.ques { |
||||
max-height: none; |
||||
padding: 15px; |
||||
margin-bottom: 15px; |
||||
transition: all 1.5s; |
||||
overflow: hidden; |
||||
|
||||
&.hide { |
||||
max-height: 10px; |
||||
} |
||||
} |
||||
|
||||
.item:not(:last-child) { |
||||
padding-bottom: 15px; |
||||
margin-bottom: 15px; |
||||
border-bottom: 1px dashed #e1e1e1; |
||||
} |
||||
|
||||
.stem-wrap { |
||||
display: flex; |
||||
align-items: baseline; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.tag { |
||||
margin-left: 10px; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
opacity: .9; |
||||
} |
||||
} |
||||
|
||||
.labels { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.label { |
||||
padding: 3px 5px; |
||||
margin-right: 10px; |
||||
font-size: 12px; |
||||
line-height: 1; |
||||
color: #9076FF; |
||||
white-space: nowrap; |
||||
border: 1px solid; |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
.stem { |
||||
max-width: calc(100% - 207px); |
||||
} |
||||
|
||||
.ques-info { |
||||
position: relative; |
||||
padding: 10px; |
||||
background-color: #f3f3f3; |
||||
overflow: hidden; |
||||
|
||||
&.essay { |
||||
&:after { |
||||
content: '待 判 分'; |
||||
position: absolute; |
||||
top: 17px; |
||||
right: -33px; |
||||
padding: 5px 36px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
background-color: #fe9f0a; |
||||
transform: rotate(45deg); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.line { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 8px; |
||||
font-size: 13px; |
||||
color: #333; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.fill-answers { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.fill-answer { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin-right: 10px; |
||||
|
||||
.icon { |
||||
margin-left: 7px; |
||||
} |
||||
} |
||||
|
||||
.score-input { |
||||
width: 100px; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.fill-input { |
||||
width: 100px; |
||||
height: 28px; |
||||
padding: 0 15px; |
||||
margin: 0 10px; |
||||
font-size: 13px; |
||||
line-height: 28px; |
||||
color: #606266; |
||||
border: 1px solid #DCDEE0; |
||||
border-radius: 2px; |
||||
|
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
} |
||||
|
||||
.opt { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: baseline; |
||||
padding-left: 10px; |
||||
margin-bottom: 5px; |
||||
font-size: 14px; |
||||
color: #707070; |
||||
line-height: 1.6; |
||||
|
||||
.el-radio, |
||||
.el-checkbox { |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
.el-radio__label { |
||||
display: none; |
||||
} |
||||
|
||||
.text { |
||||
max-width: calc(100% - 48px); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.result-pic { |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
@media (max-width: 1650px) { |
||||
.wrap { |
||||
padding: 12px 200px 20px; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 1430px) { |
||||
.wrap { |
||||
padding: 12px 100px 20px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue