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