|
|
|
@ -90,7 +90,8 @@ |
|
|
|
|
@click="toSystem">进入系统</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="course"> |
|
|
|
|
<div class="course" |
|
|
|
|
id="part0"> |
|
|
|
|
<div class="detail"> |
|
|
|
|
<ul class="tab"> |
|
|
|
|
<li v-for="(tab, i) in tabs" |
|
|
|
@ -99,51 +100,48 @@ |
|
|
|
|
@click="tabChange(tab)">{{ tab.name }}</li> |
|
|
|
|
</ul> |
|
|
|
|
<div class="courses"> |
|
|
|
|
<template v-if="!curTab"> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="form.mall.detailedIntroduction"></div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<div class="chapter" |
|
|
|
|
v-for="(item, i) in chapterList" |
|
|
|
|
:key="i"> |
|
|
|
|
<div class="chapterName">{{ item.name }}</div> |
|
|
|
|
<div class="section" |
|
|
|
|
v-if="item.subsectionList.length"> |
|
|
|
|
<div v-for="(section, j) in item.subsectionList" |
|
|
|
|
:key="j" |
|
|
|
|
@click="toPreview(i, j)"> |
|
|
|
|
<div class="sectionName" |
|
|
|
|
:title="section.name" |
|
|
|
|
:class="{active: curLink === `${item.name}${section.name}`}"> |
|
|
|
|
<div class="val"> |
|
|
|
|
<img v-if="section.fileType === 'pptx'" |
|
|
|
|
src="@/assets/img/exts/ppt.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'mp4'" |
|
|
|
|
src="@/assets/img/exts/video.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" |
|
|
|
|
src="@/assets/img/exts/word.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'txt'" |
|
|
|
|
src="@/assets/img/exts/txt.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'pdf'" |
|
|
|
|
src="@/assets/img/exts/pdf.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else |
|
|
|
|
src="@/assets/img/exts/pic.png" |
|
|
|
|
alt=""> |
|
|
|
|
{{ section.name }} |
|
|
|
|
</div> |
|
|
|
|
<i v-if="!form.goodsRes.logoOfOurSchool && j" |
|
|
|
|
class="icon el-icon-lock"></i> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="form.mall.detailedIntroduction"></div> |
|
|
|
|
<div class="chapter" |
|
|
|
|
id="part1" |
|
|
|
|
v-for="(item, i) in chapterList" |
|
|
|
|
:key="i"> |
|
|
|
|
<div class="chapterName">{{ item.name }}</div> |
|
|
|
|
<div class="section" |
|
|
|
|
v-if="item.subsectionList.length"> |
|
|
|
|
<div v-for="(section, j) in item.subsectionList" |
|
|
|
|
:key="j" |
|
|
|
|
@click="toPreview(i, j)"> |
|
|
|
|
<div class="sectionName" |
|
|
|
|
:title="section.name" |
|
|
|
|
:class="{active: curLink === `${item.name}${section.name}`}"> |
|
|
|
|
<div class="val"> |
|
|
|
|
<img v-if="section.fileType === 'pptx'" |
|
|
|
|
src="@/assets/img/exts/ppt.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'mp4'" |
|
|
|
|
src="@/assets/img/exts/video.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" |
|
|
|
|
src="@/assets/img/exts/word.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'txt'" |
|
|
|
|
src="@/assets/img/exts/txt.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'pdf'" |
|
|
|
|
src="@/assets/img/exts/pdf.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else |
|
|
|
|
src="@/assets/img/exts/pic.png" |
|
|
|
|
alt=""> |
|
|
|
|
{{ section.name }} |
|
|
|
|
</div> |
|
|
|
|
<i v-if="!form.goodsRes.logoOfOurSchool && j" |
|
|
|
|
class="icon el-icon-lock"></i> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="products"> |
|
|
|
@ -304,6 +302,9 @@ export default { |
|
|
|
|
// tab切换 |
|
|
|
|
tabChange ({ id }) { |
|
|
|
|
this.curTab = id |
|
|
|
|
document.querySelector(`#part${id}`).scrollIntoView({ |
|
|
|
|
behavior: 'smooth' |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 跳转播放资源 |
|
|
|
|
toPreview (i, j) { |
|
|
|
@ -470,10 +471,12 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tab { |
|
|
|
|
z-index: 100; |
|
|
|
|
position: sticky; |
|
|
|
|
// top: 120px; |
|
|
|
|
display: inline-flex; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
top: 0; |
|
|
|
|
display: flex; |
|
|
|
|
padding: 10px 10px 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
li { |
|
|
|
|
position: relative; |
|
|
|
|
margin-right: 20px; |
|
|
|
@ -503,11 +506,11 @@ export default { |
|
|
|
|
padding: 20px 24px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.courses { |
|
|
|
|
margin-top: 40px; |
|
|
|
|
padding-top: 10px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
/deep/.des { |
|
|
|
|
div, |
|
|
|
|
p, |
|
|
|
@ -521,6 +524,7 @@ export default { |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
.chapter { |
|
|
|
|
padding-top: 60px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
.chapterName { |
|
|
|
|