|
|
|
|
@ -1,148 +1,97 @@ |
|
|
|
|
<template> |
|
|
|
|
<div style="padding: 24px"> |
|
|
|
|
<el-card shadow="hover" |
|
|
|
|
class="m-b-20"> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="back" |
|
|
|
|
:content="curriculumName || courseName"></el-page-header> |
|
|
|
|
<el-page-header @back="back" :content="curriculumName || courseName"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
<el-card class="source-card" |
|
|
|
|
shadow="hover" |
|
|
|
|
style="background: none;"> |
|
|
|
|
<el-card class="source-card" shadow="hover" style="background: none;"> |
|
|
|
|
<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"> |
|
|
|
|
<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"> |
|
|
|
|
<div class="mask" |
|
|
|
|
style="top: 0;width:100%;height: 48px;"></div> |
|
|
|
|
<div class="mask" |
|
|
|
|
style="top: 53px;width:100%;height: 30px;"></div> |
|
|
|
|
<div class="mask" |
|
|
|
|
style="bottom: 0;right: 0;width:280px;height: 22px;background-color: #444;"></div> |
|
|
|
|
<div class="mask" style="top: 0;width:100%;height: 48px;"></div> |
|
|
|
|
<div class="mask" style="top: 53px;width:100%;height: 30px;"></div> |
|
|
|
|
<div class="mask" style="bottom: 0;right: 0;width:280px;height: 22px;background-color: #444;"></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> |
|
|
|
|
<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> |
|
|
|
|
<div class="excel-mask1" style="height: 48px;"></div> |
|
|
|
|
</template> |
|
|
|
|
</template> |
|
|
|
|
<div class="pdf inner" |
|
|
|
|
v-else-if="pdfSrc"> |
|
|
|
|
<img class="full" |
|
|
|
|
src="@/assets/img/screen/full.png" |
|
|
|
|
alt="" |
|
|
|
|
@click="fullScreen"> |
|
|
|
|
<div class="pdf inner" v-else-if="pdfSrc"> |
|
|
|
|
<img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen"> |
|
|
|
|
<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> |
|
|
|
|
{{ 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> |
|
|
|
|
</p> |
|
|
|
|
<div style='color:#393A3D;height: 30px;background: #393A3D;'></div> |
|
|
|
|
<pdf class="pdf-wrap" |
|
|
|
|
:src="pdfSrc" |
|
|
|
|
:page="currentPage" |
|
|
|
|
@num-pages="pageCount=$event" |
|
|
|
|
@page-loaded="currentPage=$event" |
|
|
|
|
@loaded="loadPdfHandler"> |
|
|
|
|
<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 class="inner" v-else-if="playAuth"> |
|
|
|
|
<div class="video_wid" id="player"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="inner" |
|
|
|
|
v-else-if="videoSrc"> |
|
|
|
|
<video class="video" |
|
|
|
|
:key="videoSrc" |
|
|
|
|
width="100%" |
|
|
|
|
height="100%" |
|
|
|
|
autoplay |
|
|
|
|
controls> |
|
|
|
|
<source :src="videoSrc" |
|
|
|
|
type="video/mp4"> |
|
|
|
|
<div class="inner" v-else-if="videoSrc"> |
|
|
|
|
<video class="video" :key="videoSrc" width="100%" height="100%" autoplay controls> |
|
|
|
|
<source :src="videoSrc" type="video/mp4"> |
|
|
|
|
您的浏览器不支持 video 标签。 |
|
|
|
|
</video> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="catalog"> |
|
|
|
|
<div class="m-b-20"> |
|
|
|
|
<el-button v-if="!overdue" |
|
|
|
|
class="entry" |
|
|
|
|
type="primary" |
|
|
|
|
size="small" |
|
|
|
|
@click="showBuy">续费</el-button> |
|
|
|
|
<el-button v-else |
|
|
|
|
class="entry" |
|
|
|
|
type="primary" |
|
|
|
|
@click="entry">进 入 实 验</el-button> |
|
|
|
|
<el-button v-if="!overdue" class="entry" type="primary" size="small" @click="showBuy">续费</el-button> |
|
|
|
|
<el-button v-else class="entry" type="primary" @click="entry">进 入 实 验</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div class="list"> |
|
|
|
|
<h4 class="title">{{ curriculumName || courseName }}</h4> |
|
|
|
|
<div> |
|
|
|
|
<h6 class="pro-title">当前教学进度</h6> |
|
|
|
|
<el-progress :stroke-width="12" |
|
|
|
|
:percentage="schedule" |
|
|
|
|
:format="percentFormat" |
|
|
|
|
<el-progress :stroke-width="12" :percentage="schedule" :format="percentFormat" |
|
|
|
|
:text-color="'#fff'"></el-progress> |
|
|
|
|
</div> |
|
|
|
|
<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> 目录 |
|
|
|
|
</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> 教学进度 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="chapters"> |
|
|
|
|
<template v-if="type === 1"> |
|
|
|
|
<template v-if="chapterList.length"> |
|
|
|
|
<div class="chapter" |
|
|
|
|
v-for="(item,index) in chapterList" |
|
|
|
|
:key="index"> |
|
|
|
|
<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,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 class="section" v-if="item.subsectionList.length"> |
|
|
|
|
<p class="sectionName" :class="{ active: curLink === `${item.name}${section.name}` }" |
|
|
|
|
v-for="(section, i) in item.subsectionList" :key="i" @click="preview(section, item.name)"> |
|
|
|
|
<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 }} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</template> |
|
|
|
|
<div v-else |
|
|
|
|
class="section"> |
|
|
|
|
<p class="sectionName" |
|
|
|
|
v-for="(item, i) in progressList" |
|
|
|
|
:key="i" |
|
|
|
|
:title="item.projectName"> |
|
|
|
|
<div v-else class="section"> |
|
|
|
|
<p class="sectionName" v-for="(item, i) in progressList" :key="i" :title="item.projectName"> |
|
|
|
|
{{ i + 1 }}. |
|
|
|
|
{{ item.projectName }} |
|
|
|
|
<i :class="['icon', item.whetherToStudyOrNot ? 'el-icon-success' : 'circle']" |
|
|
|
|
@ -156,46 +105,33 @@ |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<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 class="flex"> |
|
|
|
|
<div class="tab-content"> |
|
|
|
|
<template v-if="active === 1"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="briefIntroduction"></div> |
|
|
|
|
<div class="des" v-html="briefIntroduction"></div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="active === 2"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<template v-if="showNoteAdd || !notes.length"> |
|
|
|
|
<el-form class="form" |
|
|
|
|
ref="form" |
|
|
|
|
label-width="120px" |
|
|
|
|
center> |
|
|
|
|
<el-form-item class="required" |
|
|
|
|
label="笔记标题"> |
|
|
|
|
<el-input placeholder="请输入笔记标题" |
|
|
|
|
v-model="noteForm.noteName" |
|
|
|
|
maxlength="30" |
|
|
|
|
<el-form class="form" ref="form" 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 class="required" |
|
|
|
|
label="笔记内容"> |
|
|
|
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' |
|
|
|
|
v-model="noteForm.noteContent" |
|
|
|
|
<el-form-item class="required" label="笔记内容"> |
|
|
|
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="noteForm.noteContent" |
|
|
|
|
:init="editorConfig" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<div class="text-right"> |
|
|
|
|
<el-button v-if="notes.length" |
|
|
|
|
@click="showNoteAdd = false">取消</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="submitNote">保存</el-button> |
|
|
|
|
<el-button v-if="notes.length" @click="showNoteAdd = false">取消</el-button> |
|
|
|
|
<el-button type="primary" @click="submitNote">保存</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
@ -203,32 +139,24 @@ |
|
|
|
|
<ul class="filter"> |
|
|
|
|
<li> |
|
|
|
|
<label>搜索：</label> |
|
|
|
|
<el-input placeholder="请输入标题" |
|
|
|
|
v-model="noteKeyword" |
|
|
|
|
clearable></el-input> |
|
|
|
|
<el-input placeholder="请输入标题" v-model="noteKeyword" clearable></el-input> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="addNote">新增笔记</el-button> |
|
|
|
|
<el-button type="primary" @click="addNote">新增笔记</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<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> |
|
|
|
|
<div class="ver"> |
|
|
|
|
{{ item.noteName }} |
|
|
|
|
<span class="action"> |
|
|
|
|
<i class="el-icon-edit-outline" |
|
|
|
|
@click="editNote(item)"></i> |
|
|
|
|
<i class="el-icon-delete" |
|
|
|
|
@click="delNote(item)"></i> |
|
|
|
|
<i class="el-icon-edit-outline" @click="editNote(item)"></i> |
|
|
|
|
<i class="el-icon-delete" @click="delNote(item)"></i> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="item.noteContent"></div> |
|
|
|
|
<div class="des" v-html="item.noteContent"></div> |
|
|
|
|
</el-timeline-item> |
|
|
|
|
</el-timeline> |
|
|
|
|
</template> |
|
|
|
|
@ -236,39 +164,26 @@ |
|
|
|
|
</template> |
|
|
|
|
<template v-if="active === 4"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<quill ref="quill" |
|
|
|
|
:border="true" |
|
|
|
|
v-model="comment" |
|
|
|
|
:height="150" |
|
|
|
|
:toTop="false" /> |
|
|
|
|
<quill ref="quill" :border="true" v-model="comment" :height="150" :toTop="false" /> |
|
|
|
|
<div class="m-t-10 text-right"> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
size="mini" |
|
|
|
|
@click="submitComment(0)">提交</el-button> |
|
|
|
|
<el-button type="primary" size="mini" @click="submitComment(0)">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
<ul class="msg"> |
|
|
|
|
<li v-for="(item, i) in comments" |
|
|
|
|
:key="i" |
|
|
|
|
:id="'comment' + item.commentId"> |
|
|
|
|
<li v-for="(item, i) in comments" :key="i" :id="'comment' + item.commentId"> |
|
|
|
|
<div class="li-wrap"> |
|
|
|
|
<img :src="item.createUserAvatars" |
|
|
|
|
alt="" |
|
|
|
|
class="avatar"> |
|
|
|
|
<img :src="item.createUserAvatars" alt="" class="avatar"> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6> |
|
|
|
|
<span class="name">{{ item.createUsername }}</span> |
|
|
|
|
发表于 {{ item.createTime }} |
|
|
|
|
</h6> |
|
|
|
|
<div class="m-t-8" |
|
|
|
|
v-html="item.content"></div> |
|
|
|
|
<div class="m-t-8" v-html="item.content"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="action"> |
|
|
|
|
<i class="icon el-icon-chat-dot-square" |
|
|
|
|
@click="showReplay(item)"></i> |
|
|
|
|
<i class="icon el-icon-chat-dot-square" @click="showReplay(item)"></i> |
|
|
|
|
<!-- 当前用户是管理员 || 该条评论是学生发的（没有createRoleName即是学生） || 当前用户的account==该条评论的创建人accountId --> |
|
|
|
|
<i v-if="(item.currentRoleName && item.currentRoleName.includes('管理员')) || !item.createRoleName || item.currentAccountId == item.createAccountId" |
|
|
|
|
class="icon el-icon-delete" |
|
|
|
|
@click="delComment(item)"></i> |
|
|
|
|
class="icon el-icon-delete" @click="delComment(item)"></i> |
|
|
|
|
|
|
|
|
|
<!-- <div class="like-wrap" |
|
|
|
|
@click="like(item)"> |
|
|
|
|
@ -284,27 +199,16 @@ |
|
|
|
|
</div> --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reply" |
|
|
|
|
v-if="item.showReply"> |
|
|
|
|
<quill :border="true" |
|
|
|
|
v-model="item.replyContent" |
|
|
|
|
:toTop="false" |
|
|
|
|
:height="150" /> |
|
|
|
|
<div class="reply" v-if="item.showReply"> |
|
|
|
|
<quill :border="true" v-model="item.replyContent" :toTop="false" :height="150" /> |
|
|
|
|
<div class="m-v-10 text-right"> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
size="mini" |
|
|
|
|
@click="submitComment(item)">提交</el-button> |
|
|
|
|
<el-button type="primary" size="mini" @click="submitComment(item)">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<ul class="msg children" |
|
|
|
|
v-if="item.showChildren"> |
|
|
|
|
<li v-for="(reply,i) in item.children" |
|
|
|
|
:key="i" |
|
|
|
|
:id="'comment' + reply.commentId"> |
|
|
|
|
<ul class="msg children" v-if="item.showChildren"> |
|
|
|
|
<li v-for="(reply, i) in item.children" :key="i" :id="'comment' + reply.commentId"> |
|
|
|
|
<div class="li-wrap"> |
|
|
|
|
<img class="avatar" |
|
|
|
|
:src="reply.createUserAvatars" |
|
|
|
|
alt=""> |
|
|
|
|
<img class="avatar" :src="reply.createUserAvatars" alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="name">{{ reply.createUsername }}</div> |
|
|
|
|
<div class="flex m-v-8"> |
|
|
|
|
@ -317,12 +221,10 @@ |
|
|
|
|
<div class="date">{{ reply.createTime }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="action"> |
|
|
|
|
<i class="icon el-icon-chat-dot-square" |
|
|
|
|
@click="showReplay(reply)"></i> |
|
|
|
|
<i class="icon el-icon-chat-dot-square" @click="showReplay(reply)"></i> |
|
|
|
|
<!-- 当前用户是管理员 || 该条评论是学生发的（没有createRoleName即是学生） || 当前用户的account==该条评论的创建人accountId --> |
|
|
|
|
<i v-if="(reply.currentRoleName && reply.currentRoleName.includes('管理员')) || !reply.createRoleName || reply.currentAccountId == reply.createAccountId" |
|
|
|
|
class="icon el-icon-delete" |
|
|
|
|
@click="delComment(reply)"></i> |
|
|
|
|
class="icon el-icon-delete" @click="delComment(reply)"></i> |
|
|
|
|
<!-- <div class="like-wrap" |
|
|
|
|
@click="like(item, reply)"> |
|
|
|
|
<img v-if="reply.isLike" |
|
|
|
|
@ -337,22 +239,17 @@ |
|
|
|
|
</div> --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="reply" |
|
|
|
|
v-if="reply.showReply"> |
|
|
|
|
<quill :border="true" |
|
|
|
|
v-model="reply.replyContent" |
|
|
|
|
:toTop="false" |
|
|
|
|
:height="150" /> |
|
|
|
|
<div class="reply" v-if="reply.showReply"> |
|
|
|
|
<quill :border="true" v-model="reply.replyContent" :toTop="false" :height="150" /> |
|
|
|
|
<div class="p-b-10 m-t-10 text-right"> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
size="mini" |
|
|
|
|
@click="submitComment(item, reply)">提交</el-button> |
|
|
|
|
<el-button type="primary" size="mini" @click="submitComment(item, reply)">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div v-if="item.children" |
|
|
|
|
class="toggle"><span @click="item.showChildren = !item.showChildren">{{item.showChildren ? '收起所有回复' : `查看所有${item.children.length}条回复`}} <i class="el-icon-arrow-down"></i></span></div> |
|
|
|
|
<div v-if="item.children" class="toggle"><span @click="item.showChildren = !item.showChildren">{{ |
|
|
|
|
item.showChildren ? |
|
|
|
|
'收起所有回复' : `查看所有${item.children.length}条回复` }} <i class="el-icon-arrow-down"></i></span></div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
@ -360,77 +257,48 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="rank"> |
|
|
|
|
<h6 class="title">练习成绩排行</h6> |
|
|
|
|
<el-select style="width: 100%" |
|
|
|
|
v-model="archProject" |
|
|
|
|
placeholder="请选择" |
|
|
|
|
@change="getMaximumScore"> |
|
|
|
|
<el-option v-for="(item, i) in progressList" |
|
|
|
|
:key="i" |
|
|
|
|
:label="item.projectName" |
|
|
|
|
<el-select style="width: 100%" v-model="archProject" placeholder="请选择" @change="getMaximumScore"> |
|
|
|
|
<el-option v-for="(item, i) in progressList" :key="i" :label="item.projectName" |
|
|
|
|
:value="item.projectId"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
<div v-if="maximumScores.length" |
|
|
|
|
class="arches"> |
|
|
|
|
<div v-for="(item, i) in maximumScores" |
|
|
|
|
:key="i" |
|
|
|
|
class="line"> |
|
|
|
|
<div v-if="maximumScores.length" class="arches"> |
|
|
|
|
<div v-for="(item, i) in maximumScores" :key="i" class="line"> |
|
|
|
|
<div> |
|
|
|
|
<img :src="item.userAvatars" |
|
|
|
|
alt="" |
|
|
|
|
class="avatar"> |
|
|
|
|
<img :src="item.userAvatars" alt="" class="avatar"> |
|
|
|
|
<span class="name">{{ item.userName }}</span> |
|
|
|
|
</div> |
|
|
|
|
<span class="point">{{ item.highestScore }}分</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<p v-else |
|
|
|
|
class="none">暂无数据</p> |
|
|
|
|
<p v-else class="none">暂无数据</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-dialog title="请选择项目" |
|
|
|
|
v-loading="loading" |
|
|
|
|
:visible.sync="projectVisible" |
|
|
|
|
width="828px" |
|
|
|
|
custom-class="project-dia" |
|
|
|
|
<el-dialog title="请选择项目" v-loading="loading" :visible.sync="projectVisible" width="828px" custom-class="project-dia" |
|
|
|
|
:close-on-click-modal="false"> |
|
|
|
|
<ul class="projects"> |
|
|
|
|
<li v-for="(item, i) in projects" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{active: curProject == item.projectId}" |
|
|
|
|
<li v-for="(item, i) in projects" :key="i" :class="{ active: curProject == item.projectId }" |
|
|
|
|
@click="selectProject(item)"> |
|
|
|
|
<img src="@/assets/img/project.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img src="@/assets/img/project.png" alt=""> |
|
|
|
|
<span>{{ i + 1 }}. {{ item.projectName }}</span> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer"> |
|
|
|
|
<el-button size="small" |
|
|
|
|
@click="projectVisible = false">取 消</el-button> |
|
|
|
|
<el-button size="small" |
|
|
|
|
type="primary" |
|
|
|
|
@click="toSub">确 定</el-button> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button size="small" @click="projectVisible = false">取 消</el-button> |
|
|
|
|
<el-button size="small" type="primary" @click="toSub">确 定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</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"> |
|
|
|
|
<p class="tips">该课程订阅期限已到期，若需要续费请扫码添加客服咨询</p> |
|
|
|
|
<img src="@/assets/img/wechat-code.jpeg" |
|
|
|
|
alt=""> |
|
|
|
|
<img src="@/assets/img/wechat-code.jpeg" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<pdfDia :key="pdfVisible" |
|
|
|
|
:visible.sync="pdfVisible" |
|
|
|
|
:src.sync="pdfSrc" /> |
|
|
|
|
<pdfDia :key="pdfVisible" :visible.sync="pdfVisible" :src.sync="pdfSrc" /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -1030,8 +898,10 @@ export default { |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import '../../../styles/page/station.scss'; |
|
|
|
|
$height: 700px; |
|
|
|
|
|
|
|
|
|
.page { |
|
|
|
|
border-radius: 0; |
|
|
|
|
|
|
|
|
|
.intro { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #333; |
|
|
|
|
@ -1046,11 +916,13 @@ $height: 700px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.source-card { |
|
|
|
|
.el-card__body { |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video_wid, |
|
|
|
|
.cover { |
|
|
|
|
position: relative; |
|
|
|
|
@ -1058,26 +930,62 @@ $height: 700px; |
|
|
|
|
height: $height !important; |
|
|
|
|
border: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cover { |
|
|
|
|
flex: 1; |
|
|
|
|
width: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cover { |
|
|
|
|
img { |
|
|
|
|
border-radius: 8px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.is-word { |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.fileIframe { |
|
|
|
|
height: $height !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video_wid, |
|
|
|
|
.inner { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100% !important; |
|
|
|
|
border: 0; |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cover.is-word { |
|
|
|
|
.inner { |
|
|
|
|
height: calc(100% + 38px) !important; |
|
|
|
|
margin-top: -38px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video_wid:focus { |
|
|
|
|
outline: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.catalog { |
|
|
|
|
width: 296px; |
|
|
|
|
padding: 16px; |
|
|
|
|
margin-left: 12px; |
|
|
|
|
background-color: #252528; |
|
|
|
|
|
|
|
|
|
.entry { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 50px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.types { |
|
|
|
|
display: flex; |
|
|
|
|
margin: 15px 0; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
display: inline-flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
@ -1085,75 +993,68 @@ $height: 700px; |
|
|
|
|
width: 120px; |
|
|
|
|
height: 40px; |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #b5b5b5; |
|
|
|
|
background-color: #4e4e4e; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
background-color: #ac89fd; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
background-color: $main-color; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
margin-right: 5px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.fileIframe { |
|
|
|
|
height: $height !important; |
|
|
|
|
} |
|
|
|
|
.video_wid, |
|
|
|
|
.inner { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100% !important; |
|
|
|
|
border: 0; |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
.cover.is-word { |
|
|
|
|
.inner { |
|
|
|
|
height: calc(100% + 38px) !important; |
|
|
|
|
margin-top: -38px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.video_wid:focus { |
|
|
|
|
outline: none; |
|
|
|
|
} |
|
|
|
|
.catalog { |
|
|
|
|
width: 330px; |
|
|
|
|
margin-left: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list { |
|
|
|
|
height: calc(700px - 70px); |
|
|
|
|
padding: 24px 16px; |
|
|
|
|
background: #fff; |
|
|
|
|
height: calc(700px - 104px); |
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
margin-bottom: 8px; |
|
|
|
|
color: rgba(0, 0, 0, 0.85); |
|
|
|
|
font-size: 20px; |
|
|
|
|
margin-bottom: 11px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.pro-title { |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-progress-bar { |
|
|
|
|
width: 86%; |
|
|
|
|
width: 92%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-progress__text { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.desc-wrap { |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.desc { |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: rgba(0, 0, 0, 0.65); |
|
|
|
|
line-height: 22px; |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
display: block; |
|
|
|
|
overflow: visible; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.arrow { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 2px; |
|
|
|
|
@ -1162,76 +1063,97 @@ $height: 700px; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
width: 46px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.65); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
width: 16px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
span { |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
transform: rotate(180deg); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.chapters { |
|
|
|
|
margin-top: 16px; |
|
|
|
|
max-height: calc(100% - 167px); |
|
|
|
|
max-height: calc(100% - 53px); |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.chapter { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.chapterName { |
|
|
|
|
color: rgba(0, 0, 0, 0.85); |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.section { |
|
|
|
|
padding: 5px 15px; |
|
|
|
|
margin-top: 8px; |
|
|
|
|
background: rgba(0, 0, 0, 0.02); |
|
|
|
|
margin-top: 12px; |
|
|
|
|
background-color: #121214; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.sectionName { |
|
|
|
|
position: relative; |
|
|
|
|
padding-right: 15px; |
|
|
|
|
margin: 10px 0; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.65); |
|
|
|
|
margin: 12px 0; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #999; |
|
|
|
|
cursor: pointer; |
|
|
|
|
@include ellipsis; |
|
|
|
|
&.active { |
|
|
|
|
color: #9278ff; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
margin-right: 8px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 0; |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #00c935; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.circle { |
|
|
|
|
width: 14px; |
|
|
|
|
height: 14px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
border: 1px solid #ccc; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.buy { |
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
|
.tips { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
width: 85%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-image-viewer__wrapper { |
|
|
|
|
transform: translateY(-10px); |
|
|
|
|
transition: transform 0.5s; |
|
|
|
|
@ -1240,19 +1162,23 @@ $height: 700px; |
|
|
|
|
transform: translateY(0); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-image-viewer__close { |
|
|
|
|
z-index: 2000; |
|
|
|
|
top: 15px; |
|
|
|
|
right: 15px; |
|
|
|
|
|
|
|
|
|
&.doc-close { |
|
|
|
|
i { |
|
|
|
|
color: #000 !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list::-webkit-scrollbar { |
|
|
|
|
width: 4px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list::-webkit-scrollbar-thumb { |
|
|
|
|
border-radius: 10px; |
|
|
|
|
background: rgba(0, 0, 0, 0.06); |
|
|
|
|
@ -1263,6 +1189,7 @@ $height: 700px; |
|
|
|
|
position: absolute; |
|
|
|
|
background-color: rgb(57, 58, 61); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.word-mask { |
|
|
|
|
z-index: 9; |
|
|
|
|
position: absolute; |
|
|
|
|
@ -1271,6 +1198,7 @@ $height: 700px; |
|
|
|
|
width: 100%; |
|
|
|
|
background-color: rgb(243, 242, 241); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.word-mask1 { |
|
|
|
|
z-index: 9; |
|
|
|
|
position: absolute; |
|
|
|
|
@ -1279,11 +1207,13 @@ $height: 700px; |
|
|
|
|
width: 100%; |
|
|
|
|
background-color: #185abd; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.word-mask2 { |
|
|
|
|
z-index: 9; |
|
|
|
|
position: absolute; |
|
|
|
|
background-color: transparent; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.excel-mask1 { |
|
|
|
|
z-index: 9; |
|
|
|
|
position: absolute; |
|
|
|
|
@ -1292,31 +1222,39 @@ $height: 700px; |
|
|
|
|
width: 60%; |
|
|
|
|
background-color: #107c41; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.pdf-dia { |
|
|
|
|
border-radius: 0 !important; |
|
|
|
|
|
|
|
|
|
.el-dialog__header { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-dialog__body { |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-dialog__headerbtn { |
|
|
|
|
top: 10px; |
|
|
|
|
|
|
|
|
|
.el-dialog__close { |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.pdf { |
|
|
|
|
position: relative; |
|
|
|
|
margin-top: 0 !important; |
|
|
|
|
|
|
|
|
|
.full { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 7px; |
|
|
|
|
right: 10px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.arrow { |
|
|
|
|
padding: 10px 0; |
|
|
|
|
display: flex; |
|
|
|
|
@ -1325,54 +1263,65 @@ $height: 700px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #333; |
|
|
|
|
|
|
|
|
|
.turn { |
|
|
|
|
margin: 0 10px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.pdf-wrap { |
|
|
|
|
width: 80%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tabs { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tab-content { |
|
|
|
|
width: 80%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rank { |
|
|
|
|
width: calc(20% - 12px); |
|
|
|
|
padding: 20px; |
|
|
|
|
margin-left: 12px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 15px; |
|
|
|
|
font-weight: 400; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.arches { |
|
|
|
|
max-height: 223px; |
|
|
|
|
padding-right: 10px; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.avatar { |
|
|
|
|
width: 35px; |
|
|
|
|
height: 35px; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.point { |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #9278ff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.none { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
text-align: center; |
|
|
|
|
@ -1380,16 +1329,19 @@ $height: 700px; |
|
|
|
|
color: #727272; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.project-dia { |
|
|
|
|
.el-dialog__body { |
|
|
|
|
padding: 28px 32px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.projects { |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
max-height: 400px; |
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
@ -1399,21 +1351,26 @@ $height: 700px; |
|
|
|
|
background-color: #f6f8fa; |
|
|
|
|
border-radius: 16px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
span { |
|
|
|
|
color: #007eff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:nth-child(3n) { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
background-color: #f2f7ff; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
color: #3988ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
max-width: 140px; |
|
|
|
|
margin-left: 14px; |
|
|
|
|
|
