知识库详情页面展示pdf,视频,富文本

src/views/knowledge/knowledge/components/archivestype.vue

@@ -2,7 +2,7 @@
 import { useUserStore } from "@/store/modules/user"
 import { ref, watch } from 'vue'
 import { getUserDetail, getZxxyNavis, getTuijian } from '@/api/knowledge/index'
-
+import KnowledgeContent from '@/views/knowledge/knowledge/components/KnowledgeContent.vue'
 import { UserQuery, UserDetail, NaviQuery, Navi, Graphicform, PageParam } from '@/api/knowledge/types'
 import { formatDate } from '@/api/knowledge/scroll'
 import { useRouter } from 'vue-router'
@@ -167,12 +167,21 @@ function handleCurrentChange() {
 const showCards = ref(0)
 
 
+//dialog
+const cardContentSource = ref<Graphicform>({});
+const showContentBox= ref(false);	//详情弹窗
+function showContentDialog(item:any){
+
+  showContentBox.value = true;
+  cardContentSource.value=item;
+}
+
 
 
 </script>
 <template>
   <div class="models ">
-
+    <KnowledgeContent v-model:isShow="showContentBox" :contentSource="cardContentSource"></KnowledgeContent>
     <div class="model-title">
       <h3>{{ props.liContent?.atTitle }}</h3>
 
@@ -181,7 +190,7 @@ const showCards = ref(0)
     <div class="grid-tuijian" v-show="showCards">
 
 
-      <div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card">
+      <div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)">
         <img style="width: 140px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
           referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
 

src/views/knowledge/knowledge/index.vue

@@ -4,6 +4,7 @@ import { ref } from 'vue'
 import { getUserDetail, getZxxyNavis, getTuijian, getCarousel } from '@/api/knowledge/index'
 import Archivestype from '@/views/knowledge/knowledge/components/archivestype.vue'
 import Navili from './components/Navili.vue'
+import KnowledgeContent from './components/KnowledgeContent.vue'
 import { UserQuery, UserDetail, NaviQuery, Navi, Graphicform, PageParam } from '@/api/knowledge/types'
 import { onScroll, scrollTo, formatDate } from '@/api/knowledge/scroll'
 import { useRouter } from 'vue-router'
@@ -124,6 +125,7 @@ onMounted(() => {
 function jsScroll() {
   active.value = onScroll();
 }
+
 onUnmounted(() => {
   // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
   window.removeEventListener('scroll', onScroll)
@@ -141,10 +143,20 @@ function handleCurrentChange() {
 
 }
 
+//dialog
+const cardContentSource = ref<Graphicform>({});
+const showContentBox= ref(false);	//详情弹窗
+function showContentDialog(item:any){
+
+  showContentBox.value = true;
+  cardContentSource.value=item;
+}
+
 
 </script>
 <template>
   <div class="know-main">
+    <KnowledgeContent v-model:isShow="showContentBox" :contentSource="cardContentSource"></KnowledgeContent>
     <!-- 内容区域 -->
     <div class="content" style="margin-left: 10% ;padding-right: 15%;">
 
@@ -155,15 +167,15 @@ function handleCurrentChange() {
 
         </div>
         <div class="grid-tuijian">
-          <el-carousel indicator-position="outside" class="mycarousel" style="width: 412px;height:290px; ">
+          <el-carousel indicator-position="outside" class="mycarousel" style="width: 412px;height:290px; " arrow="always">
             <el-carousel-item v-for="(item, index) in carousel" :key="index" >
               <!-- <h3 text="2xl" justify="center">{{ item.gThumbnail }}</h3> -->
-              <img style="width: 412px; height: 300px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
+              <img style="width: 412px; height: 300px;border-radius:16px;margin-top: 4px; margin-left: 4px;"
                 referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
             </el-carousel-item>
           </el-carousel>
 
-          <div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card">
+          <div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)">
             <img style="width: 140px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
               referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
 
@@ -195,6 +207,7 @@ function handleCurrentChange() {
 
 
     </div>
+    
     <!-- 导航区域 -->
     <ul class="navs">
       <li :class="{ active: active === 0 }" @click="scrollTo(0)">
@@ -204,7 +217,9 @@ function handleCurrentChange() {
         :active=active @click="scrollTo(index+1)"></Navili>
 
     </ul>
+    
   </div>
+  
 </template>