|
|
|
|
@ -2,17 +2,8 @@ |
|
|
|
|
<div class="container" v-if="loading"> |
|
|
|
|
<div class="left" v-loading="tabLoading"> |
|
|
|
|
<div class="gruop"> |
|
|
|
|
<Graph |
|
|
|
|
:width="1195" |
|
|
|
|
:height="800" |
|
|
|
|
:index="courseId" |
|
|
|
|
:id="courseId" |
|
|
|
|
:radio1="radio1" |
|
|
|
|
:checkList="checkList" |
|
|
|
|
v-show="flag === 1" |
|
|
|
|
@clickGraph="clickGraphChange" |
|
|
|
|
v-if="isSetting" |
|
|
|
|
/> |
|
|
|
|
<Graph :width="1195" :height="800" :index="courseId" :id="courseId" :radio1="radio1" :checkList="checkList" |
|
|
|
|
v-show="flag === 1" @clickGraph="clickGraphChange" v-if="isSetting" /> |
|
|
|
|
<div class="video" v-if="flag === 2"> |
|
|
|
|
<video id="video" width="100%" height="100%" controls> |
|
|
|
|
<source :src="videoUrl" type="video/mp4" /> |
|
|
|
|
@ -21,27 +12,23 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="pdf" v-if="flag === 3"> |
|
|
|
|
<!-- <vuePdf /> --> |
|
|
|
|
<VuePdf |
|
|
|
|
v-for="page in numOfPages" |
|
|
|
|
:key="page" |
|
|
|
|
:src="pdfUrl" |
|
|
|
|
:page="page" |
|
|
|
|
/> |
|
|
|
|
<VuePdf v-for="page in numOfPages" :key="page" :src="pdfUrl" :page="page" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="docx" v-if="flag === 4"> |
|
|
|
|
<vue-office-docx :src="docx" style="width: 100%; height: 100%" /> |
|
|
|
|
</div> |
|
|
|
|
<div v-show="flag != 1" class="back" @click="flag = 1"> |
|
|
|
|
<el-icon><Back /></el-icon> |
|
|
|
|
<el-icon> |
|
|
|
|
<Back /> |
|
|
|
|
</el-icon> |
|
|
|
|
</div> |
|
|
|
|
<div class="show-graph-sett" @click="showSetting" v-if="!showFlag"> |
|
|
|
|
<el-icon><ArrowLeftBold /></el-icon> |
|
|
|
|
<el-icon> |
|
|
|
|
<ArrowLeftBold /> |
|
|
|
|
</el-icon> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
:class="showFlag ? 'graph-setting' : 'graph-setting-hidden'" |
|
|
|
|
@mouseleave="heddinSetting" |
|
|
|
|
@mouseenter="clearHeddin" |
|
|
|
|
> |
|
|
|
|
<div :class="showFlag ? 'graph-setting' : 'graph-setting-hidden'" @mouseleave="heddinSetting" |
|
|
|
|
@mouseenter="clearHeddin"> |
|
|
|
|
<el-radio-group v-model="radio1" @change="radio1Change"> |
|
|
|
|
<el-radio value="2" size="mini" style="margin: 0">二层</el-radio> |
|
|
|
|
<el-radio value="3" size="mini" style="margin: 0">三层</el-radio> |
|
|
|
|
@ -65,32 +52,17 @@ |
|
|
|
|
</el-table> |
|
|
|
|
</div> |
|
|
|
|
<div class="resource"> |
|
|
|
|
<el-tabs |
|
|
|
|
v-model="activeName" |
|
|
|
|
class="demo-tabs" |
|
|
|
|
@tab-click="handleClick" |
|
|
|
|
v-loading="isTabsLoading" |
|
|
|
|
> |
|
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-loading="isTabsLoading"> |
|
|
|
|
<el-tab-pane label="视频" name="1"> |
|
|
|
|
<div class="files-box"> |
|
|
|
|
<div |
|
|
|
|
class="item" |
|
|
|
|
v-for="item in courseFilesList.video" |
|
|
|
|
:key="item.id" |
|
|
|
|
@click="clickFile(item, 2)" |
|
|
|
|
> |
|
|
|
|
<div class="item" v-for="item in courseFilesList.video" :key="item.id" @click="clickFile(item, 2)"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
<el-tab-pane label="PPT" name="2"> |
|
|
|
|
<div class="files-box"> |
|
|
|
|
<div |
|
|
|
|
class="item" |
|
|
|
|
v-for="item in courseFilesList.PPT" |
|
|
|
|
:key="item.id" |
|
|
|
|
@click="clickFile(item, 3)" |
|
|
|
|
> |
|
|
|
|
<div class="item" v-for="item in courseFilesList.PPT" :key="item.id" @click="clickFile(item, 3)"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -98,24 +70,14 @@ |
|
|
|
|
<el-tab-pane label="试题" name="3">Role</el-tab-pane> |
|
|
|
|
<el-tab-pane label="文档" name="4"> |
|
|
|
|
<div class="files-box"> |
|
|
|
|
<div |
|
|
|
|
class="item" |
|
|
|
|
v-for="item in courseFilesList.word" |
|
|
|
|
:key="item.id" |
|
|
|
|
@click="clickFile(item, 4)" |
|
|
|
|
> |
|
|
|
|
<div class="item" v-for="item in courseFilesList.word" :key="item.id" @click="clickFile(item, 4)"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
<el-tab-pane label="其他" name="5"> |
|
|
|
|
<div class="files-box"> |
|
|
|
|
<div |
|
|
|
|
class="item" |
|
|
|
|
v-for="item in courseFilesList.other" |
|
|
|
|
:key="item.id" |
|
|
|
|
@click="download(item)" |
|
|
|
|
> |
|
|
|
|
<div class="item" v-for="item in courseFilesList.other" :key="item.id" @click="download(item)"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -130,7 +92,8 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="description"> |
|
|
|
|
<div class="description-box"> |
|
|
|
|
《Vues 设计与实现》这本书的简介： 《Vues 设计与实现》是一本深入剖析 |
|
|
|
|
{{ Route.query.name }}这个课程的简介：{{ learn.description }} |
|
|
|
|
<!-- 《Vues 设计与实现》这本书的简介： 《Vues 设计与实现》是一本深入剖析 |
|
|
|
|
Vues 框架核心原理的权威著作。 |
|
|
|
|
本书首先会为读者搭建起一个坚实的知识基础，详细介绍 Vues |
|
|
|
|
的发展历程和其在前端开发领域的重要地位。接着，深入探讨 Vues |
|
|
|
|
@ -144,7 +107,7 @@ |
|
|
|
|
来构建复杂而强大的应用程序。同时，书中也提供了丰富的实战案例和最佳实践，让读者能够将所学知识迅速应用到实际开发中。 |
|
|
|
|
无论是前端开发的新手，还是经验丰富的开发者，都能从《Vues |
|
|
|
|
设计与实现》中获得宝贵的知识和技能，从而提升自己的开发水平，打造出更加出色的前端应用。它不仅是一本技术指南，更是一本启发思考、引领创新的宝典，为读者打开了深入理解和掌握 |
|
|
|
|
Vues 框架的大门。 |
|
|
|
|
Vues 框架的大门。 --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="hours"> |
|
|
|
|
@ -184,7 +147,7 @@ |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import StuList from './components/StuList.vue' |
|
|
|
|
import { ref, nextTick } from 'vue' |
|
|
|
|
import { ref, nextTick, reactive } from 'vue' |
|
|
|
|
import Graph from '../home/components/Graph1.vue' |
|
|
|
|
import courseTree from './components/courseTree.vue' |
|
|
|
|
import { useRoute, useRouter } from 'vue-router' |
|
|
|
|
@ -199,10 +162,11 @@ import { filterFilesType } from '@/utils/filters' |
|
|
|
|
import { VuePdf, createLoadingTask } from 'vue3-pdfjs/esm' |
|
|
|
|
import VueOfficeDocx from '@vue-office/docx' |
|
|
|
|
// import vuePdf from './components/vuePdf.vue' |
|
|
|
|
import { getCourseDetailApi } from '@/api/configuration' |
|
|
|
|
const Route = useRoute() |
|
|
|
|
const Router = useRouter() |
|
|
|
|
const courseId: string = Route.query.id as string |
|
|
|
|
console.log(Route.query.id) |
|
|
|
|
|
|
|
|
|
const chapterList = ref<any>([]) |
|
|
|
|
const loading = ref(false) |
|
|
|
|
const getCourseChapterEvent = async () => { |
|
|
|
|
@ -216,7 +180,7 @@ const getCourseChapterEvent = async () => { |
|
|
|
|
courseId: '2cd6b5b62c344fd0becff6010cba566e', |
|
|
|
|
}) |
|
|
|
|
chapterList.value = res.data |
|
|
|
|
console.log(res,'res') |
|
|
|
|
console.log(res, 'res') |
|
|
|
|
loading.value = true |
|
|
|
|
loadingInstance.close() |
|
|
|
|
} |
|
|
|
|
@ -226,7 +190,10 @@ const courseObjectivesTrees = ref([]) |
|
|
|
|
const handleClick = (e: any) => { |
|
|
|
|
console.log(e) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const learn = reactive<any>({}) |
|
|
|
|
if (Route.query.id) { |
|
|
|
|
getCourseDetailApi(Route.query.id as string).then(res => Object.assign(learn, res.data)); |
|
|
|
|
} |
|
|
|
|
const isTabsLoading = ref<boolean>(false) |
|
|
|
|
const courseFilesList = ref<any>({}) |
|
|
|
|
// 获取所有课程资源 |
|
|
|
|
@ -376,6 +343,7 @@ getCourseObjectivesListEvent() |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.view-container { |
|
|
|
|
|
|
|
|
|
// height: 100vh; |
|
|
|
|
.container { |
|
|
|
|
width: $base-container-width; |
|
|
|
|
@ -383,8 +351,10 @@ getCourseObjectivesListEvent() |
|
|
|
|
// height: 1600px; |
|
|
|
|
display: flex; |
|
|
|
|
padding-bottom: 20px; |
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
width: 1195px; |
|
|
|
|
|
|
|
|
|
// height: 800px; |
|
|
|
|
.gruop { |
|
|
|
|
position: relative; |
|
|
|
|
@ -392,24 +362,29 @@ getCourseObjectivesListEvent() |
|
|
|
|
width: 100%; |
|
|
|
|
height: 800px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
.video { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
background-color: #d9d9d9; |
|
|
|
|
|
|
|
|
|
#video { |
|
|
|
|
object-fit: cover; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.pdf { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.docx { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.back { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 30px; |
|
|
|
|
@ -420,6 +395,7 @@ getCourseObjectivesListEvent() |
|
|
|
|
background-color: rgba(0, 0, 0, 0.1); |
|
|
|
|
border-radius: 50%; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
@ -429,16 +405,19 @@ getCourseObjectivesListEvent() |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.graph-setting { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 30px; |
|
|
|
|
right: 10px; |
|
|
|
|
width: 80px; |
|
|
|
|
height: 270px; |
|
|
|
|
animation: fadeIn 0.3s ease-in-out; /* 持续时间2秒，缓动函数为ease-in-out */ |
|
|
|
|
animation: fadeIn 0.3s ease-in-out; |
|
|
|
|
/* 持续时间2秒，缓动函数为ease-in-out */ |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.reset { |
|
|
|
|
width: 50px; |
|
|
|
|
height: 30px; |
|
|
|
|
@ -451,15 +430,18 @@ getCourseObjectivesListEvent() |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.graph-setting-hidden { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 30px; |
|
|
|
|
right: -90px; |
|
|
|
|
width: 80px; |
|
|
|
|
height: 270px; |
|
|
|
|
animation: fadeOut 0.3s ease-in-out; /* 持续时间2秒，缓动函数为ease-in-out */ |
|
|
|
|
animation: fadeOut 0.3s ease-in-out; |
|
|
|
|
/* 持续时间2秒，缓动函数为ease-in-out */ |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.reset { |
|
|
|
|
width: 50px; |
|
|
|
|
height: 30px; |
|
|
|
|
@ -472,24 +454,29 @@ getCourseObjectivesListEvent() |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
|
|
from { |
|
|
|
|
right: -60px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
to { |
|
|
|
|
right: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes fadeOut { |
|
|
|
|
from { |
|
|
|
|
right: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
to { |
|
|
|
|
right: -60px; |
|
|
|
|
display: none; |
|
|
|
|
display: none; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.show-graph-sett { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 30px; |
|
|
|
|
@ -503,20 +490,24 @@ getCourseObjectivesListEvent() |
|
|
|
|
padding-left: 5px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.show-graph-sett:hover { |
|
|
|
|
transform: scale(1.3); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.resource { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 500px; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
padding: 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
.files-box { |
|
|
|
|
.item { |
|
|
|
|
// width: 200px; |
|
|
|
|
@ -528,17 +519,20 @@ getCourseObjectivesListEvent() |
|
|
|
|
text-decoration: underline; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.item:hover { |
|
|
|
|
color: Blue; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cours-target { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 300px; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
padding: 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 16px; |
|
|
|
|
height: 40px; |
|
|
|
|
@ -548,34 +542,40 @@ getCourseObjectivesListEvent() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: 400px; |
|
|
|
|
|
|
|
|
|
margin-left: 20px; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
.course-info { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 640px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
.image { |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 220px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.description { |
|
|
|
|
overflow-y: auto; |
|
|
|
|
height: 260px; |
|
|
|
|
padding: 10px 20px; |
|
|
|
|
text-indent: 2em; /* 2em 约等于两个汉字的宽度 */ |
|
|
|
|
text-indent: 2em; |
|
|
|
|
/* 2em 约等于两个汉字的宽度 */ |
|
|
|
|
font-size: 18px; |
|
|
|
|
line-height: 40px; |
|
|
|
|
|
|
|
|
|
.description-box { |
|
|
|
|
} |
|
|
|
|
.description-box {} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.hours { |
|
|
|
|
padding: 10px 20px; |
|
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|
|
|
|
@ -585,12 +585,14 @@ getCourseObjectivesListEvent() |
|
|
|
|
height: 30px; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
|
|
.label { |
|
|
|
|
color: #999; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.chapter { |
|
|
|
|
overflow-y: auto; |
|
|
|
|
height: 460px; |
|
|
|
|
@ -598,6 +600,7 @@ getCourseObjectivesListEvent() |
|
|
|
|
margin-top: 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.student-list { |
|
|
|
|
height: 500px; |
|
|
|
|
width: 100%; |
|
|
|
|
@ -607,13 +610,17 @@ getCourseObjectivesListEvent() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
|
|
width: 4px; /* 滚动条宽度 */ |
|
|
|
|
width: 4px; |
|
|
|
|
/* 滚动条宽度 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 设置滚动条上下按钮的样式 */ |
|
|
|
|
::-webkit-scrollbar-button { |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.docx-wrapper) { |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
@ -623,6 +630,7 @@ getCourseObjectivesListEvent() |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.el-checkbox-group) { |
|
|
|
|
display: flex !important; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
significative