@ -1,90 +1,83 @@
< template > < template >
< div style = "padding: 24px" > < div class = "wrap" >
< el -card shadow = "hover" class = "m-b-20" > < breadcrumb : data = "'实验台/' + curriculumName" > < / breadcrumb >
< div class = "flex-between" > < div class = "flex" >
< el -page -header @back ="goBack" :content ="curriculumName" > < / e l - p a g e - h e a d e r > < div class = "cover" : class = "{'is-word': showMask1}" >
< / div > <!-- 实验台不显示课程封面 -- >
< / e l - c a r d > < img v-if ="coverUrl" :src="coverUrl" alt="" width="100%" height="100%" >
< el -card shadow = "hover" class = "m-b-20" style = "background: none;" > < template v -else -if = " iframeSrc " >
< div class = "flex" > < iframe class = "inner fileIframe" id = "fileIframe" :src ="iframeSrc" frameborder = "0" > < / iframe >
< div class = "cover" : class = "{'is-word': showMask1}" > < template v-if ="showMask" >
<!-- 实验台不显示课程封面 -- > < div class = "mask" style = "width:100%;background: #393A3D;height: 30px;top: 53px;" > < / div >
< img v-if ="coverUrl" :src="coverUrl" alt="" width="100%" height="100%" > < div class = "mask" style = "width:100%;background: #393A3D;height: 30px;top: 53px;" > < / div >
< template v -else -if = " iframeSrc " >
< iframe class = "inner fileIframe" id = "fileIframe" :src ="iframeSrc" frameborder = "0" > < / iframe >
< template v-if ="showMask" >
< div class = "mask" style = "width:100%;background: #393A3D;height: 30px;top: 53px;" > < / div >
< div class = "mask" style = "width:100%;background: #393A3D;height: 30px;top: 53px;" > < / div >
< / template >
< template v-if ="showMask1" >
< div class = "word-mask" style = "height: 40px;" > < / div >
< div class = "word-mask2"
style = "top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);" > < / div >
< / template >
< template v-if ="showMask2" >
< div class = "excel-mask1" style = "height: 48px;" > < / div >
< / template >
< / template > < / template >
< div class = "pdf inner" v -else -if = " pdfSrc " > < template v-if ="showMask1" >
< p class = "arrow" > < div class = "word-mask" style = "height: 40px;" > < / div >
< span @click ="changePdfPage(0)" class = "turn el-icon-arrow-left" < div class = "word-mask2"
: class = "{grey: currentPage==1}" > < / span > style = "top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);" > < / div >
{ { currentPage } } / { { pageCount } } < / template >
< span @click ="changePdfPage(1)" class = "turn el-icon-arrow-right" < template v-if ="showMask2" >
: class = "{grey: currentPage==pageCount}" > < / span > < div class = "excel-mask1" style = "height: 48px;" > < / div >
< / p > < / template >
< div style = ' color : # 393A3D ; height : 30px ; < / template >
background : # 393 A3D ; ' > < / div > < div class = "pdf inner" v -else -if = " pdfSrc " >
< pdf < p class = "arrow" >
class = "pdf-wrap" < span @click ="changePdfPage(0)" class = "turn el-icon-arrow-left"
: src = "pdfSrc" : class = "{grey: currentPage==1}" > < / span >
: page = "currentPage" { { currentPage } } / { { pageCount } }
@ num - pages = "pageCount=$event" < span @click ="changePdfPage(1)" class = "turn el-icon-arrow-right"
@ page - loaded = "currentPage=$event" : class = "{grey: currentPage==pageCount}" > < / span >
@ loaded = "loadPdfHandler" > < / p >
< / pdf > < div style = 'color:#393A3D;height: 30px;background: #393A3D;' > < / div >
< / div > < pdf
< div class = "inner" v -else -if = " playAuth " > class = "pdf-wrap"
< div class = "video_wid" id = "player" > < / div > : src = "pdfSrc"
< / div > : page = "currentPage"
@ num - pages = "pageCount=$event"
@ page - loaded = "currentPage=$event"
@ loaded = "loadPdfHandler" >
< / pdf >
< / div > < / div >
< div class = "catalog flex-1" > < div class = "inner" v -else -if = " playAuth " >
< div class = "m-b-20" > < div class = "video_wid" id = "player" > < / div >
< el -button type = "primary" @click ="goSystem" style = "width: 100%; height: 50px; font-size: 18px" > 进 入 实 验 < / e l - b u t t o n > < / div >
< / div > < / div >
< div class = "list" > < div class = "catalog" >
< h4 class = "title" > { { courseName } } < / h4 > < el -button class = "entry" type = "primary" @click ="goSystem" > 进 入 实 验 < / el -button >
< div class = "chapters" > < div class = "list" >
< template v-if ="chapterList.length" > < h4 class = "title" > { { courseName } } < / h4 >
< div class = "chapter" v-for ="(item,index) in chapterList" :key ="index" > < div class = "chapters" >
< div class = "chapterName" > { { item . name } } < / div > < template v-if ="chapterList.length" >
< div class = "section" v-if ="item.subsectionList.length" > < div class = "chapter" v-for ="(item,index) in chapterList" :key ="index" >
< div v-for ="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)" > < div class = "chapterName" > { { item . name } } < / div >
< p class = "sectionName" : class = "{active: curLink === `${item.name}${section.name}`}" > { { section . name } } < / p > < div class = "section" v-if ="item.subsectionList.length" >
< / div > < p class = "sectionName" : class = "{active: curLink === `${item.name}${section.name}`}" v-for ="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)" >
< / div > < img v-if ="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="" >
< img v -else src = "@/assets/img/exts/video.png" alt = "" >
{ { section . name } }
< / p >
< / div > < / div >
< / template > < / div >
< / div > < / template >
< / div > < / div >
< / div > < / div >
< / div > < / div >
< / e l - c a r d > < / div >
< el -card shadow = "hover" class = "m-b-20 "> < div class = "page ">
< h4 style = "margin-bottom: 10px" > 课程简介 < / h4 > < h6 class = "l-title" >
< p > { { briefIntroduction } } < / p > < img src = "@/assets/img/course1.png" alt = "" >
< / e l - c a r d > 课程简介
< el -card shadow = "hover" class = "m-b-20" > < / h6 >
< h4 style = "marg in-bot tom: 10px " > 课程目标 < / h4 > < p class = "intr o" > { { briefIntroduction } } < / p >
< p > { { teachingObjectives } } < / p > < / div >
< / e l - c a r d > < div class = "page" >
<!-- < h6 class = "l-title" >
< el -card shadow = "hover" class = "m-b-20 " > < img src = "@/assets/img/course2.png" alt = "" >
< h4 style = "margin-bottom: 10px" > 课程进度 < / h4 > 课程目标
< el -progress :text-inside ="true" :stroke-widt h="1 6" :percentage ="70" > < / e l - p r o g r e s s > < / h6 >
< / e l - c a r d > < p class = "intro" > { { teachingObjectives } } < / p >
-- > < / div >
< / div > < / div >
< / template > < / template >
@ -97,9 +90,9 @@ import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css" ; import "quill/dist/quill.snow.css" ;
import "quill/dist/quill.bubble.css" ; import "quill/dist/quill.bubble.css" ;
import bus from "@/libs/bus" ; import bus from "@/libs/bus" ;
import breadcrumb from '@/components/breadcrumb'
export default { export default {
components : { pdf } , components : { pdf , breadcrumb } ,
data ( ) { data ( ) {
return { return {
courseId : this . $route . query . courseId , courseId : this . $route . query . courseId ,
@ -159,8 +152,8 @@ export default {
async getChapter ( ) { async getChapter ( ) {
let res = await this . $get ( ` ${ this . api . curriculumChapter } / ${ this . courseId } ` ) ; let res = await this . $get ( ` ${ this . api . curriculumChapter } / ${ this . courseId } ` ) ;
this . chapterList = res . chapterList ; this . chapterList = res . chapterList ;
console . log ( res . chapterList ) ;
if ( this . chapterList . length && this . chapterList [ 0 ] . subsectionList && this . chapterList [ 0 ] . subsectionList . length ) { if ( this . chapterList . length && this . chapterList [ 0 ] . subsectionList && this . chapterList [ 0 ] . subsectionList . length ) {
/ / c o n s o l e . l o g ( t h i s . c h a p t e r L i s t [ 0 ] . s u b s e c t i o n L i s t [ 0 ] ) ;
this . preview ( this . chapterList [ 0 ] . subsectionList [ 0 ] , this . chapterList [ 0 ] . name ) ; this . preview ( this . chapterList [ 0 ] . subsectionList [ 0 ] , this . chapterList [ 0 ] . name ) ;
} }
} , } ,
@ -328,7 +321,16 @@ $height: 700px;
height : $height ! important ; height : $height ! important ;
border : 0 ; border : 0 ;
} }
. page {
margin : 12 px 0 ;
. intro {
font - size : 16 px ;
color : # 333 ;
line - height : 24 px ;
}
}
. cover { . cover {
flex : 1 ;
img { img {
border - radius : 8 px ; border - radius : 8 px ;
} }
@ -355,17 +357,23 @@ $height: 700px;
outline : none ; outline : none ;
} }
. catalog { . catalog {
margin - left : 40 px ; width : 296 px ;
padding : 16 px ;
margin - left : 12 px ;
background - color : # 252528 ;
. entry {
width : 100 % ;
padding : 10 px 15 px ;
margin - bottom : 16 px ;
}
} }
. list { . list {
height : calc ( 700 px - 70 px ) ; height : calc ( 700 px - 82 px ) ;
overflow - y : auto ; overflow - y : auto ;
padding : 24 px 16 px ;
background : # fff ;
. title { . title {
margin - bottom : 8 px ; margin - bottom : 11 px ;
color : rgba ( 0 , 0 , 0 , 0.85 ) ; color : # fff ;
font - size : 20 px ; font - size : 16 px ;
} }
. desc - wrap { . desc - wrap {
position : relative ; position : relative ;
@ -413,21 +421,24 @@ $height: 700px;
. chapter { . chapter {
margin - bottom : 20 px ; margin - bottom : 20 px ;
. chapterName { . chapterName {
color : rgba ( 0 , 0 , 0 , 0.85 ) ; color : # fff ;
font - size : 16 px ; font - size : 14 px ;
} }
. section { . section {
padding : 5 px 15 px ; padding : 5 px 15 px ;
margin - top : 8 px ; margin - top : 12 px ;
background : rgba ( 0 , 0 , 0 , 0.02 ) ; background - color : # 121214 ;
. sectionName { . sectionName {
margin : 10 px 0 ; margin : 12 px 0 ;
font - size : 14 px ; font - size : 14 px ;
color : rgba ( 0 , 0 , 0 , 0.65 ) ; color : # 999 ;
cursor : pointer ; cursor : pointer ;
@ include ellipsis ; @ include ellipsis ;
img {
margin - right : 8 px ;
}
& . active { & . active {
color : # 9278 FF ; color : # fff ;
} }
} }
} }
@ -529,5 +540,4 @@ $height: 700px;
margin : 0 auto ; margin : 0 auto ;
} }
} }
< / style > < / style >
