herenshan112
/
hxgksystemapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

知行学院样式调整

v3_liwenxuan
liwenxuan 2 years ago
parent
f9a4199409
commit
b555b98238
4 changed files with 90 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/api/knowledge/scroll.js
  2. 50
      src/views/knowledge/knowledge/components/archivestype.vue
  3. 37
      src/views/knowledge/knowledge/index.vue
  4. 38
      src/views/knowledge/news/index.vue

4
src/api/knowledge/scroll.js
View File

@ -25,9 +25,9 @@ export function onScroll() {
navIndex = n navIndex = n
} }
//若滚动条已经到底则直接激活最后一个导航 //若滚动条已经到底则直接激活最后一个导航
if (scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight) { /* if (scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight) {
navIndex = offsetTopArr.length - 1; navIndex = offsetTopArr.length - 1;
} } */
} }
//active.value = navIndex //active.value = navIndex
return navIndex; return navIndex;

50
src/views/knowledge/knowledge/components/archivestype.vue
View File

@ -169,7 +169,7 @@ function showContentDialog(item: any) {
<div v-show="showCards" class="grid-tuijian"> <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)" /> <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"> <div class="card-right">
@ -178,6 +178,24 @@ function showContentDialog(item: any) {
<span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</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 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="myicons">
<span class="fa fa-star-o"></span>收藏(<span>{{ item.gCollectionSum }}</span>) <span <span class="fa fa-star-o"></span>收藏(<span>{{ item.gCollectionSum }}</span>) <span
class="fa fa-thumbs-o-up"></span>赞(<span>{{ class="fa fa-thumbs-o-up"></span>赞(<span>{{
@ -205,18 +223,26 @@ function showContentDialog(item: any) {
.grid-tuijian { /* .grid-tuijian {
/* border-top: solid 1px; */
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 484px); grid-template-columns: repeat(auto-fill, 474px);
gap: 10px; gap: 10px;
grid-auto-flow: row dense; 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 { .tuijian-card {
display: flex; display: flex;
width: 481px; /* width: 481px; */
width: 471px;
height: 140px; height: 140px;
padding: 3px; padding: 3px;
border-radius: 8px; border-radius: 8px;
@ -240,11 +266,19 @@ function showContentDialog(item: any) {
} }
.card-title { .card-title {
height: 1.5em !important; /* height: 1.5em !important;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; 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 { .card-text {

37
src/views/knowledge/knowledge/index.vue
View File

@ -205,16 +205,16 @@ function scrollTo(index: any) {
<el-carousel indicator-position="outside" class="mycarousel" arrow="always"> <el-carousel indicator-position="outside" class="mycarousel" arrow="always">
<el-carousel-item v-for="(item, index) in carousel" :key="index" @click="showContentDialog(item)"> <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-item>
</el-carousel> </el-carousel>
<div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)"> <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"> <div class="card-right">
<span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span> <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> <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); height: calc(100vh - 125px);
width: 100%; width: 100%;
overflow: auto; overflow: auto;
padding: 0 10px 0 30px; padding: 0 10px 0 0;
display: grid; display: grid;
/* 声明了三列，宽度分别为 200px 100px 200px */ /* 声明了三列，宽度分别为 200px 100px 200px */
grid-template-columns: 200px auto; grid-template-columns: 163px auto;
} }
.content { .content {
background-color: white; background-color: white;
width: auto; width: auto;
max-width: 87%; max-width: 97%;
padding-left: 9%; padding-left: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 5px; border-radius: 5px;
} }
@ -324,7 +324,7 @@ li:hover {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 484px); grid-template-columns: repeat(auto-fill, 473px);
gap: 10px; gap: 10px;
grid-auto-flow: row dense; grid-auto-flow: row dense;
@ -332,7 +332,7 @@ li:hover {
.tuijian-card { .tuijian-card {
display: flex; display: flex;
width: 481px; width: 471px;
height: 140px; height: 140px;
padding: 3px; padding: 3px;
border-radius: 8px; border-radius: 8px;
@ -346,28 +346,33 @@ li:hover {
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 3; grid-row-end: 3;
border-radius: 15px; border-radius: 15px;
width: 480px; width: 470px;
height: 290px; height: 290px;
} }
.card-right { .card-right {
display: flex; display: flex;
width: 300px; width: 260px;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 8px; padding-left: 8px;
} }
.card-title { .card-title {
/* height: 1.5em !important;
height: 1.5em !important;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; 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;
} }

38
src/views/knowledge/news/index.vue
View File

@ -171,6 +171,7 @@ function scrollTo(index: any) {
} }
//跳转至相关内容 end //跳转至相关内容 end
</script> </script>
<template> <template>
<div class="app-container"> <div class="app-container">
@ -204,16 +205,16 @@ function scrollTo(index: any) {
<el-carousel indicator-position="outside" class="mycarousel" arrow="always"> <el-carousel indicator-position="outside" class="mycarousel" arrow="always">
<el-carousel-item v-for="(item, index) in carousel" :key="index" @click="showContentDialog(item)"> <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-item>
</el-carousel> </el-carousel>
<div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)"> <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"> <div class="card-right">
<span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span> <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> <span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</span>
@ -251,17 +252,17 @@ function scrollTo(index: any) {
height: calc(100vh - 125px); height: calc(100vh - 125px);
width: 100%; width: 100%;
overflow: auto; overflow: auto;
padding: 0 10px 0 30px; padding: 0 10px 0 0;
display: grid; display: grid;
/* 声明了三列，宽度分别为 200px 100px 200px */ /* 声明了三列，宽度分别为 200px 100px 200px */
grid-template-columns: 200px auto; grid-template-columns: 163px auto;
} }
.content { .content {
background-color: white; background-color: white;
width: auto; width: auto;
max-width: 87%; max-width: 97%;
padding-left: 9%; padding-left: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 5px; border-radius: 5px;
} }
@ -323,7 +324,7 @@ li:hover {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 484px); grid-template-columns: repeat(auto-fill, 473px);
gap: 10px; gap: 10px;
grid-auto-flow: row dense; grid-auto-flow: row dense;
@ -331,7 +332,7 @@ li:hover {
.tuijian-card { .tuijian-card {
display: flex; display: flex;
width: 481px; width: 471px;
height: 140px; height: 140px;
padding: 3px; padding: 3px;
border-radius: 8px; border-radius: 8px;
@ -345,28 +346,33 @@ li:hover {
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 3; grid-row-end: 3;
border-radius: 15px; border-radius: 15px;
width: 480px; width: 470px;
height: 290px; height: 290px;
} }
.card-right { .card-right {
display: flex; display: flex;
width: 300px; width: 260px;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 8px; padding-left: 8px;
} }
.card-title { .card-title {
/* height: 1.5em !important;
height: 1.5em !important;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; 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;
} }

Write Preview
Loading…
Cancel
Save