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