|
|
|
@ -1,42 +1,63 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div style="padding: 24px"> |
|
|
|
<div style="padding: 24px"> |
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
<el-card shadow="hover" |
|
|
|
|
|
|
|
class="m-b-20"> |
|
|
|
<div class="flex-between"> |
|
|
|
<div class="flex-between"> |
|
|
|
<el-page-header @back="goBack" :content="curriculumName"></el-page-header> |
|
|
|
<el-page-header @back="goBack" |
|
|
|
|
|
|
|
:content="curriculumName"></el-page-header> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
<el-card shadow="hover" class="m-b-20" style="background: none;"> |
|
|
|
<el-card shadow="hover" |
|
|
|
|
|
|
|
class="m-b-20" |
|
|
|
|
|
|
|
style="background: none;"> |
|
|
|
<div class="flex"> |
|
|
|
<div class="flex"> |
|
|
|
<div class="cover" :class="{'is-word': showMask1}"> |
|
|
|
<div class="cover" |
|
|
|
|
|
|
|
:class="{'is-word': showMask1}"> |
|
|
|
<!--实验台不显示课程封面--> |
|
|
|
<!--实验台不显示课程封面--> |
|
|
|
<img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%"> |
|
|
|
<img v-if="coverUrl" |
|
|
|
|
|
|
|
:src="coverUrl" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
width="100%" |
|
|
|
|
|
|
|
height="100%"> |
|
|
|
<template v-else-if="iframeSrc"> |
|
|
|
<template v-else-if="iframeSrc"> |
|
|
|
<iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe> |
|
|
|
<iframe class="inner fileIframe" |
|
|
|
|
|
|
|
id="fileIframe" |
|
|
|
|
|
|
|
:src="iframeSrc" |
|
|
|
|
|
|
|
frameborder="0"></iframe> |
|
|
|
<template v-if="showMask"> |
|
|
|
<template v-if="showMask"> |
|
|
|
<div class="mask" style="width:100%;background: #393A3D;height: 30px;top: 53px;"></div> |
|
|
|
<div class="mask" |
|
|
|
<div class="mask" style="width:100%;background: #393A3D;height: 30px;top: 53px;"></div> |
|
|
|
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> |
|
|
|
<template v-if="showMask1"> |
|
|
|
<template v-if="showMask1"> |
|
|
|
<div class="word-mask" style="height: 40px;"></div> |
|
|
|
<div class="word-mask" |
|
|
|
|
|
|
|
style="height: 40px;"></div> |
|
|
|
<div class="word-mask2" |
|
|
|
<div class="word-mask2" |
|
|
|
style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div> |
|
|
|
style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-if="showMask2"> |
|
|
|
<template v-if="showMask2"> |
|
|
|
<div class="excel-mask1" style="height: 48px;"></div> |
|
|
|
<div class="excel-mask1" |
|
|
|
|
|
|
|
style="height: 48px;"></div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<div class="pdf inner" v-else-if="pdfSrc"> |
|
|
|
<div class="pdf inner" |
|
|
|
<img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen"> |
|
|
|
v-else-if="pdfSrc"> |
|
|
|
|
|
|
|
<img class="full" |
|
|
|
|
|
|
|
src="@/assets/img/screen/full.png" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
@click="fullScreen"> |
|
|
|
<p class="arrow"> |
|
|
|
<p class="arrow"> |
|
|
|
<span @click="changePdfPage(0)" class="turn el-icon-arrow-left" |
|
|
|
<span @click="changePdfPage(0)" |
|
|
|
|
|
|
|
class="turn el-icon-arrow-left" |
|
|
|
:class="{grey: currentPage==1}"></span> |
|
|
|
:class="{grey: currentPage==1}"></span> |
|
|
|
{{ currentPage }} / {{ pageCount }} |
|
|
|
{{ currentPage }} / {{ pageCount }} |
|
|
|
<span @click="changePdfPage(1)" class="turn el-icon-arrow-right" |
|
|
|
<span @click="changePdfPage(1)" |
|
|
|
|
|
|
|
class="turn el-icon-arrow-right" |
|
|
|
:class="{grey: currentPage==pageCount}"></span> |
|
|
|
:class="{grey: currentPage==pageCount}"></span> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<div style='color:#393A3D;height: 30px;background: #393A3D;'></div> |
|
|
|
<div style='color:#393A3D;height: 30px;background: #393A3D;'></div> |
|
|
|
<pdf |
|
|
|
<pdf class="pdf-wrap" |
|
|
|
class="pdf-wrap" |
|
|
|
|
|
|
|
:src="pdfSrc" |
|
|
|
:src="pdfSrc" |
|
|
|
:page="currentPage" |
|
|
|
:page="currentPage" |
|
|
|
@num-pages="pageCount=$event" |
|
|
|
@num-pages="pageCount=$event" |
|
|
|
@ -44,47 +65,73 @@ |
|
|
|
@loaded="loadPdfHandler"> |
|
|
|
@loaded="loadPdfHandler"> |
|
|
|
</pdf> |
|
|
|
</pdf> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="inner" v-else-if="playAuth"> |
|
|
|
<div class="inner" |
|
|
|
<div class="video_wid" id="player"></div> |
|
|
|
v-else-if="playAuth"> |
|
|
|
|
|
|
|
<div class="video_wid" |
|
|
|
|
|
|
|
id="player"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="catalog"> |
|
|
|
<div class="catalog"> |
|
|
|
<div class="m-b-20"> |
|
|
|
<div class="m-b-20"> |
|
|
|
<el-button v-if="!overdue" class="entry" type="primary" size="small" @click="showBuy">续费</el-button> |
|
|
|
<el-button v-if="!overdue" |
|
|
|
<el-button v-else class="entry" type="primary" @click="entry">进 入 实 验</el-button> |
|
|
|
class="entry" |
|
|
|
|
|
|
|
type="primary" |
|
|
|
|
|
|
|
size="small" |
|
|
|
|
|
|
|
@click="showBuy">续费</el-button> |
|
|
|
|
|
|
|
<el-button v-else |
|
|
|
|
|
|
|
class="entry" |
|
|
|
|
|
|
|
type="primary" |
|
|
|
|
|
|
|
@click="entry">进 入 实 验</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="list"> |
|
|
|
<div class="list"> |
|
|
|
<h4 class="title">{{ courseName }}</h4> |
|
|
|
<h4 class="title">{{ courseName }}</h4> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h6 class="pro-title">当前教学进度</h6> |
|
|
|
<h6 class="pro-title">当前教学进度</h6> |
|
|
|
<el-progress :stroke-width="12" :percentage="schedule" :format="percentFormat" :text-color="'#fff'"></el-progress> |
|
|
|
<el-progress :stroke-width="12" |
|
|
|
|
|
|
|
:percentage="schedule" |
|
|
|
|
|
|
|
:format="percentFormat" |
|
|
|
|
|
|
|
:text-color="'#fff'"></el-progress> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="types"> |
|
|
|
<div class="types"> |
|
|
|
<div :class="['item', { active: type === 1 }]" @click="typeChange(1)"> |
|
|
|
<div :class="['item', { active: type === 1 }]" |
|
|
|
|
|
|
|
@click="typeChange(1)"> |
|
|
|
<i class="icon el-icon-notebook-2"></i> 目录 |
|
|
|
<i class="icon el-icon-notebook-2"></i> 目录 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div :class="['item', { active: type === 2 }]" @click="typeChange(2)"> |
|
|
|
<div :class="['item', { active: type === 2 }]" |
|
|
|
|
|
|
|
@click="typeChange(2)"> |
|
|
|
<i class="icon el-icon-timer"></i> 教学进度 |
|
|
|
<i class="icon el-icon-timer"></i> 教学进度 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="chapters"> |
|
|
|
<div class="chapters"> |
|
|
|
<template v-if="type === 1"> |
|
|
|
<template v-if="type === 1"> |
|
|
|
<template v-if="chapterList.length"> |
|
|
|
<template v-if="chapterList.length"> |
|
|
|
<div class="chapter" v-for="(item,index) in chapterList" :key="index"> |
|
|
|
<div class="chapter" |
|
|
|
|
|
|
|
v-for="(item,index) in chapterList" |
|
|
|
|
|
|
|
:key="index"> |
|
|
|
<div class="chapterName">{{ item.name }}</div> |
|
|
|
<div class="chapterName">{{ item.name }}</div> |
|
|
|
<div class="section" v-if="item.subsectionList.length"> |
|
|
|
<div class="section" |
|
|
|
<div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)"> |
|
|
|
v-if="item.subsectionList.length"> |
|
|
|
<p class="sectionName" :title="section.name" :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p> |
|
|
|
<div v-for="(section,i) in item.subsectionList" |
|
|
|
|
|
|
|
:key="i" |
|
|
|
|
|
|
|
@click="preview(section, item.name)"> |
|
|
|
|
|
|
|
<p class="sectionName" |
|
|
|
|
|
|
|
:title="section.name" |
|
|
|
|
|
|
|
:class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<div v-else class="section"> |
|
|
|
<div v-else |
|
|
|
<p class="sectionName" v-for="(item, i) in progressList" :key="i" :title="item.projectName"> |
|
|
|
class="section"> |
|
|
|
|
|
|
|
<p class="sectionName" |
|
|
|
|
|
|
|
v-for="(item, i) in progressList" |
|
|
|
|
|
|
|
:key="i" |
|
|
|
|
|
|
|
:title="item.projectName"> |
|
|
|
{{ i + 1 }}. |
|
|
|
{{ i + 1 }}. |
|
|
|
{{ item.projectName }} |
|
|
|
{{ item.projectName }} |
|
|
|
<i :class="['icon', item.whetherToStudyOrNot ? 'el-icon-success' : 'circle']" @click.stop="studySection(item)"></i> |
|
|
|
<i :class="['icon', item.whetherToStudyOrNot ? 'el-icon-success' : 'circle']" |
|
|
|
|
|
|
|
@click.stop="studySection(item)"></i> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -93,35 +140,44 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="tabs"> |
|
|
|
<div class="tabs"> |
|
|
|
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: item.id == active}" @click="tabChange(item)">{{ item.name }}</a> |
|
|
|
<a class="item" |
|
|
|
|
|
|
|
v-for="(item, i) in tabs" |
|
|
|
|
|
|
|
:key="i" |
|
|
|
|
|
|
|
:class="{active: item.id == active}" |
|
|
|
|
|
|
|
@click="tabChange(item)">{{ item.name }}</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="tab-content"> |
|
|
|
<div class="tab-content"> |
|
|
|
<template v-if="active === 1"> |
|
|
|
<template v-if="active === 1"> |
|
|
|
<el-card shadow="hover" class="m-t-20 m-b-20"> |
|
|
|
<el-card shadow="hover" |
|
|
|
<h4 style="margin-bottom: 10px;font-size: 16px;">课程简介</h4> |
|
|
|
class="m-t-20 m-b-20"> |
|
|
|
<div v-html="briefIntroduction"></div> |
|
|
|
<div v-html="briefIntroduction"></div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
|
|
|
<h4 style="margin-bottom: 10px;font-size: 16px;">课程目标</h4> |
|
|
|
|
|
|
|
<div v-html="teachingObjectives"></div> |
|
|
|
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-if="active === 2"> |
|
|
|
<template v-if="active === 2"> |
|
|
|
<div class="page"> |
|
|
|
<div class="page"> |
|
|
|
<template v-if="showNoteAdd"> |
|
|
|
<template v-if="showNoteAdd"> |
|
|
|
<el-form class="form" ref="form" label-width="120px" center> |
|
|
|
<el-form class="form" |
|
|
|
<el-form-item class="required" label="笔记标题"> |
|
|
|
ref="form" |
|
|
|
<el-input placeholder="请输入笔记标题" v-model="noteForm.noteName" maxlength="30" style="width: 400px"></el-input> |
|
|
|
label-width="120px" |
|
|
|
|
|
|
|
center> |
|
|
|
|
|
|
|
<el-form-item class="required" |
|
|
|
|
|
|
|
label="笔记标题"> |
|
|
|
|
|
|
|
<el-input placeholder="请输入笔记标题" |
|
|
|
|
|
|
|
v-model="noteForm.noteName" |
|
|
|
|
|
|
|
maxlength="30" |
|
|
|
|
|
|
|
style="width: 400px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="required" label="笔记内容"> |
|
|
|
<el-form-item class="required" |
|
|
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="noteForm.noteContent" :init="editorConfig" /> |
|
|
|
label="笔记内容"> |
|
|
|
|
|
|
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' |
|
|
|
|
|
|
|
v-model="noteForm.noteContent" |
|
|
|
|
|
|
|
:init="editorConfig" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-form> |
|
|
|
<div class="text-right"> |
|
|
|
<div class="text-right"> |
|
|
|
<el-button type="primary" @click="submitNote">保存</el-button> |
|
|
|
<el-button type="primary" |
|
|
|
|
|
|
|
@click="submitNote">保存</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
@ -129,26 +185,34 @@ |
|
|
|
<ul class="filter"> |
|
|
|
<ul class="filter"> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<label>搜索：</label> |
|
|
|
<label>搜索：</label> |
|
|
|
<el-input placeholder="请输入标题" v-model="noteKeyword" clearable></el-input> |
|
|
|
<el-input placeholder="请输入标题" |
|
|
|
|
|
|
|
v-model="noteKeyword" |
|
|
|
|
|
|
|
clearable></el-input> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<el-button type="primary" @click="addNote">新增笔记</el-button> |
|
|
|
<el-button type="primary" |
|
|
|
|
|
|
|
@click="addNote">新增笔记</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-timeline class="timeline"> |
|
|
|
<el-timeline class="timeline"> |
|
|
|
<el-timeline-item placement="top" v-for="(item, i) in notes" :key="i"> |
|
|
|
<el-timeline-item placement="top" |
|
|
|
|
|
|
|
v-for="(item, i) in notes" |
|
|
|
|
|
|
|
:key="i"> |
|
|
|
<p class="sign">{{ item.createTime }}</p> |
|
|
|
<p class="sign">{{ item.createTime }}</p> |
|
|
|
<div class="ver"> |
|
|
|
<div class="ver"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
{{ item.noteName }} |
|
|
|
{{ item.noteName }} |
|
|
|
<span class="action"> |
|
|
|
<span class="action"> |
|
|
|
<i class="el-icon-edit-outline" @click="editNote(item)"></i> |
|
|
|
<i class="el-icon-edit-outline" |
|
|
|
<i class="el-icon-delete" @click="delNote(item)"></i> |
|
|
|
@click="editNote(item)"></i> |
|
|
|
|
|
|
|
<i class="el-icon-delete" |
|
|
|
|
|
|
|
@click="delNote(item)"></i> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="des" v-html="item.noteContent"></div> |
|
|
|
<div class="des" |
|
|
|
|
|
|
|
v-html="item.noteContent"></div> |
|
|
|
</el-timeline-item> |
|
|
|
</el-timeline-item> |
|
|
|
</el-timeline> |
|
|
|
</el-timeline> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -156,84 +220,131 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-if="active === 4"> |
|
|
|
<template v-if="active === 4"> |
|
|
|
<div class="page"> |
|
|
|
<div class="page"> |
|
|
|
<quill ref="quill" :border="true" v-model="msg" :height="150" :toTop="false" /> |
|
|
|
<quill ref="quill" |
|
|
|
|
|
|
|
:border="true" |
|
|
|
|
|
|
|
v-model="msg" |
|
|
|
|
|
|
|
:height="150" |
|
|
|
|
|
|
|
:toTop="false" /> |
|
|
|
<ul class="msg"> |
|
|
|
<ul class="msg"> |
|
|
|
<li v-for="(item, i) in msgs" :key="i"> |
|
|
|
<li v-for="(item, i) in msgs" |
|
|
|
|
|
|
|
:key="i"> |
|
|
|
<div class="li-wrap"> |
|
|
|
<div class="li-wrap"> |
|
|
|
<img :src="item.avatar" alt="" class="avatar"> |
|
|
|
<img :src="item.avatar" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
class="avatar"> |
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<h6> |
|
|
|
<h6> |
|
|
|
<span class="name">{{ item.userName }}</span> |
|
|
|
<span class="name">{{ item.userName }}</span> |
|
|
|
发表于 {{ item.createDate }} |
|
|
|
发表于 {{ item.createDate }} |
|
|
|
</h6> |
|
|
|
</h6> |
|
|
|
<div class="des" v-html="item.content"></div> |
|
|
|
<div class="des" |
|
|
|
|
|
|
|
v-html="item.content"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="action"> |
|
|
|
<div class="action"> |
|
|
|
<i class="icon el-icon-chat-dot-square"></i> |
|
|
|
<i class="icon el-icon-chat-dot-square"></i> |
|
|
|
<i class="icon el-icon-delete"></i> |
|
|
|
<i class="icon el-icon-delete"></i> |
|
|
|
<img class="icon" src="@/assets/img/like.png" alt=""> |
|
|
|
<img class="icon" |
|
|
|
|
|
|
|
src="@/assets/img/like.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="reply" v-if="item.showReply"> |
|
|
|
<div class="reply" |
|
|
|
<quill :border="true" v-model="item.replyContent" :toTop="false" :height="150" /> |
|
|
|
v-if="item.showReply"> |
|
|
|
|
|
|
|
<quill :border="true" |
|
|
|
|
|
|
|
v-model="item.replyContent" |
|
|
|
|
|
|
|
:toTop="false" |
|
|
|
|
|
|
|
:height="150" /> |
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
<el-button type="primary" size="mini">提交</el-button> |
|
|
|
<el-button type="primary" |
|
|
|
|
|
|
|
size="mini">提交</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ul class="msg children" v-if="item.showChildren"> |
|
|
|
<ul class="msg children" |
|
|
|
<li v-for="(reply,i) in item.children" :key="i"> |
|
|
|
v-if="item.showChildren"> |
|
|
|
|
|
|
|
<li v-for="(reply,i) in item.children" |
|
|
|
|
|
|
|
:key="i"> |
|
|
|
<div class="li-wrap"> |
|
|
|
<div class="li-wrap"> |
|
|
|
<img class="avatar" :src="reply.avatar" alt=""> |
|
|
|
<img class="avatar" |
|
|
|
|
|
|
|
:src="reply.avatar" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<div class="name">{{reply.userName}}</div> |
|
|
|
<div class="name">{{reply.userName}}</div> |
|
|
|
<div class="des" v-html="reply.content"></div> |
|
|
|
<div class="des" |
|
|
|
|
|
|
|
v-html="reply.content"></div> |
|
|
|
<div class="date">{{reply.createDate}}</div> |
|
|
|
<div class="date">{{reply.createDate}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="action"> |
|
|
|
<div class="action"> |
|
|
|
<i class="icon el-icon-chat-dot-square"></i> |
|
|
|
<i class="icon el-icon-chat-dot-square"></i> |
|
|
|
<i class="icon el-icon-delete"></i> |
|
|
|
<i class="icon el-icon-delete"></i> |
|
|
|
<img class="icon" src="@/assets/img/like.png" alt=""> |
|
|
|
<img class="icon" |
|
|
|
|
|
|
|
src="@/assets/img/like.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="reply" v-if="reply.showReply"> |
|
|
|
<div class="reply" |
|
|
|
<quill :border="true" v-model="reply.replyContent" :toTop="false" :height="150" /> |
|
|
|
v-if="reply.showReply"> |
|
|
|
|
|
|
|
<quill :border="true" |
|
|
|
|
|
|
|
v-model="reply.replyContent" |
|
|
|
|
|
|
|
:toTop="false" |
|
|
|
|
|
|
|
:height="150" /> |
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
<el-button type="primary" size="mini">提交</el-button> |
|
|
|
<el-button type="primary" |
|
|
|
|
|
|
|
size="mini">提交</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<div v-if="item.getCommentReplyNum" class="toggle"><span @click="item.showChildren = !item.showChildren">{{item.showChildren ? '收起所有回复' : `查看所有${item.getCommentReplyNum}条回复`}} <i class="el-icon-arrow-down"></i></span></div> |
|
|
|
<div v-if="item.getCommentReplyNum" |
|
|
|
|
|
|
|
class="toggle"><span @click="item.showChildren = !item.showChildren">{{item.showChildren ? '收起所有回复' : `查看所有${item.getCommentReplyNum}条回复`}} <i class="el-icon-arrow-down"></i></span></div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-dialog title="请选择项目" |
|
|
|
<el-dialog title="请选择项目" v-loading="loading" :visible.sync="projectVisible" width="828px" custom-class="project-dia" :close-on-click-modal="false"> |
|
|
|
v-loading="loading" |
|
|
|
|
|
|
|
:visible.sync="projectVisible" |
|
|
|
|
|
|
|
width="828px" |
|
|
|
|
|
|
|
custom-class="project-dia" |
|
|
|
|
|
|
|
:close-on-click-modal="false"> |
|
|
|
<ul class="projects"> |
|
|
|
<ul class="projects"> |
|
|
|
<li v-for="(item, i) in projects" :key="i" :class="{active: curProject == item.projectId}" @click="selectProject(item)"> |
|
|
|
<li v-for="(item, i) in projects" |
|
|
|
<img src="@/assets/img/project.png" alt=""> |
|
|
|
:key="i" |
|
|
|
|
|
|
|
:class="{active: curProject == item.projectId}" |
|
|
|
|
|
|
|
@click="selectProject(item)"> |
|
|
|
|
|
|
|
<img src="@/assets/img/project.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
<span>{{ i + 1 }}. {{ item.projectName }}</span> |
|
|
|
<span>{{ i + 1 }}. {{ item.projectName }}</span> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<span slot="footer" |
|
|
|
<el-button size="small" @click="projectVisible = false">取 消</el-button> |
|
|
|
class="dialog-footer"> |
|
|
|
<el-button size="small" type="primary" @click="toSub">确 定</el-button> |
|
|
|
<el-button size="small" |
|
|
|
|
|
|
|
@click="projectVisible = false">取 消</el-button> |
|
|
|
|
|
|
|
<el-button size="small" |
|
|
|
|
|
|
|
type="primary" |
|
|
|
|
|
|
|
@click="toSub">确 定</el-button> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 购买弹框 --> |
|
|
|
<!-- 购买弹框 --> |
|
|
|
<el-dialog title="温馨提示" :visible.sync="buyVisible" width="420px" center :close-on-click-modal="false"> |
|
|
|
<el-dialog title="温馨提示" |
|
|
|
|
|
|
|
:visible.sync="buyVisible" |
|
|
|
|
|
|
|
width="420px" |
|
|
|
|
|
|
|
center |
|
|
|
|
|
|
|
:close-on-click-modal="false"> |
|
|
|
<div class="buy"> |
|
|
|
<div class="buy"> |
|
|
|
<p class="tips">该课程订阅期限已到期，若需要续费请扫码添加客服咨询</p> |
|
|
|
<p class="tips">该课程订阅期限已到期，若需要续费请扫码添加客服咨询</p> |
|
|
|
<img src="@/assets/img/wechat-code.jpeg" alt=""> |
|
|
|
<img src="@/assets/img/wechat-code.jpeg" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
<pdfDia :key="pdfVisible" :visible.sync="pdfVisible" :src.sync="pdfSrc"/> |
|
|
|
<pdfDia :key="pdfVisible" |
|
|
|
|
|
|
|
:visible.sync="pdfVisible" |
|
|
|
|
|
|
|
:src.sync="pdfSrc" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
@ -252,10 +363,11 @@ export default { |
|
|
|
return { |
|
|
|
return { |
|
|
|
editorConfig, |
|
|
|
editorConfig, |
|
|
|
courseId: this.$route.query.courseId, |
|
|
|
courseId: this.$route.query.courseId, |
|
|
|
mallId: this.$route.query.mallId, |
|
|
|
mallId: this.$route.query.mallId || '', |
|
|
|
curriculumName: this.$route.query.curriculumName, |
|
|
|
curriculumName: this.$route.query.curriculumName, |
|
|
|
chapter: this.$route.query.chapter, |
|
|
|
chapter: this.$route.query.chapter, |
|
|
|
section: this.$route.query.section, |
|
|
|
section: this.$route.query.section, |
|
|
|
|
|
|
|
fromAdmin: this.$route.query.admin, // 是否从产品中心or实验台进来 |
|
|
|
type: 1, |
|
|
|
type: 1, |
|
|
|
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4", |
|
|
|
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4", |
|
|
|
chapterList: [], // 章节列表 |
|
|
|
chapterList: [], // 章节列表 |
|
|
|
@ -367,7 +479,9 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
goBack () { |
|
|
|
goBack () { |
|
|
|
this.$router.back() |
|
|
|
this.fromAdmin ? |
|
|
|
|
|
|
|
this.$router.back() : |
|
|
|
|
|
|
|
this.$router.push('/station') |
|
|
|
}, |
|
|
|
}, |
|
|
|
async getData () { |
|
|
|
async getData () { |
|
|
|
let { data } = await this.$post(`${this.api.curriculumDetail}?cid=${this.courseId}&mallId=${this.mallId}`); |
|
|
|
let { data } = await this.$post(`${this.api.curriculumDetail}?cid=${this.courseId}&mallId=${this.mallId}`); |
|
|
|
@ -671,6 +785,7 @@ export default { |
|
|
|
util.cookies.set('stopTime', '', -1) |
|
|
|
util.cookies.set('stopTime', '', -1) |
|
|
|
projectId ? util.cookies.set('projectId', projectId) : util.cookies.set('projectId', '', -1) |
|
|
|
projectId ? util.cookies.set('projectId', projectId) : util.cookies.set('projectId', '', -1) |
|
|
|
util.cookies.set('token', token) |
|
|
|
util.cookies.set('token', token) |
|
|
|
|
|
|
|
util.cookies.set('mallId', this.mallId) |
|
|
|
util.cookies.set('courseId', this.courseId) |
|
|
|
util.cookies.set('courseId', this.courseId) |
|
|
|
util.cookies.set('curriculumName', escape(this.curriculumName)) |
|
|
|
util.cookies.set('curriculumName', escape(this.curriculumName)) |
|
|
|
util.cookies.set('systemId', id) |
|
|
|
util.cookies.set('systemId', id) |
|
|
|
@ -709,7 +824,7 @@ export default { |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "../../../styles/page/station.scss"; |
|
|
|
@import '../../../styles/page/station.scss'; |
|
|
|
$height: 700px; |
|
|
|
$height: 700px; |
|
|
|
.page { |
|
|
|
.page { |
|
|
|
margin: 12px 0; |
|
|
|
margin: 12px 0; |
|
|
|
@ -719,7 +834,8 @@ $height: 700px; |
|
|
|
line-height: 24px; |
|
|
|
line-height: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.video_wid,.cover{ |
|
|
|
.video_wid, |
|
|
|
|
|
|
|
.cover { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
width: 76%; |
|
|
|
width: 76%; |
|
|
|
height: $height !important; |
|
|
|
height: $height !important; |
|
|
|
@ -773,7 +889,8 @@ $height: 700px; |
|
|
|
.fileIframe { |
|
|
|
.fileIframe { |
|
|
|
height: $height !important; |
|
|
|
height: $height !important; |
|
|
|
} |
|
|
|
} |
|
|
|
.video_wid,.inner{ |
|
|
|
.video_wid, |
|
|
|
|
|
|
|
.inner { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100% !important; |
|
|
|
height: 100% !important; |
|
|
|
border: 0; |
|
|
|
border: 0; |
|
|
|
@ -873,7 +990,7 @@ $height: 700px; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
@include ellipsis; |
|
|
|
@include ellipsis; |
|
|
|
&.active { |
|
|
|
&.active { |
|
|
|
color: #9278FF; |
|
|
|
color: #9278ff; |
|
|
|
} |
|
|
|
} |
|
|
|
.icon { |
|
|
|
.icon { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
@ -901,10 +1018,10 @@ $height: 700px; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-image-viewer__wrapper { |
|
|
|
.el-image-viewer__wrapper { |
|
|
|
transform: translateY(-10px); |
|
|
|
transform: translateY(-10px); |
|
|
|
transition: transform .5s; |
|
|
|
transition: transform 0.5s; |
|
|
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
&.active { |
|
|
|
transform: translateY(0) |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.el-image-viewer__close { |
|
|
|
.el-image-viewer__close { |
|
|
|
@ -1023,12 +1140,12 @@ $height: 700px; |
|
|
|
width: 238px; |
|
|
|
width: 238px; |
|
|
|
padding: 16px; |
|
|
|
padding: 16px; |
|
|
|
margin: 0 20px 20px 0; |
|
|
|
margin: 0 20px 20px 0; |
|
|
|
background-color: #F6F8FA; |
|
|
|
background-color: #f6f8fa; |
|
|
|
border-radius: 16px; |
|
|
|
border-radius: 16px; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
span { |
|
|
|
span { |
|
|
|
color: #007EFF; |
|
|
|
color: #007eff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
&:nth-child(3n) { |
|
|
|
&:nth-child(3n) { |
|
|
|
|
