知行学院样式调整

src/api/knowledge/scroll.js

@@ -14,7 +14,7 @@ export function onScroll() {
   })
   // 获取当前文档流的 scrollTop
   //const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-  const scrollTop = document.querySelector('.app-container').scrollTop || document.body.scrollTop
+  const scrollTop = document.querySelector('.content').scrollTop || document.body.scrollTop
 
   // 定义当前点亮的导航下标
   let navIndex = 0

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

@@ -231,7 +231,7 @@ function showContentDialog(item: any) {
 } */
 .grid-tuijian {
 display: grid;
-grid-template-columns: repeat(auto-fill, 473px);
+grid-template-columns: repeat(auto-fill, 480px);
 gap: 10px;
 grid-auto-flow: row dense;
 
@@ -242,7 +242,7 @@ h3 {
 .tuijian-card {
   display: flex;
   /* width: 481px; */
-  width: 471px;
+  width: 480px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;

src/views/knowledge/knowledge/index.vue

@@ -84,7 +84,7 @@ onBeforeMount(() => {
 onMounted(() => {
   // 监听滚动事件
   //window.addEventListener('scroll', jsScroll, false)
-  document.querySelector('.app-container')!.addEventListener('scroll', jsScroll, false)
+  document.querySelector('.content')!.addEventListener('scroll', jsScroll, false)
 
   document.querySelector('.navs')!.addEventListener('wheel', (e) => {
     //阻止默认行为（页面的滚动行为）
@@ -193,6 +193,7 @@ function scrollTo(index: any) {
 
 
     <!-- 内容区域 -->
+    <div class = "content1">
     <div class="content">
 
       <div class="models ">
@@ -238,6 +239,7 @@ function scrollTo(index: any) {
 
 
     </div>
+  </div>
     <!-- 内容详情组件 -->
     <KnowledgeContent v-model:isShow="showContentBox" :content-source="cardContentSource"></KnowledgeContent>
 
@@ -261,12 +263,28 @@ function scrollTo(index: any) {
 .content {
   background-color: white;
   width: auto;
-  max-width: 97%;
+  max-width: 100%;
+  margin-top: -20px;
   padding-left: 20px;
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-  border-radius: 5px;
+  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
+  border-radius: 7px;
+  overflow-y:auto;
+  height: 103%;
 }
 
+.content1 {
+  height: calc(100vh - 125px);
+  width: auto;
+  /* max-width: 98.4%; */
+  margin-right: 34px;
+  border-radius: 7px;
+  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;  */
+  overflow:hidden;
+ 
+}
+::-webkit-scrollbar {
+  display: none;
+}
 h3 {
   margin-left: 10px;
 }
@@ -316,7 +334,7 @@ li:hover {
 }
 
 .model-title {
-  margin-top: -9px;
+  margin-top: 29px;
   height: 30px;
 }
 
@@ -324,7 +342,7 @@ li:hover {
 
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, 473px);
+  grid-template-columns: repeat(auto-fill, 480px);
   gap: 10px;
   grid-auto-flow: row dense;
 
@@ -332,7 +350,7 @@ li:hover {
 
 .tuijian-card {
   display: flex;
-  width: 471px;
+  width: 480px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;

src/views/knowledge/news/index.vue

@@ -84,7 +84,7 @@ onBeforeMount(() => {
 onMounted(() => {
   // 监听滚动事件
   //window.addEventListener('scroll', jsScroll, false)
-  document.querySelector('.app-container')!.addEventListener('scroll', jsScroll, false)
+  document.querySelector('.content')!.addEventListener('scroll', jsScroll, false)
 
   document.querySelector('.navs')!.addEventListener('wheel', (e) => {
     //阻止默认行为（页面的滚动行为）
@@ -193,6 +193,7 @@ function scrollTo(index: any) {
 
 
     <!-- 内容区域 -->
+    <div class = "content1">
     <div class="content">
 
       <div class="models ">
@@ -238,6 +239,7 @@ function scrollTo(index: any) {
 
 
     </div>
+  </div>
     <!-- 内容详情组件 -->
     <KnowledgeContent v-model:isShow="showContentBox" :content-source="cardContentSource"></KnowledgeContent>
 
@@ -261,12 +263,28 @@ function scrollTo(index: any) {
 .content {
   background-color: white;
   width: auto;
-  max-width: 97%;
+  max-width: 100%;
+  margin-top: -20px;
   padding-left: 20px;
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-  border-radius: 5px;
+  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
+  border-radius: 7px;
+  overflow-y:auto;
+  height: 103%;
 }
 
+.content1 {
+  height: calc(100vh - 125px);
+  width: auto;
+  /* max-width: 98.4%; */
+  margin-right: 34px;
+  border-radius: 7px;
+  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;  */
+  overflow:hidden;
+ 
+}
+::-webkit-scrollbar {
+  display: none;
+}
 h3 {
   margin-left: 10px;
 }
@@ -316,7 +334,7 @@ li:hover {
 }
 
 .model-title {
-  margin-top: -9px;
+  margin-top: 29px;
   height: 30px;
 }
 
@@ -324,7 +342,7 @@ li:hover {
 
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, 473px);
+  grid-template-columns: repeat(auto-fill, 480px);
   gap: 10px;
   grid-auto-flow: row dense;
 
@@ -332,7 +350,7 @@ li:hover {
 
 .tuijian-card {
   display: flex;
-  width: 471px;
+  width: 480px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;