|
|
|
|
@ -1,76 +1,111 @@ |
|
|
|
|
<template> |
|
|
|
|
<!-- 课程预览 --> |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="goBack" :content="'课程预览'"></el-page-header> |
|
|
|
|
<!-- 课程预览 --> |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="hover" |
|
|
|
|
class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="goBack" |
|
|
|
|
:content="'课程预览'"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<el-card shadow="hover" |
|
|
|
|
class="m-b-20" |
|
|
|
|
style="background: none;"> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<div class="cover" |
|
|
|
|
:class="{'is-word': showMask1}"> |
|
|
|
|
<img v-if="coverUrl" |
|
|
|
|
:src="coverUrl" |
|
|
|
|
alt="" |
|
|
|
|
width="100%" |
|
|
|
|
height="100%"> |
|
|
|
|
<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: 500px;height: 30px;top: 53px;right: 320px"></div> |
|
|
|
|
<div class="mask" |
|
|
|
|
style="width: 175px;height: 30px;top: 53px;right: 5px"></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> |
|
|
|
|
<div class="pdf inner" |
|
|
|
|
v-else-if="pdfSrc"> |
|
|
|
|
<p class="arrow"> |
|
|
|
|
<span @click="changePdfPage(0)" |
|
|
|
|
class="turn el-icon-arrow-left" |
|
|
|
|
:class="{grey: currentPage==1}"></span> |
|
|
|
|
{{ currentPage }} / {{ pageCount }} |
|
|
|
|
<span @click="changePdfPage(1)" |
|
|
|
|
class="turn el-icon-arrow-right" |
|
|
|
|
:class="{grey: currentPage==pageCount}"></span> |
|
|
|
|
</p> |
|
|
|
|
<pdf class="pdf-wrap" |
|
|
|
|
:src="pdfSrc" |
|
|
|
|
:page="currentPage" |
|
|
|
|
@num-pages="pageCount=$event" |
|
|
|
|
@page-loaded="currentPage=$event" |
|
|
|
|
@loaded="loadPdfHandler"> |
|
|
|
|
</pdf> |
|
|
|
|
</div> |
|
|
|
|
<div class="inner" |
|
|
|
|
v-else-if="playAuth"> |
|
|
|
|
<div class="video_wid" |
|
|
|
|
id="player"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="catalog flex-1"> |
|
|
|
|
<div class="list"> |
|
|
|
|
<h4 class="title">{{ courseName }}</h4> |
|
|
|
|
<div class="desc-wrap"> |
|
|
|
|
<div class="desc" |
|
|
|
|
:class="{active: desShrink}" |
|
|
|
|
v-html="description"></div> |
|
|
|
|
<i class="arrow" |
|
|
|
|
:class="{active: desShrink}" |
|
|
|
|
v-if="description.length > 40"> |
|
|
|
|
<span>...</span> |
|
|
|
|
<img src="@/assets/img/arrow-down.png" |
|
|
|
|
alt="" |
|
|
|
|
@click="desShrink = !desShrink"> |
|
|
|
|
</i> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<el-card shadow="hover" class="m-b-20" style="background: none;"> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<div class="cover" :class="{'is-word': showMask1}"> |
|
|
|
|
<img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%"> |
|
|
|
|
<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: 500px;height: 30px;top: 53px;right: 320px"></div> |
|
|
|
|
<div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></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> |
|
|
|
|
<div class="pdf inner" v-else-if="pdfSrc"> |
|
|
|
|
<p class="arrow"> |
|
|
|
|
<span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span> |
|
|
|
|
{{ currentPage }} / {{ pageCount }} |
|
|
|
|
<span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span> |
|
|
|
|
</p> |
|
|
|
|
<pdf |
|
|
|
|
class="pdf-wrap" |
|
|
|
|
:src="pdfSrc" |
|
|
|
|
:page="currentPage" |
|
|
|
|
@num-pages="pageCount=$event" |
|
|
|
|
@page-loaded="currentPage=$event" |
|
|
|
|
@loaded="loadPdfHandler"> |
|
|
|
|
</pdf> |
|
|
|
|
</div> |
|
|
|
|
<div class="inner" v-else-if="playAuth"> |
|
|
|
|
<div class="video_wid" id="player"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="catalog flex-1"> |
|
|
|
|
<div class="list"> |
|
|
|
|
<h4 class="title">{{ courseName }}</h4> |
|
|
|
|
<div class="desc-wrap"> |
|
|
|
|
<div class="desc" :class="{active: desShrink}" v-html="description"></div> |
|
|
|
|
<i class="arrow" :class="{active: desShrink}" v-if="description.length > 40"> |
|
|
|
|
<span>...</span> |
|
|
|
|
<img src="@/assets/img/arrow-down.png" alt="" @click="desShrink = !desShrink"> |
|
|
|
|
</i> |
|
|
|
|
</div> |
|
|
|
|
<div class="chapters"> |
|
|
|
|
<template v-if="videoList.length"> |
|
|
|
|
<div class="chapter" v-for="(item,index) in videoList" :key="index"> |
|
|
|
|
<div class="chapterName">{{ item.name }}</div> |
|
|
|
|
<div class="section" v-if="item.subsectionList.length"> |
|
|
|
|
<div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)"> |
|
|
|
|
<p class="sectionName" :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
<div class="chapters"> |
|
|
|
|
<template v-if="videoList.length"> |
|
|
|
|
<div class="chapter" |
|
|
|
|
v-for="(item,index) in videoList" |
|
|
|
|
:key="index"> |
|
|
|
|
<div class="chapterName">{{ item.name }}</div> |
|
|
|
|
<div class="section" |
|
|
|
|
v-if="item.subsectionList.length"> |
|
|
|
|
<div v-for="(section,i) in item.subsectionList" |
|
|
|
|
:key="i" |
|
|
|
|
@click="preview(section, item.name)"> |
|
|
|
|
<p class="sectionName" |
|
|
|
|
:class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -82,177 +117,178 @@ import "quill/dist/quill.snow.css"; |
|
|
|
|
import "quill/dist/quill.bubble.css"; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "coursePreview", |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
id: this.$route.query.id, |
|
|
|
|
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4", |
|
|
|
|
videoSrc: "", |
|
|
|
|
videoList: [], |
|
|
|
|
courseName: "", |
|
|
|
|
description: "", |
|
|
|
|
coverUrl: "", |
|
|
|
|
playAuth: "", |
|
|
|
|
player: null, |
|
|
|
|
previewImg: "", |
|
|
|
|
iframeSrc: "", |
|
|
|
|
isWord: false, |
|
|
|
|
isPPT: false, |
|
|
|
|
isExcel: false, |
|
|
|
|
showMask: false, |
|
|
|
|
showMask1: false, |
|
|
|
|
showMask2: false, |
|
|
|
|
closePosi: { |
|
|
|
|
top: "80px" |
|
|
|
|
}, |
|
|
|
|
pdfVisible: false, |
|
|
|
|
pdfSrc: "", |
|
|
|
|
currentPage: 0, // pdf文件页码 |
|
|
|
|
pageCount: 0, // pdf文件总页数 |
|
|
|
|
fileType: "pdf", // 文件类型 |
|
|
|
|
desShrink: false, |
|
|
|
|
curLink: "", // 当前选中 |
|
|
|
|
}; |
|
|
|
|
name: "coursePreview", |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
id: this.$route.query.id, |
|
|
|
|
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4", |
|
|
|
|
videoSrc: "", |
|
|
|
|
videoList: [], |
|
|
|
|
courseName: "", |
|
|
|
|
description: "", |
|
|
|
|
coverUrl: "", |
|
|
|
|
playAuth: "", |
|
|
|
|
player: null, |
|
|
|
|
previewImg: "", |
|
|
|
|
iframeSrc: "", |
|
|
|
|
isWord: false, |
|
|
|
|
isPPT: false, |
|
|
|
|
isExcel: false, |
|
|
|
|
showMask: false, |
|
|
|
|
showMask1: false, |
|
|
|
|
showMask2: false, |
|
|
|
|
closePosi: { |
|
|
|
|
top: "80px" |
|
|
|
|
}, |
|
|
|
|
pdfVisible: false, |
|
|
|
|
pdfSrc: "", |
|
|
|
|
currentPage: 0, // pdf文件页码 |
|
|
|
|
pageCount: 0, // pdf文件总页数 |
|
|
|
|
fileType: "pdf", // 文件类型 |
|
|
|
|
desShrink: false, |
|
|
|
|
curLink: "", // 当前选中 |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { pdf }, |
|
|
|
|
mounted () { |
|
|
|
|
this.insertScript(); |
|
|
|
|
this.getData(); |
|
|
|
|
this.getChapter(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
goBack () { |
|
|
|
|
this.$router.back(); |
|
|
|
|
}, |
|
|
|
|
async getData () { |
|
|
|
|
let res = await this.$post(`${this.api.findTheoreticalCourse}?id=${this.id}`); |
|
|
|
|
this.courseName = res.data.courseName; |
|
|
|
|
this.description = res.data.courseIntroduction; |
|
|
|
|
this.coverUrl = res.data.coverUrl; |
|
|
|
|
}, |
|
|
|
|
components: { pdf }, |
|
|
|
|
mounted() { |
|
|
|
|
this.insertScript(); |
|
|
|
|
this.getData(); |
|
|
|
|
this.getChapter(); |
|
|
|
|
async getChapter () { |
|
|
|
|
let res = await this.$get(`${this.api.queryChaptersTheoretical}?courseId=${this.id}`); |
|
|
|
|
this.videoList = res.chapterList; |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
goBack() { |
|
|
|
|
this.$router.back(); |
|
|
|
|
}, |
|
|
|
|
async getData() { |
|
|
|
|
let res = await this.$post(`${this.api.findTheoreticalCourse}?id=${this.id}`); |
|
|
|
|
this.courseName = res.data.courseName; |
|
|
|
|
this.description = res.data.courseIntroduction; |
|
|
|
|
this.coverUrl = res.data.coverUrl; |
|
|
|
|
}, |
|
|
|
|
async getChapter() { |
|
|
|
|
let res = await this.$get(`${this.api.queryChapters}?courseId=${this.id}`); |
|
|
|
|
this.videoList = res.chapterList; |
|
|
|
|
}, |
|
|
|
|
insertScript() { |
|
|
|
|
const linkTag = document.createElement("link"); |
|
|
|
|
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.type = "text/javascript"; |
|
|
|
|
scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"; |
|
|
|
|
document.body.appendChild(scriptTag); |
|
|
|
|
}, |
|
|
|
|
transferType(ext) { |
|
|
|
|
if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片"; |
|
|
|
|
if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频"; |
|
|
|
|
return ext; |
|
|
|
|
}, |
|
|
|
|
preview(row, chapterName) { |
|
|
|
|
this.curLink = `${chapterName}${row.name}`; |
|
|
|
|
this.player = null; |
|
|
|
|
this.playauth = ""; |
|
|
|
|
this.coverUrl = ""; |
|
|
|
|
this.pdfSrc = ""; |
|
|
|
|
this.iframeSrc = ""; |
|
|
|
|
if (this.transferType(row.fileType) == "视频") { |
|
|
|
|
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => { |
|
|
|
|
this.playAuth = res.data.playAuth; |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
if (this.player) { |
|
|
|
|
this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth); |
|
|
|
|
} else { |
|
|
|
|
this.player = new Aliplayer({ |
|
|
|
|
id: "player", |
|
|
|
|
width: "100%", |
|
|
|
|
autoplay: false, |
|
|
|
|
vid: row.fileId, |
|
|
|
|
playauth: this.playAuth, |
|
|
|
|
encryptType: 1 //当播放私有加密流时需要设置。 |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
} else if (this.transferType(row.fileType) == "图片") { |
|
|
|
|
this.coverUrl = row.fileUrl; |
|
|
|
|
} else if (row.fileType == "pdf") { |
|
|
|
|
this.pdfSrc = row.fileUrl; |
|
|
|
|
this.pdfVisible = true; |
|
|
|
|
insertScript () { |
|
|
|
|
const linkTag = document.createElement("link"); |
|
|
|
|
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.type = "text/javascript"; |
|
|
|
|
scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"; |
|
|
|
|
document.body.appendChild(scriptTag); |
|
|
|
|
}, |
|
|
|
|
transferType (ext) { |
|
|
|
|
if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片"; |
|
|
|
|
if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频"; |
|
|
|
|
return ext; |
|
|
|
|
}, |
|
|
|
|
preview (row, chapterName) { |
|
|
|
|
this.curLink = `${chapterName}${row.name}`; |
|
|
|
|
this.player = null; |
|
|
|
|
this.playauth = ""; |
|
|
|
|
this.coverUrl = ""; |
|
|
|
|
this.pdfSrc = ""; |
|
|
|
|
this.iframeSrc = ""; |
|
|
|
|
if (this.transferType(row.fileType) == "视频") { |
|
|
|
|
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => { |
|
|
|
|
this.playAuth = res.data.playAuth; |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
if (this.player) { |
|
|
|
|
this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth); |
|
|
|
|
} else { |
|
|
|
|
this.$get(`${this.api.getSubsection}?subsectionId=${row.id}`).then(res => { |
|
|
|
|
if (row.fileType == "pptx") { |
|
|
|
|
this.isPPT = true; |
|
|
|
|
this.isWord = false; |
|
|
|
|
this.isExcel = false; |
|
|
|
|
} else if (row.fileType == "doc" || row.fileType == "docx") { |
|
|
|
|
this.isPPT = false; |
|
|
|
|
this.isWord = true; |
|
|
|
|
this.isExcel = false; |
|
|
|
|
} else if (row.fileType == "xls" || row.fileType == "xlsx") { |
|
|
|
|
this.isExcel = true; |
|
|
|
|
this.isPPT = false; |
|
|
|
|
this.isWord = false; |
|
|
|
|
} else { |
|
|
|
|
this.isPPT = false; |
|
|
|
|
this.isWord = false; |
|
|
|
|
this.isExcel = false; |
|
|
|
|
} |
|
|
|
|
if (this.isPPT) { |
|
|
|
|
this.showMask = true; |
|
|
|
|
} else { |
|
|
|
|
this.showMask = false; |
|
|
|
|
} |
|
|
|
|
if (this.isWord) { |
|
|
|
|
this.showMask1 = true; |
|
|
|
|
} else { |
|
|
|
|
this.showMask1 = false; |
|
|
|
|
} |
|
|
|
|
if (this.isExcel) { |
|
|
|
|
this.showMask2 = true; |
|
|
|
|
} else { |
|
|
|
|
this.showMask2 = false; |
|
|
|
|
} |
|
|
|
|
this.iframeSrc = res.previewUrl; |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
}); |
|
|
|
|
this.player = new Aliplayer({ |
|
|
|
|
id: "player", |
|
|
|
|
width: "100%", |
|
|
|
|
autoplay: false, |
|
|
|
|
vid: row.fileId, |
|
|
|
|
playauth: this.playAuth, |
|
|
|
|
encryptType: 1 //当播放私有加密流时需要设置。 |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
closePlayer() { |
|
|
|
|
this.playAuth = ""; |
|
|
|
|
this.player.pause(); |
|
|
|
|
}, |
|
|
|
|
closeIframe() { |
|
|
|
|
this.iframeSrc = ""; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
} else if (this.transferType(row.fileType) == "图片") { |
|
|
|
|
this.coverUrl = row.fileUrl; |
|
|
|
|
} else if (row.fileType == "pdf") { |
|
|
|
|
this.pdfSrc = row.fileUrl; |
|
|
|
|
this.pdfVisible = true; |
|
|
|
|
} else { |
|
|
|
|
this.$get(`${this.api.getSubsection}?subsectionId=${row.id}`).then(res => { |
|
|
|
|
if (row.fileType == "pptx") { |
|
|
|
|
this.isPPT = true; |
|
|
|
|
this.isWord = false; |
|
|
|
|
this.isExcel = false; |
|
|
|
|
} else if (row.fileType == "doc" || row.fileType == "docx") { |
|
|
|
|
this.isPPT = false; |
|
|
|
|
this.isWord = true; |
|
|
|
|
this.isExcel = false; |
|
|
|
|
} else if (row.fileType == "xls" || row.fileType == "xlsx") { |
|
|
|
|
this.isExcel = true; |
|
|
|
|
this.isPPT = false; |
|
|
|
|
this.isWord = false; |
|
|
|
|
} else { |
|
|
|
|
this.isPPT = false; |
|
|
|
|
this.isWord = false; |
|
|
|
|
this.isExcel = false; |
|
|
|
|
} |
|
|
|
|
if (this.isPPT) { |
|
|
|
|
this.showMask = true; |
|
|
|
|
} else { |
|
|
|
|
this.showMask = false; |
|
|
|
|
} |
|
|
|
|
if (this.isWord) { |
|
|
|
|
this.showMask1 = true; |
|
|
|
|
} else { |
|
|
|
|
this.showMask1 = false; |
|
|
|
|
}, |
|
|
|
|
closePdf() { |
|
|
|
|
this.pdfSrc = ""; |
|
|
|
|
this.currentPage = 1; |
|
|
|
|
}, |
|
|
|
|
changePdfPage(val) { |
|
|
|
|
if (val === 0 && this.currentPage > 1) { |
|
|
|
|
this.currentPage--; |
|
|
|
|
} |
|
|
|
|
if (val === 1 && this.currentPage < this.pageCount) { |
|
|
|
|
this.currentPage++; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
loadPdfHandler(e) { |
|
|
|
|
this.currentPage = 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (this.isExcel) { |
|
|
|
|
this.showMask2 = true; |
|
|
|
|
} else { |
|
|
|
|
this.showMask2 = false; |
|
|
|
|
} |
|
|
|
|
this.iframeSrc = res.previewUrl; |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
closePlayer () { |
|
|
|
|
this.playAuth = ""; |
|
|
|
|
this.player.pause(); |
|
|
|
|
}, |
|
|
|
|
closeIframe () { |
|
|
|
|
this.iframeSrc = ""; |
|
|
|
|
this.showMask = false; |
|
|
|
|
this.showMask1 = false; |
|
|
|
|
}, |
|
|
|
|
closePdf () { |
|
|
|
|
this.pdfSrc = ""; |
|
|
|
|
this.currentPage = 1; |
|
|
|
|
}, |
|
|
|
|
changePdfPage (val) { |
|
|
|
|
if (val === 0 && this.currentPage > 1) { |
|
|
|
|
this.currentPage--; |
|
|
|
|
} |
|
|
|
|
if (val === 1 && this.currentPage < this.pageCount) { |
|
|
|
|
this.currentPage++; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
loadPdfHandler (e) { |
|
|
|
|
this.currentPage = 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
$height: 700px; |
|
|
|
|
.video_wid, .cover { |
|
|
|
|
.video_wid, |
|
|
|
|
.cover { |
|
|
|
|
position: relative; |
|
|
|
|
width: 76%; |
|
|
|
|
max-width: 1400px; |
|
|
|
|
@ -274,7 +310,8 @@ $height: 700px; |
|
|
|
|
height: $height !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video_wid, .inner { |
|
|
|
|
.video_wid, |
|
|
|
|
.inner { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100% !important; |
|
|
|
|
border: 0; |
|
|
|
|
@ -378,8 +415,8 @@ $height: 700px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.65); |
|
|
|
|
cursor: pointer; |
|
|
|
|
&.active{ |
|
|
|
|
color: #9278FF; |
|
|
|
|
&.active { |
|
|
|
|
color: #9278ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -388,10 +425,10 @@ $height: 700px; |
|
|
|
|
|
|
|
|
|
.el-image-viewer__wrapper { |
|
|
|
|
transform: translateY(-10px); |
|
|
|
|
transition: transform .5s; |
|
|
|
|
transition: transform 0.5s; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
transform: translateY(0) |
|
|
|
|
transform: translateY(0); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
