From b555b98238b275b7b11e48d9df488f2b10258f7e Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Tue, 31 Oct 2023 16:46:56 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9F=A5=E8=A1=8C=E5=AD=A6=E9=99=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/knowledge/scroll.js                   |  4 +-
 .../knowledge/components/archivestype.vue     | 52 +++++++++++++++----
 src/views/knowledge/knowledge/index.vue       | 37 +++++++------
 src/views/knowledge/news/index.vue            | 42 ++++++++-------
 4 files changed, 90 insertions(+), 45 deletions(-)

diff --git a/src/api/knowledge/scroll.js b/src/api/knowledge/scroll.js
index 8c3d72fc1..e599da5e9 100644
--- a/src/api/knowledge/scroll.js
+++ b/src/api/knowledge/scroll.js
@@ -25,9 +25,9 @@ export function onScroll() {
       navIndex = n
     }
     //若滚动条已经到底则直接激活最后一个导航
-    if (scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight) {
+    /* if (scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight) {
       navIndex = offsetTopArr.length - 1;
-    }
+    } */
   }
   //active.value = navIndex
   return navIndex;
diff --git a/src/views/knowledge/knowledge/components/archivestype.vue b/src/views/knowledge/knowledge/components/archivestype.vue
index 87d206d91..aa542e59d 100644
--- a/src/views/knowledge/knowledge/components/archivestype.vue
+++ b/src/views/knowledge/knowledge/components/archivestype.vue
@@ -169,7 +169,7 @@ function showContentDialog(item: any) {
     <div v-show="showCards" class="grid-tuijian">
 
 
-      <div v-for="(item, index1) in tuijianPage" :key="index1" class="tuijian-card" @click="showContentDialog(item)">
+      <!-- <div v-for="(item, index1) in tuijianPage" :key="index1" class="tuijian-card" @click="showContentDialog(item)">
         <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">
@@ -185,7 +185,25 @@ function showContentDialog(item: any) {
             <span class="fa fa-eye">阅读</span>(<span>{{ item.gRead }}</span>)
           </span>
         </div>
-      </div>
+      </div> -->
+
+      <div v-for="(item, index1) in tuijianPage" :key="index1" class="tuijian-card" @click="showContentDialog(item)">
+            <img style="width: 196px; 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">
+              <span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span>
+              <!-- <span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span> -->
+
+              <span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</span>
+
+              <span class="myicons">
+                <span class="fa fa-star-o"></span>收藏(<span>{{ item.gCollectionSum }}</span>) <span
+                  class="fa fa-thumbs-o-up"></span>赞(<span>{{
+                    item.gLikes }}</span>) <span class="fa fa-thumbs-o-down"></span>踩(<span>{{ item.gStepOn }}</span>)
+                <span class="fa fa-eye">阅读</span>(<span>{{ item.gRead }}</span>)
+              </span>
+            </div>
+          </div>
 
     </div>
     <el-pagination v-if="pageParamTuijian.total > 0" v-model:current-page="pageParamTuijian.page" v-model:page-size="pageParamTuijian.pagesize"  class="pagi" layout="prev, pager, next, jumper" :total="pageParamTuijian.total" @current-change="handleCurrentChange" />
@@ -205,18 +223,26 @@ function showContentDialog(item: any) {
 
 
 
-.grid-tuijian {
-  /* border-top: solid 1px; */
+/* .grid-tuijian {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 484px);
+  grid-template-columns: repeat(auto-fill, 474px);
   gap: 10px;
   grid-auto-flow: row dense;
+} */
+.grid-tuijian {
+display: grid;
+grid-template-columns: repeat(auto-fill, 473px);
+gap: 10px;
+grid-auto-flow: row dense;
 
 }
-
+h3 {
+  margin-left: 8px;
+}
 .tuijian-card {
   display: flex;
-  width: 481px;
+  /* width: 481px; */
+  width: 471px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;
@@ -240,11 +266,19 @@ function showContentDialog(item: any) {
 }
 
 .card-title {
-  height: 1.5em !important;
+  /* height: 1.5em !important;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 1; */
+  word-break: break-all;
+  height: 3.5em !important;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  padding-left: 0.7em;
+  padding-top: 0.5em;
 }
 
 .card-text {
diff --git a/src/views/knowledge/knowledge/index.vue b/src/views/knowledge/knowledge/index.vue
index fd1d2282a..169e4c07b 100644
--- a/src/views/knowledge/knowledge/index.vue
+++ b/src/views/knowledge/knowledge/index.vue
@@ -205,16 +205,16 @@ function scrollTo(index: any) {
           <el-carousel indicator-position="outside" class="mycarousel" arrow="always">
             <el-carousel-item v-for="(item, index) in carousel" :key="index" @click="showContentDialog(item)">
 
-              <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)" />
+              <img style="width: 471px; 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: 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)" />
+            <img style="width: 196px; 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">
               <span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span>
-              <span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span>
+              <!-- <span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span> -->
 
               <span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</span>
 
@@ -252,17 +252,17 @@ function scrollTo(index: any) {
   height: calc(100vh - 125px);
   width: 100%;
   overflow: auto;
-  padding: 0 10px 0 30px;
+  padding: 0 10px 0 0;
   display: grid;
   /*  声明了三列，宽度分别为 200px 100px 200px */
-  grid-template-columns: 200px auto;
+  grid-template-columns: 163px auto;
 }
 
 .content {
   background-color: white;
   width: auto;
-  max-width: 87%;
-  padding-left: 9%;
+  max-width: 97%;
+  padding-left: 20px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   border-radius: 5px;
 }
@@ -324,7 +324,7 @@ li:hover {
 
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, 484px);
+  grid-template-columns: repeat(auto-fill, 473px);
   gap: 10px;
   grid-auto-flow: row dense;
 
@@ -332,7 +332,7 @@ li:hover {
 
 .tuijian-card {
   display: flex;
-  width: 481px;
+  width: 471px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;
@@ -346,28 +346,33 @@ li:hover {
   grid-row-start: 1;
   grid-row-end: 3;
   border-radius: 15px;
-  width: 480px;
+  width: 470px;
   height: 290px;
 
 }
 
 .card-right {
   display: flex;
-  width: 300px;
+  width: 260px;
   flex-direction: column;
   flex-wrap: wrap;
   padding-left: 8px;
 }
 
 .card-title {
-
-
-  height: 1.5em !important;
+  /* height: 1.5em !important;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  -webkit-line-clamp: 1;
-
+  -webkit-line-clamp: 1; */
+  word-break: break-all;
+  height: 3.5em !important;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  padding-left: 0.7em;
+  padding-top: 0.5em;
 
 
 }
diff --git a/src/views/knowledge/news/index.vue b/src/views/knowledge/news/index.vue
index 3c6dc63be..adf5d2e84 100644
--- a/src/views/knowledge/news/index.vue
+++ b/src/views/knowledge/news/index.vue
@@ -171,6 +171,7 @@ function scrollTo(index: any) {
 }
 //跳转至相关内容 end
 
+
 </script>
 <template>
   <div class="app-container">
@@ -204,16 +205,16 @@ function scrollTo(index: any) {
           <el-carousel indicator-position="outside" class="mycarousel" arrow="always">
             <el-carousel-item v-for="(item, index) in carousel" :key="index" @click="showContentDialog(item)">
 
-              <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)" />
+              <img style="width: 471px; 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: 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)" />
+            <img style="width: 196px; 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">
               <span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span>
-              <span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span>
+              <!-- <span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span> -->
 
               <span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</span>
 
@@ -227,11 +228,11 @@ function scrollTo(index: any) {
           </div>
 
         </div>
-        <el-pagination v-if="pageParamTuijian.total > 0" v-model:current-page="pageParamTuijian.page" v-model:page-size="pageParamTuijian.pagesize"  class="pagi" layout="prev, pager, next, jumper" :total="pageParamTuijian.total" @current-change="handleCurrentChange" />
+        <el-pagination v-if="pageParamTuijian.total > 0" v-model:current-page="pageParamTuijian.page" v-model:page-size="pageParamTuijian.pagesize" class="pagi" layout="prev, pager, next, jumper" :total="pageParamTuijian.total" @current-change="handleCurrentChange" />
       </div>
       <!-- 各知识/新闻分区 -->
 
-      <template v-for="(item, index) in naviList" :key="index">
+      <template v-for="(item, index) in naviList"  :key="index">
         <Archivestype :li-content=item :index=(index) :fatheris-ready="fatherisReady" :router-url="routerUrl"></Archivestype>
       </template>
 
@@ -251,17 +252,17 @@ function scrollTo(index: any) {
   height: calc(100vh - 125px);
   width: 100%;
   overflow: auto;
-  padding: 0 10px 0 30px;
+  padding: 0 10px 0 0;
   display: grid;
   /*  声明了三列，宽度分别为 200px 100px 200px */
-  grid-template-columns: 200px auto;
+  grid-template-columns: 163px auto;
 }
 
 .content {
   background-color: white;
   width: auto;
-  max-width: 87%;
-  padding-left: 9%;
+  max-width: 97%;
+  padding-left: 20px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   border-radius: 5px;
 }
@@ -323,7 +324,7 @@ li:hover {
 
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, 484px);
+  grid-template-columns: repeat(auto-fill, 473px);
   gap: 10px;
   grid-auto-flow: row dense;
 
@@ -331,7 +332,7 @@ li:hover {
 
 .tuijian-card {
   display: flex;
-  width: 481px;
+  width: 471px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;
@@ -345,28 +346,33 @@ li:hover {
   grid-row-start: 1;
   grid-row-end: 3;
   border-radius: 15px;
-  width: 480px;
+  width: 470px;
   height: 290px;
 
 }
 
 .card-right {
   display: flex;
-  width: 300px;
+  width: 260px;
   flex-direction: column;
   flex-wrap: wrap;
   padding-left: 8px;
 }
 
 .card-title {
-
-
-  height: 1.5em !important;
+  /* height: 1.5em !important;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  -webkit-line-clamp: 1;
-
+  -webkit-line-clamp: 1; */
+  word-break: break-all;
+  height: 3.5em !important;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  padding-left: 0.7em;
+  padding-top: 0.5em;
 
 
 }