master
parent
bb9a1e6cfb
commit
554f8bdfa5
20 changed files with 300 additions and 729 deletions
|
Before Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 106 KiB |
@ -0,0 +1,60 @@ |
|||||||
|
export default { |
||||||
|
mounted() { |
||||||
|
this.insertScript() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initMedia(item){ |
||||||
|
if(item.videoAudio && !item.player){ |
||||||
|
this.$get(`${this.api.getPlayAuth}/${item.videoAudio}`).then(res => { |
||||||
|
let playAuth = res.data.playAuth |
||||||
|
this.$nextTick(() => { |
||||||
|
item.player = new Aliplayer({ |
||||||
|
id: item.mediaEleId, |
||||||
|
width: '100%', |
||||||
|
autoplay: false, |
||||||
|
vid : item.videoAudio, |
||||||
|
playauth : playAuth, |
||||||
|
encryptType:1, //当播放私有加密流时需要设置。
|
||||||
|
}) |
||||||
|
}) |
||||||
|
}).catch(res => {}) |
||||||
|
} |
||||||
|
}, |
||||||
|
updateProgress(item,isFillBlank){ |
||||||
|
let subjects = this.subjects |
||||||
|
if(isFillBlank){ |
||||||
|
let index = item.getAttribute('data-index') |
||||||
|
if([...item.parentElement.querySelectorAll('input')].some(n => n.value)){ |
||||||
|
subjects[3][index].hadAnswer = 1 |
||||||
|
}else{ |
||||||
|
subjects[3][index].hadAnswer = 0 |
||||||
|
} |
||||||
|
this.fillBlankAnsweredCount = subjects[3].filter(n => n.hadAnswer).length |
||||||
|
}else{ |
||||||
|
this.singleAnsweredCount = subjects[0].filter(n => n.val).length |
||||||
|
this.multipleAnsweredCount = subjects[1].filter(n => n.val.length).length |
||||||
|
this.judgeAnsweredCount = subjects[2].filter(n => n.val).length |
||||||
|
this.briefAnswerAnsweredCount = subjects[4].filter(n => n.val).length |
||||||
|
} |
||||||
|
let answered = this.singleAnsweredCount + this.multipleAnsweredCount + this.judgeAnsweredCount + this.fillBlankAnsweredCount + this.briefAnswerAnsweredCount |
||||||
|
this.progress = this.totalLen ? Math.floor((answered / this.totalLen * 100)) : 0 |
||||||
|
}, |
||||||
|
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')) |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
.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: #e80909; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue