master
parent
0505255dd2
commit
c10e676553
35 changed files with 867 additions and 51 deletions
@ -0,0 +1,279 @@ |
|||||||
|
<template> |
||||||
|
<div class="box"> |
||||||
|
<h1 class="title">{{paperName }}</h1> |
||||||
|
<div class="metas"> |
||||||
|
<div style="margin-right: 20px;"> |
||||||
|
<span class="name">总分：</span> |
||||||
|
<span class="val">100分</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span class="name">考试时长：</span> |
||||||
|
<span class="val">{{duration}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ul class="tab"> |
||||||
|
<li v-for="(item,index) in tabs" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li> |
||||||
|
</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.questionScore}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="meta"> |
||||||
|
<p class="key">题干：</p> |
||||||
|
<p class="val" v-html="item.questionStem"></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.userAnswer}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="meta"> |
||||||
|
<p class="key">答案解析：</p> |
||||||
|
<p class="val" v-html="item.answerAnalysis"></p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import mixins from '@/mixins/setBackground' |
||||||
|
import { mapState } from 'vuex' |
||||||
|
export default { |
||||||
|
mixins: [ mixins ], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
paperName: '', |
||||||
|
duration: 0, |
||||||
|
selectVisible: false, |
||||||
|
tabs: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '单选题' |
||||||
|
},{ |
||||||
|
id: 2, |
||||||
|
name: '多选题' |
||||||
|
},{ |
||||||
|
id: 3, |
||||||
|
name: '判断题' |
||||||
|
},{ |
||||||
|
id: 4, |
||||||
|
name: '简答题' |
||||||
|
},{ |
||||||
|
id: 5, |
||||||
|
name: '填空题' |
||||||
|
} |
||||||
|
], |
||||||
|
typeNameList: ['单项选择','多项选择','判断题','简答题','填空题'], |
||||||
|
active: 1, |
||||||
|
list: [], |
||||||
|
curType: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState('user', [ |
||||||
|
'userId' |
||||||
|
]), |
||||||
|
...mapState('achievement', [ |
||||||
|
'id' |
||||||
|
]) |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
this.$post(`${this.api.reviewDetail}?id=${this.id}`) |
||||||
|
.then(res => { |
||||||
|
let data = res.data |
||||||
|
data.list.forEach(n => { |
||||||
|
n.isCorrecting == 0 && (n.questionScore = '') |
||||||
|
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.userAnswer = n.userAnswer ? n.userAnswer.replace(/<>/g,'|') : '' |
||||||
|
} |
||||||
|
}) |
||||||
|
this.list = data.list |
||||||
|
this.handleOptions() |
||||||
|
this.paperName = data.paperName |
||||||
|
this.userName = data.stuName |
||||||
|
this.this_score = data.score |
||||||
|
this.duration = data.timeCost |
||||||
|
}) |
||||||
|
.catch(err => {}) |
||||||
|
}, |
||||||
|
tabChange(id){ |
||||||
|
this.active = id |
||||||
|
this.handleOptions() |
||||||
|
}, |
||||||
|
handleOptions(){ |
||||||
|
let list = this.list |
||||||
|
let typeName = this.typeNameList[this.active-1] |
||||||
|
list = list.filter(n => n.typeName == typeName) |
||||||
|
list.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 = list |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</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,353 @@ |
|||||||
|
<template> |
||||||
|
<div class="box"> |
||||||
|
<div class="left"> |
||||||
|
<p class="title">答题卡</p> |
||||||
|
|
||||||
|
<div class="item"> |
||||||
|
<p class="type">单选题</p> |
||||||
|
<p class="total">（共{{singleCount}}题，合计{{singlePoint}}分）</p> |
||||||
|
<div class="nums"> |
||||||
|
<span v-for="n in singleCount" :class="{active: n <= singleAnsweredCount}" :key="n">{{n}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<p class="type">多选题</p> |
||||||
|
<p class="total">（共{{multipleCount}}题，合计{{multipleChoiceScore}}分）</p> |
||||||
|
<div class="nums"> |
||||||
|
<span v-for="n in multipleCount" :class="{active: n <= multipleAnsweredCount}" :key="n">{{n}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<p class="type">判断题</p> |
||||||
|
<p class="total">（共{{judgeCount}}题，合计{{judgeScore}}分）</p> |
||||||
|
<div class="nums"> |
||||||
|
<span v-for="n in judgeCount" :class="{active: n <= judgeAnsweredCount}" :key="n">{{n}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<p class="type">填空题</p> |
||||||
|
<p class="total">（共{{fillBlankCount}}题，合计{{fillBlanksScore}}分）</p> |
||||||
|
<div class="nums"> |
||||||
|
<span v-for="n in fillBlankCount" :class="{active: n <= fillBlankAnsweredCount}" :key="n">{{n}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<p class="type">简答题</p> |
||||||
|
<p class="total">（共{{briefAnswerCount}}题，合计{{briefAnswerScore}}分）</p> |
||||||
|
<div class="nums"> |
||||||
|
<span v-for="n in briefAnswerCount" :class="{active: n <= briefAnswerAnsweredCount}" :key="n">{{n}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="btn"> |
||||||
|
<el-button size="mini" type="primary" @click="save">提交练习</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="middle"> |
||||||
|
<div class="ques"> |
||||||
|
<template v-for="(subject,k) in subjects"> |
||||||
|
<div class="item" v-if="subject.length" :key="k"> |
||||||
|
<p v-if="subjects[k].length" class="title">{{questionType[k]}}（共{{subjects[k].length}}题，合计{{scoreList[k]}}分）</p> |
||||||
|
<div class="ques-wrap" v-for="(item,index) in subject" :key="index"> |
||||||
|
<div class="name-wrap"> |
||||||
|
<span class="index">{{index+1}}.</span> |
||||||
|
<div class="name" :class="'stem' + k + index" v-html="item.questionStem"></div> |
||||||
|
</div> |
||||||
|
<div class="options"> |
||||||
|
<template v-if="item.name == '单项选择' || item.name == '判断题'"> |
||||||
|
<div class="option" v-for="(option,i) in item.options" :key="i"> |
||||||
|
<el-radio v-model="item.val" :label="i"> |
||||||
|
{{i}}.{{item.options[i]}} |
||||||
|
</el-radio> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template v-if="item.name == '多项选择'"> |
||||||
|
<el-checkbox-group v-model="item.val"> |
||||||
|
<el-checkbox class="option-check" :label="i" v-for="(option,i) in item.options" :key="i"> |
||||||
|
{{i}}.{{item.options[i]}} |
||||||
|
</el-checkbox> |
||||||
|
</el-checkbox-group> |
||||||
|
</template> |
||||||
|
<template v-if="item.name == '简答题'"> |
||||||
|
<el-input type="textarea" rows="5" v-model="item.val"></el-input> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { mapState,mapGetters,mapActions } from 'vuex' |
||||||
|
import mixins from '@/mixins/setBackground' |
||||||
|
import util from '@/libs/util' |
||||||
|
export default { |
||||||
|
mixins: [ mixins ], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
subjects: [], |
||||||
|
singleCount: 0, |
||||||
|
multipleCount: 0, |
||||||
|
judgeCount: 0, |
||||||
|
fillBlankCount: 0, |
||||||
|
briefAnswerCount: 0, |
||||||
|
|
||||||
|
singleAnsweredCount: 0, |
||||||
|
multipleAnsweredCount: 0, |
||||||
|
judgeAnsweredCount: 0, |
||||||
|
fillBlankAnsweredCount: 0, |
||||||
|
briefAnswerAnsweredCount: 0, |
||||||
|
|
||||||
|
singlePoint: 0, |
||||||
|
multipleChoiceScore: 0, |
||||||
|
judgeScore: 0, |
||||||
|
fillBlanksScore: 0, |
||||||
|
briefAnswerScore: 0, |
||||||
|
scoreList: [], |
||||||
|
questionType: ['单选题','多选题','判断题','填空题','简答题'], |
||||||
|
progress: 0, |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState('user', [ |
||||||
|
'userId','clientId' |
||||||
|
]) |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
this.$post(`${this.api.randomPractice}?userId=${this.userId}&schoolId=${this.clientId}`) |
||||||
|
.then(res => { |
||||||
|
let data = res.data |
||||||
|
this.randomId = data.randomId |
||||||
|
this.$post(`${this.api.previewPaper}?qid=${data.qid}`) |
||||||
|
.then(res => { |
||||||
|
let data = res.data |
||||||
|
let subjects = [ |
||||||
|
[...data.list1], |
||||||
|
[...data.list2], |
||||||
|
[...data.list4], |
||||||
|
[...data.list3], |
||||||
|
[...data.list5], |
||||||
|
] |
||||||
|
this.singleCount = data.list1.length |
||||||
|
this.multipleCount = data.list2.length |
||||||
|
this.fillBlankCount = data.list3.length |
||||||
|
this.judgeCount = data.list4.length |
||||||
|
this.briefAnswerCount = data.list5.length |
||||||
|
|
||||||
|
this.singlePoint = data.list1.length ? data.list1[0].singleChoiceScore * this.singleCount : 0 |
||||||
|
this.multipleChoiceScore = data.list2.length ? data.list2[0].multipleChoiceScore * this.multipleCount : 0 |
||||||
|
this.judgeScore = data.list4.length ? data.list4[0].judgeScore * this.judgeCount : 0 |
||||||
|
this.fillBlanksScore = data.list3.length ? data.list3[0].fillBlanksScore * this.fillBlankCount : 0 |
||||||
|
this.briefAnswerScore = data.list5.length ? data.list5[0].briefAnswerScore * this.briefAnswerCount : 0 |
||||||
|
this.scoreList = [this.singlePoint,this.multipleChoiceScore,this.fillBlanksScore,this.briefAnswerScore,this.briefAnswerScore] |
||||||
|
|
||||||
|
subjects.forEach((e,i) => { |
||||||
|
e.forEach(n => { |
||||||
|
if(i == 1){ |
||||||
|
this.$set(n,'val',[]) |
||||||
|
}else if(i == 3){ |
||||||
|
n.questionStem = n.questionStem.replace(/\(\)\(\)\(\)/g,`<input class="input"></input>`) |
||||||
|
}else{ |
||||||
|
this.$set(n,'val','') |
||||||
|
} |
||||||
|
if(!n.options){ |
||||||
|
let options = {} |
||||||
|
for(let i in n){ |
||||||
|
if(i.includes('option') && n[i]){ |
||||||
|
options[i.replace('option','')] = n[i] |
||||||
|
} |
||||||
|
} |
||||||
|
n.options = options |
||||||
|
} |
||||||
|
n.questionStatus = 0 |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.subjects = subjects |
||||||
|
}).catch(err => {}) |
||||||
|
}).catch(err => {}) |
||||||
|
}, |
||||||
|
save(){ |
||||||
|
let data1 = [] |
||||||
|
this.subjects.map((e,i) => { |
||||||
|
e.map((n,k) => { |
||||||
|
let userAnswer = '' |
||||||
|
if(i == 1){ |
||||||
|
userAnswer = n.val.join('') |
||||||
|
}else if(i == 3){ |
||||||
|
userAnswer = [...document.querySelectorAll(`.stem${i}${k} input`)].map(n => n.value).join('<>') |
||||||
|
}else{ |
||||||
|
userAnswer = n.val |
||||||
|
} |
||||||
|
data1.push({ |
||||||
|
randomId: this.randomId, |
||||||
|
questionId: n.questionId, |
||||||
|
questionStatus : 1, |
||||||
|
userAnswer, |
||||||
|
userId: this.userId |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
this.$post(`${this.api.AddRandomPractiseExamAnswerDetail}`,data1) |
||||||
|
.then(res => { |
||||||
|
this.$post(`${this.api.addPractiseRecordRandom}?userId=${this.userId}&randomId=${this.randomId}`) |
||||||
|
.then(res => { |
||||||
|
this.$message.success('提交成功') |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(err => {}) |
||||||
|
}) |
||||||
|
.catch(err => {}) |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
$borderColor: #ececec; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
width: 90%; |
||||||
|
margin: 0 auto; |
||||||
|
.left,.middle,.right{ |
||||||
|
border: 1px solid $borderColor; |
||||||
|
} |
||||||
|
.left,.right{ |
||||||
|
width: 160px; |
||||||
|
padding: 10px; |
||||||
|
margin-right: 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
.title{ |
||||||
|
padding: 10px 0; |
||||||
|
font-size: 14px; |
||||||
|
color: #444; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.item{ |
||||||
|
padding: 10px 0; |
||||||
|
margin-bottom: 10px; |
||||||
|
border-bottom: 1px solid $borderColor; |
||||||
|
.type,.total{ |
||||||
|
color: #444; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.total{ |
||||||
|
margin: 10px 0; |
||||||
|
} |
||||||
|
.nums{ |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
span{ |
||||||
|
width: 24px; |
||||||
|
margin: 2px 1px; |
||||||
|
line-height: 24px; |
||||||
|
text-align: center; |
||||||
|
color: #888; |
||||||
|
font-size: 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
border: 1px solid #e6e6e6; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.active{ |
||||||
|
color: #fff; |
||||||
|
background-color: #e80909; |
||||||
|
border-color: #e80909; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.btn{ |
||||||
|
margin: 20px 0; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.middle{ |
||||||
|
flex: 1; |
||||||
|
margin-right: 10px; |
||||||
|
overflow: auto; |
||||||
|
.title{ |
||||||
|
padding: 10px; |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 14px; |
||||||
|
color: #444; |
||||||
|
border-bottom: 1px solid $borderColor; |
||||||
|
} |
||||||
|
.ques{ |
||||||
|
.ques-wrap{ |
||||||
|
padding: 0 15px; |
||||||
|
margin: 10px 0 20px; |
||||||
|
} |
||||||
|
.item{ |
||||||
|
margin: 10px 0 20px; |
||||||
|
&:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.name-wrap{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 13px; |
||||||
|
color: #444; |
||||||
|
.index{ |
||||||
|
font-size: 13px; |
||||||
|
color: #444; |
||||||
|
} |
||||||
|
/deep/.input{ |
||||||
|
width: 100px; |
||||||
|
height: 28px; |
||||||
|
padding: 0 5px; |
||||||
|
margin: 0 5px; |
||||||
|
color: #444; |
||||||
|
background-color: #fff; |
||||||
|
border: 1px solid #ebebeb; |
||||||
|
box-sizing: border-box; |
||||||
|
&:focus{ |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
&:disabled{ |
||||||
|
background-color: #e8e8e8; |
||||||
|
cursor: not-allowed; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.options{ |
||||||
|
margin-top: 10px; |
||||||
|
font-size: 14px; |
||||||
|
color: #8b8b8b; |
||||||
|
.option{ |
||||||
|
margin: 5px 0; |
||||||
|
&.selected{ |
||||||
|
font-weight: bold; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
} |
||||||
|
.option-check{ |
||||||
|
display: block; |
||||||
|
margin-right: 6px; |
||||||
|
} |
||||||
|
/deep/.el-radio__label{ |
||||||
|
padding-left: 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.right{ |
||||||
|
.time,.ans{ |
||||||
|
font-size: 14px; |
||||||
|
color: #444; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.ans{ |
||||||
|
margin: 20px 0 10px; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,104 @@ |
|||||||
|
$insideColor: rgba(245, 242, 255, 0.8); //内部节点的边框颜色 |
||||||
|
$outColor: rgba(255, 255, 255, 0.8); //外部节点的边框颜色 |
||||||
|
//混合代码,提取item共同样式 |
||||||
|
@mixin public { |
||||||
|
cursor: pointer; |
||||||
|
font-size: 14px; |
||||||
|
color: #333333; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
img { |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.side_tree{ |
||||||
|
width: 100%; |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
i{ |
||||||
|
margin-left: 5px; |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
margin-left: 5px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
.item { |
||||||
|
@include public; |
||||||
|
width: 100%; |
||||||
|
padding: 15px 0; |
||||||
|
background:rgba(255,255,255,1); |
||||||
|
box-shadow:1px 14px 29px 0px rgba(255,69,69,0.19); |
||||||
|
border-radius:10px; |
||||||
|
text-align: left; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.empty{ |
||||||
|
width: 25px; |
||||||
|
} |
||||||
|
.item:first{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.item1 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 23px; |
||||||
|
} |
||||||
|
.item2 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left:80px |
||||||
|
} |
||||||
|
.item3 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left:95px |
||||||
|
} |
||||||
|
.item2:hover{ |
||||||
|
color: #cb221c; |
||||||
|
} |
||||||
|
.edit{ |
||||||
|
display: inline-block; |
||||||
|
width: 17px; |
||||||
|
height: 17px; |
||||||
|
background: url(../../../assets/svg/edit.svg) 0 0/cover no-repeat; |
||||||
|
} |
||||||
|
// 使三角形旋转动画 |
||||||
|
.arrowTransform { |
||||||
|
transition: 0.4s; |
||||||
|
transform-origin: center; |
||||||
|
transform: rotateZ(0deg); |
||||||
|
} |
||||||
|
.arrowTransformReturn { |
||||||
|
transition: 0.4s; |
||||||
|
transform-origin: center; |
||||||
|
transform: rotateZ(90deg); |
||||||
|
} |
||||||
|
|
||||||
|
//复选框样式 |
||||||
|
.checkBox { |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
border-radius: 7px; |
||||||
|
margin-left: 10px; |
||||||
|
margin-right: 10px; |
||||||
|
border: 2px solid rgba(146, 120, 255, 1); |
||||||
|
} |
||||||
|
|
||||||
|
//当点击复选框时候切换背景图片 |
||||||
|
.isActive { |
||||||
|
background: url('../../../assets/img/icon-yigouxuan.png'); |
||||||
|
background-size: 14px 14px; /*按比例缩放*/ |
||||||
|
} |
||||||
|
|
||||||
|
.side_icon{ |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.side_icon i{ |
||||||
|
cursor:pointer; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
$main-color: #e80909; |
||||||
|
|
||||||
|
@mixin ellipsis { |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
@mixin mul-ellipsis($num) { |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
-webkit-line-clamp: $num; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.ellipsis{ |
||||||
|
@include ellipsis(); |
||||||
|
} |
||||||
|
.mul-ellipsis2{ |
||||||
|
@include mul-ellipsis(2); |
||||||
|
} |
||||||
|
.mul-ellipsis3{ |
||||||
|
@include mul-ellipsis(3); |
||||||
|
} |
||||||
Loading…
Reference in new issue