界面优化

src/api/knowledge/types.ts

@@ -42,7 +42,8 @@ export interface Navi{
   atUid:string;
   //排序
   atSort:string;
-
+/*   //该导航栏中有无card
+  hasCard:Boolean; */
 }
 export type cardList = PageResult<Graphicform[]>
 //卡片
@@ -157,3 +158,9 @@ interface PageResultJava<T> {
   pageNum:number;
 
 }
+
+//标题下有无内容
+export interface ShowTitle {
+  atIdAndGParentSun: string;
+  hasCard:Boolean;
+}

src/views/knowledge/knowledge/components/Navili.vue

@@ -1,5 +1,9 @@
 <script lang='ts' setup>
 import { scrollTo } from '@/api/knowledge/scroll'
+import { useKnowledgeStore } from "@/store/modules/knowledge"
+import { ShowTitle } from '@/api/knowledge/types'
+import { storeToRefs } from 'pinia';
+const showli = ref(true);
 const props = defineProps({
     oneli: {
         type: Object,
@@ -13,12 +17,52 @@ const props = defineProps({
     active: {
         type: Number,
         default: 0
+    },
+    knowledgeStore: {
+        type: Object,
+    },
+   fatherisReady1:{
+        type:Number,
+   }
+})
+function navShow() {
+
+    //标题下是否有内容
+    const KnowledgeStore = useKnowledgeStore();
+    let {knowledgeTitlesShow} = storeToRefs(KnowledgeStore)
+    // const
+    //const data = ref<ShowTitle[]>(KnowledgeStore.knowledgeTitlesShow);
+    console.log("knowledgeTitlesShow--->",knowledgeTitlesShow.value,KnowledgeStore)
+    if(knowledgeTitlesShow.value && knowledgeTitlesShow.value.length > 0){
+        knowledgeTitlesShow.value.forEach((val,index)=>{
+            console.log("index--->",index)
+            console.log("val--->",val)
+        })
     }
+    // console.log("data.value.length="+data.value.length)
+    // for (let item of knowledgeTitlesShow.value) {
+    //     console.log(1)
+    //     console.log(item)
+    //     if (item.hasCard == false) {
+    //             console.log(item)
+    //             showli.value = false;
+    //         }
+    // }  
+   
+}
+
+
+watch(() => [props.fatherisReady1], (newVal, oldVal) => {
+    // navShow()
 })
-const liIndex = props.index + 1;
+
+
+
+
+
 </script>
 <template>
-    <li :class="{ active: active === index }" @click="scrollTo(index)">
+    <li :class="{ active: active === index }" @click="scrollTo(index)" v-if="showli">
         {{ oneli?.atTitle }}
     </li>
 </template>

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

@@ -3,16 +3,23 @@ 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 { UserQuery, UserDetail, NaviQuery, Navi, Graphicform, PageParam, ShowTitle } from '@/api/knowledge/types'
 import { formatDate } from '@/api/knowledge/scroll'
 import { useRouter } from 'vue-router'
 import errimg from '@/assets/404_images/imgNotFound.png'
+import { useKnowledgeStore } from "@/store/modules/knowledge"
+
+
+
+
+const showArea = ref(true);
+
 const props = defineProps({
   liContent: {
     type: Object,
 
   },
-  routerUrl:{
+  routerUrl: {
     type: String,
   },
 
@@ -27,7 +34,8 @@ const props = defineProps({
   fatherisReady: {
     type: Number,
     default: 0
-  }
+  },
+
 })
 
 const userStore = useUserStore();
@@ -85,40 +93,59 @@ onMounted(() => {
 
   //console.log(props.liContent?.gParentSun)
 
-
+  //console.log(useKnowledgeStore().$state)
 
 
 });
 
-watch(() => [props.fatherisReady, props.liContent,props.routerUrl], (newVal, oldVal) => {
+watch(() => [props.fatherisReady, props.liContent, props.routerUrl], (newVal, oldVal) => {
-    //console.log(newVal, oldVal); // [11, 22], [1, 2]
+  //console.log(newVal, oldVal); // [11, 22], [1, 2]
-    const routerUrl = oldVal[2] as String;
+  const routerUrl = oldVal[2] as String;
-    const liContent = newVal[1] as any;
+  const liContent = newVal[1] as any;
-    //console.log(newVal[1])
+  //console.log(newVal[1])
-    //console.log(oldVal[2])
+  //console.log(oldVal[2])
+
+  //console.log(routerUrl)
+  if (routerUrl?.endsWith("index")) {//此时页面为知识库
+    naviQueryParam.atParentId = '16213848089876281'
+    pageParamTuijian.archivesTypeAtParentId = '16213848089876281'
+  } else if (routerUrl?.endsWith("news")) {//此时页面为新闻资讯
+    naviQueryParam.atParentId = '16213847972425134'
+    pageParamTuijian.archivesTypeAtParentId = '16213847972425134'
+  }
 
-    //console.log(routerUrl)
+  pageParamTuijian.gParentSun = liContent.atId;
-    if (routerUrl?.endsWith("index")) {//此时页面为知识库
+  //console.log(pageParamTuijian.gParentSun)
-      naviQueryParam.atParentId = '16213848089876281'
+  //推荐 
-      pageParamTuijian.archivesTypeAtParentId = '16213848089876281'
+  getTuijian(pageParamTuijian)
-    } else if (routerUrl?.endsWith("news")) {//此时页面为新闻资讯
+    .then(({ data }) => {
-      naviQueryParam.atParentId = '16213847972425134'
+      tuijianPage.value = data.list
-      pageParamTuijian.archivesTypeAtParentId = '16213847972425134'
+      //console.log(tuijianPage.value)
-    }
+      pageParamTuijian.page = data.pageNum
+      pageParamTuijian.total = data.total
+      if (pageParamTuijian.total > 0) {
+        showCards.value = 1;
+      }
+      const KnowledgeStore = useKnowledgeStore();
 
-    pageParamTuijian.gParentSun = liContent.atId;
-    //console.log(pageParamTuijian.gParentSun)
-    //推荐 
-    getTuijian(pageParamTuijian)
-      .then(({ data }) => {
-        tuijianPage.value = data.list
-        pageParamTuijian.page = data.pageNum
-        pageParamTuijian.total = data.total
-        if(pageParamTuijian.total>0){
-          showCards.value = 1;
-        }
       
-      });
+      if (tuijianPage.value.length > 0) {
+        //本标题下有数据
+        KnowledgeStore.$patch((state) => {
+          state.knowledgeTitlesShow.push({ atIdAndGParentSun: liContent.atId, hasCard: true })
+        })
+        showArea.value = true;
+      }else{
+        KnowledgeStore.$patch((state) => {
+          state.knowledgeTitlesShow.push({ atIdAndGParentSun: liContent.atId, hasCard: false })
+          
+        })
+        showArea.value = false;
+      }
+     
+
+
+    });
 
 })
 
@@ -169,29 +196,30 @@ const showCards = ref(0)
 
 //dialog
 const cardContentSource = ref<Graphicform>({});
-const showContentBox= ref(false);	//详情弹窗
+const showContentBox = ref(false);	//详情弹窗
-function showContentDialog(item:any){
+function showContentDialog(item: any) {
 
   showContentBox.value = true;
-  cardContentSource.value=item;
+  cardContentSource.value = item;
+
 }
 
 
 
 </script>
 <template>
-  <div class="models ">
+  <div class="models " v-if="showArea">
     <KnowledgeContent v-model:isShow="showContentBox" :contentSource="cardContentSource"></KnowledgeContent>
     <div class="model-title">
       <h3>{{ props.liContent?.atTitle }}</h3>
 
     </div>
-    <div v-show="!showCards" style="text-align: center;padding-top: 5%;" >暂无数据</div>
+    <div v-show="!showCards" style="text-align: center;padding-top: 5%;">暂无数据</div>
     <div class="grid-tuijian" v-show="showCards">
 
 
       <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;"
+        <img style="width: 170px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
           referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
 
         <div class="card-right">
@@ -218,7 +246,7 @@ function showContentDialog(item:any){
 <style>
 .models {
   width: 100%;
-   min-height: 200px;
+  min-height: 200px;
 
 
 }
@@ -232,7 +260,7 @@ function showContentDialog(item:any){
 .grid-tuijian {
   /* border-top: solid 1px; */
   display: grid;
-  grid-template-columns: repeat(auto-fill, 415px);
+  grid-template-columns: repeat(auto-fill, 484px);
   gap: 10px;
   grid-auto-flow: row dense;
 
@@ -240,7 +268,7 @@ function showContentDialog(item:any){
 
 .tuijian-card {
   display: flex;
-  width: 412px;
+  width: 481px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;

src/views/knowledge/knowledge/index.vue

@@ -1,5 +1,6 @@
 <script lang='ts' setup>
 import { useUserStore } from "@/store/modules/user"
+import { useKnowledgeStore } from "@/store/modules/knowledge"
 import { ref } from 'vue'
 import { getUserDetail, getZxxyNavis, getTuijian, getCarousel } from '@/api/knowledge/index'
 import Archivestype from '@/views/knowledge/knowledge/components/archivestype.vue'
@@ -15,8 +16,8 @@ const active = ref(0); // 当前激活的导航索引
 
 const userStore = useUserStore();
 const { userKey, userToken } = userStore;
-
+//标题下是否有内容
-
+const KnowledgeStore = useKnowledgeStore();
 
 const userDetail = ref<UserDetail>({
   //证件号码
@@ -65,6 +66,7 @@ function errorImg(e: any) {
   e.srcElement.onerror = null; //防止闪图
 }
 const fatherisReady = ref(0);
+const fatherisReady1 = ref(0);
 const router = useRouter()
 const routerUrl = toRaw(router).currentRoute.value.fullPath
 onBeforeMount(() => {
@@ -108,6 +110,8 @@ onMounted(() => {
       pageParamTuijian.page = data.pageNum
       pageParamTuijian.total = data.total
       //console.log(tuijianPage.value)
+    }).finally(()=>{
+      fatherisReady1.value = 9;
     });
   getCarousel(pageParamTuijian)
     .then(({ data }) => {
@@ -121,7 +125,11 @@ onMounted(() => {
 
   //setTimeout(function(){  fatherisReady.value = 100;}, 3000);　　//三秒之后执行函数
 
+
+  
 });
+
+
 function jsScroll() {
   active.value = onScroll();
 }
@@ -145,20 +153,22 @@ function handleCurrentChange() {
 
 //dialog
 const cardContentSource = ref<Graphicform>({});
-const showContentBox= ref(false);	//详情弹窗
+const showContentBox = ref(false);	//详情弹窗
-function showContentDialog(item:any){
+
+function showContentDialog(item: any) {
 
   showContentBox.value = true;
-  cardContentSource.value=item;
+  cardContentSource.value = item;
 }
 
 
 </script>
 <template>
-  <div class="know-main">
+
+  <div class="app-container">
     <KnowledgeContent v-model:isShow="showContentBox" :contentSource="cardContentSource"></KnowledgeContent>
     <!-- 内容区域 -->
-    <div class="content" style="margin-left: 10% ;padding-right: 15%;">
+    <div class="content">
 
       <div class="models ">
 
@@ -167,16 +177,16 @@ function showContentDialog(item:any){
 
         </div>
         <div class="grid-tuijian">
-          <el-carousel indicator-position="outside" class="mycarousel" style="width: 412px;height:290px; " arrow="always">
+          <el-carousel indicator-position="outside" class="mycarousel" arrow="always">
-            <el-carousel-item v-for="(item, index) in carousel" :key="index" >
+            <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:16px;margin-top: 4px; margin-left: 4px;"
+              <img style="width: 495px; 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" @click="showContentDialog(item)">
-            <img style="width: 140px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
+            <img style="width: 170px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
               referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
 
             <div class="card-right">
@@ -201,7 +211,7 @@ function showContentDialog(item:any){
       </div>
       <!-- 各知识/新闻分区 -->
       <Archivestype v-for="(item, index) in naviList" :liContent=item :index=(index) :fatherisReady="fatherisReady" 
-        :routerUrl="routerUrl" >
+        :routerUrl="routerUrl">
       </Archivestype>
 
 
@@ -209,15 +219,17 @@ function showContentDialog(item:any){
     </div>
 
     <!-- 导航区域 -->
-    <ul class="navs">
+
+      <ul class="navs">
       <li :class="{ active: active === 0 }" @click="scrollTo(0)">
         推荐
       </li>
-      <Navili v-for="(item, index) in naviList" :class="{ active: active === index+1 }" :oneli=item :index=(index+1)
+      <Navili v-for="(item, index) in naviList" :class="{ active: active === index+1 }" :oneli=item :index=(index+1) :fatherisReady1="fatherisReady1"
-        :active=active @click="scrollTo(index+1)"></Navili>
+        :active=active @click="scrollTo(index + 1)"></Navili>
 
     </ul>
 
+    
   </div>
 
 </template>
@@ -225,33 +237,48 @@ function showContentDialog(item:any){
 
 
 <style scoped>
-/* 内容区的样式 */
+
+
 .content {
   background-color: white;
-  width: 100%;
+  width:89.1%;
+  margin-left: 190px; 
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border-radius: 5px;
 }
 
-.models {
-  width: 100%;
-  /*  min-height: 500px; */
 
+/* .models {
+  
+   min-height: 500px; 
 
-}
+
+} */
 
 
 /* 导航栏的样式 */
 .navs {
+  
+  /* border:black 1px solid; */
+
+  
+  width: 192px;
   position: fixed;
-  top: 100px;
+  height: auto;
+  top: 95px;
     
+  /*  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;  */
+ /*  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset; */
 }
 
 .navs li {
   
-  padding: 0 40px;
+  text-align: center;
-  line-height: 2.6;
+  line-height: 3;
-  font-size: 15px;
+  font-size: 15.5px;
   color: #909399;
+  background-color: white;
+  margin-right: 15px;
 }
 
 .navs li:hover {
@@ -265,12 +292,15 @@ function showContentDialog(item:any){
 }
 
 .model-title {
+  margin-top: -9px;
   height: 30px;
 }
 
 .grid-tuijian {
+  
+  
   display: grid;
-  grid-template-columns: repeat(auto-fill, 415px);
+  grid-template-columns: repeat(auto-fill, 484px);
   gap: 10px;
   grid-auto-flow: row dense;
 
@@ -278,26 +308,27 @@ function showContentDialog(item:any){
 
 .tuijian-card {
   display: flex;
-  width: 412px;
+  width: 481px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;
   flex-direction: row;
   flex-wrap: wrap;
-  /* border:#909399 1px solid; */
-  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }
 
 .mycarousel {
+  
   grid-row-start: 1;
   grid-row-end: 3;
   border-radius: 15px;
+  width: 480px;
+  height: 290px;
 }
 
 .card-right {
   display: flex;
-  width: 260px;
+  width: 300px;
   flex-direction: column;
   flex-wrap: wrap;
   padding-left: 8px;
@@ -305,15 +336,6 @@ function showContentDialog(item:any){
 
 .card-title {
 
-  /* height: 1.5em !important;
-  overflow: hidden; 
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  line-height: 25px;
-  height: 85px; */
-
 
   height: 1.5em !important;
   display: -webkit-box;