wangjiadong
/
knowledge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

知识点简介

Browse Source
master
significative 3 months ago
parent c352cc236a
commit 52161f7955
3 changed files with 119 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 0
      .gitignore
  2. 65
      teaching_integration_platform_template/src/views/knowledge/components/BriefIntroduction.vue
  3. 109
      teaching_integration_platform_template/src/views/knowledge/index.vue

0
gitignore → .gitignore vendored
Unescape View File

65
teaching_integration_platform_template/src/views/knowledge/components/BriefIntroduction.vue
Unescape View File

@ -0,0 +1,65 @@
<script setup lang="ts">
import { ElTable, ElTableColumn } from 'element-plus';
import { computed } from 'vue';
const props = defineProps(['data']);
const dataCom = computed(() => {
console.log(props.data, 'data');
const o = props.data
return [
{ title: '视频', count: o.video?.length },
{ title: 'PPT', count: o.PPT?.length },
{ title: '试题', count: o.word?.length },
{ title: '文档', count: o.other?.length },
{ title: '其他', count: o.questions?.length },
]
});
</script>
<template>
<div class="con">
<div class="title">
<h5>知识点简介</h5>
<div class="con">这是知识点的简介</div>
</div>
<div class="basics">
<el-table :data="dataCom" height="150" style="width: 100%">
<el-table-column prop="title" label="资源" width="180" />
<el-table-column prop="count" label="数量" width="180" />
</el-table>
</div>
</div>
</template>
<style lang="scss" scoped>
.title{
h5{
text-align: center;
}
height: 100px;
background-color: #f3f3f3;
}
</style>
<!-- <ul>
<li>
<div class="title">PPT</div>
<div class="count">数量：{{ data.PPT?.length || 0 }}</div>
</li>
<li>
<div class="title">文档</div>
<div class="count">数量：{{ data.word?.length || 0 }}</div>
</li>
<li>
<div class="title">其他</div>
<div class="count">数量：{{ data.other?.length || 0 }}</div>
</li>
<li>
<div class="title">视频</div>
<div class="count">数量：{{ data.video?.length || 0 }}</div>
</li>
<li>
<div class="title">试题</div>
<div class="count">数量：{{ data.questions?.length || 0 }}</div>
</li>
</ul> -->

109
teaching_integration_platform_template/src/views/knowledge/index.vue
Unescape View File

@ -22,48 +22,30 @@
</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="router.go(-1)">
<el-icon><Back /></el-icon>
<el-icon>
<Back />
</el-icon>
</div>
</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>
@ -71,24 +53,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>
@ -101,7 +73,7 @@
<div class="item">
<towGraph :width="398" :height="252" />
</div>
<div class="item"></div>
<div class="item"><brief-introduction :data="courseFilesList" /></div>
<div class="item"></div>
</div>
<div class="chapter">
@ -114,6 +86,7 @@
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import towGraph from './components/towGraph.vue'
import BriefIntroduction from './components/BriefIntroduction.vue'
// import courseTree from './components/courseTree.vue'
import { useRoute, useRouter } from 'vue-router'
import { getCourseTowFiles } from '@/api/course'
@ -193,7 +166,7 @@ const pdfUrl = ref<string>('')
const docx = ref('')
const numOfPages = ref(0)
const tabLoading = ref(false)
onMounted(() => {})
onMounted(() => { })
const clickFile = async (file: any, index: number) => {
tabLoading.value = true
if (index === 2) {
@ -255,24 +228,27 @@ function downloadImage(imageUrl: any, filename: any) {
line-height: 50px;
// padding: 20px 0;
background-color: #fff;
.back{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
border-radius: 5px;
cursor: pointer;
background-color: #6da0ff;
font-size: 14px;
font-weight: normal;
}
.back {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
border-radius: 5px;
cursor: pointer;
background-color: #6da0ff;
font-size: 14px;
font-weight: normal;
}
}
.view-container {
// height: 100vh;
.container {
width: $base-container-width;
@ -280,8 +256,10 @@ function downloadImage(imageUrl: any, filename: any) {
// height: 1600px;
display: flex;
padding-bottom: 20px;
.left {
width: 1195px;
// height: 800px;
.gruop {
position: relative;
@ -289,6 +267,7 @@ function downloadImage(imageUrl: any, filename: any) {
width: 100%;
height: 800px;
background-color: #fff;
.no {
width: 100%;
height: 100%;
@ -296,24 +275,29 @@ function downloadImage(imageUrl: any, filename: any) {
text-align: center;
line-height: 800px;
}
.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;
@ -324,6 +308,7 @@ function downloadImage(imageUrl: any, filename: any) {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
cursor: pointer;
i {
width: 100%;
height: 100%;
@ -334,12 +319,14 @@ function downloadImage(imageUrl: any, filename: any) {
}
}
}
.resource {
width: 100%;
height: 500px;
margin-top: 20px;
padding: 20px;
background-color: #fff;
.files-box {
.item {
// width: 200px;
@ -351,12 +338,14 @@ function downloadImage(imageUrl: any, filename: any) {
text-decoration: underline;
cursor: pointer;
}
.item:hover {
color: Blue;
}
}
}
}
.right {
width: 400px;
@ -364,6 +353,7 @@ function downloadImage(imageUrl: any, filename: any) {
display: flex;
flex-direction: column;
justify-content: space-between;
.course-info {
width: 100%;
height: 800px;
@ -371,15 +361,18 @@ function downloadImage(imageUrl: any, filename: any) {
display: flex;
flex-direction: column;
justify-content: space-between;
.item {
width: 100%;
height: 33%;
background-color: #fff;
}
.item:nth-child(2) {
margin: 20px 0;
}
}
.chapter {
overflow-y: auto;
height: 500px;
@ -390,13 +383,17 @@ function downloadImage(imageUrl: any, filename: any) {
}
}
}
::-webkit-scrollbar {
width: 4px; /* 滚动条宽度 */
width: 4px;
/* 滚动条宽度 */
}
/* 设置滚动条上下按钮的样式 */
::-webkit-scrollbar-button {
background-color: #fff;
}
:deep(.docx-wrapper) {
background-color: #fff;
}

Write Preview
Loading…
Cancel
Save