知识点简介

teaching_integration_platform_template/src/views/knowledge/components/BriefIntroduction.vue

@@ -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> -->

teaching_integration_platform_template/src/views/knowledge/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="title">xxx知识点 
+  <div class="title">xxx知识点
     <div class="back" @click="router.go(-1)">返回</div>
   </div>
   <div class="container" v-if="loading">
@@ -22,48 +22,30 @@
         </div>
         <div class="pdf" v-if="flag === 3">
           <!-- <vuePdf /> -->
-          <VuePdf
+          <VuePdf v-for="page in numOfPages" :key="page" :src="pdfUrl" :page="page" />
-            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
+        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-loading="isTabsLoading">
-          v-model="activeName"
-          class="demo-tabs"
-          @tab-click="handleClick"
-          v-loading="isTabsLoading"
-        >
           <el-tab-pane label="视频" name="1">
             <div class="files-box">
-              <div
+              <div class="item" v-for="item in courseFilesList.video" :key="item.id" @click="clickFile(item, 2)">
-                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
+              <div class="item" v-for="item in courseFilesList.PPT" :key="item.id" @click="clickFile(item, 3)">
-                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
+              <div class="item" v-for="item in courseFilesList.word" :key="item.id" @click="clickFile(item, 4)">
-                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
+              <div class="item" v-for="item in courseFilesList.other" :key="item.id" @click="download(item)">
-                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;
+  .back {
-      top: 50%;
+    position: absolute;
-      transform: translateY(-50%);
+    top: 50%;
-      right: 30px;
+    transform: translateY(-50%);
-      width: 60px;
+    right: 30px;
-      height: 30px;
+    width: 60px;
-      text-align: center;
+    height: 30px;
-      line-height: 30px;
+    text-align: center;
-      color: #fff;
+    line-height: 30px;
-      border-radius: 5px;
+    color: #fff;
-      cursor: pointer;
+    border-radius: 5px;
-      background-color: #6da0ff;
+    cursor: pointer;
-      font-size: 14px;
+    background-color: #6da0ff;
-      font-weight: normal;
+    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;
 }