root/feiyang-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新闻页面加载过慢优化

Browse Source
This commit is contained in:
77 2024-08-01 14:26:56 +08:00
parent fe33b9c5ad
commit d280be1928
1 changed files with 487 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

353
src/views/news.vue
View File

@ -22,24 +22,29 @@
<div style="width: 80%;margin: auto;"> <div style="width: 80%;margin: auto;">
<el-row style="display: flex;flex-wrap: wrap;"> <el-row style="display: flex;flex-wrap: wrap;">
<el-col :span="8" v-for="item in newshow" :key="item.id" class="colitem" style="cursor: pointer;" > <el-col :span="8" v-for="item in newshow" :key="item.id" class="colitem" style="cursor: pointer;">
<div @click="changeto(item.id)"> <div @click="changeto(item.id)">
<el-card :body-style="{ padding: '0px' }" > <el-card :body-style="{ padding: '0px' }">
<div class="card_img1 mark" :style="{ 'background-image': 'url(' + item.pic + ')' }" > <div class="card_img1 mark" :style="{ 'background-image': 'url(' + item.pic + ')' }">
<!-- <div class="date">{{item.releaseTime}}</div> --> <!-- <div class="date">{{item.releaseTime}}</div> -->
</div> </div>
<div> <div>
<div class="news_li_con"><div class="title">{{item.name}}</div> <div class="introduction" v-html="item.content"></div> </div> <div class="news_li_con">
<div class="title">{{item.name}}</div>
<div class="introduction" v-html="item.content"></div>
</div>
</div> </div>
</el-card> </el-card>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div style="width: 80%;margin: auto;"> <div style="width: 80%;margin: auto;">
<div v-for="item in rest" class="newsitem" style="overflow: hidden; padding: 30px 0 24px;position: relative;cursor: pointer;display: flex;" @click="changeto(item.id)"> <div v-for="item in rest" class="newsitem"
style="overflow: hidden; padding: 30px 0 24px;position: relative;cursor: pointer;display: flex;"
@click="changeto(item.id)">
<div class="date1" style=""><img :src="item.pic" style="width: 236px;height: 157px;"></img></div> <div class="date1" style=""><img :src="item.pic" style="width: 236px;height: 157px;"></img></div>
<div class="" style=" margin-left: 35px;overflow: hidden;"> <div class="" style=" margin-left: 35px;overflow: hidden;">
<div style=" font-size: 18px; <div style=" font-size: 18px;
@ -47,7 +52,7 @@
font-weight: bold; font-weight: bold;
margin-top: 15px;"> margin-top: 15px;">
{{item.name}} {{item.name}}
</div> </div>
<!-- <div style="font-size: 14px; <!-- <div style="font-size: 14px;
margin-top: 7px; margin-top: 7px;
color: #ababab;"> color: #ababab;">
@ -61,108 +66,118 @@
-webkit-box-orient:vertical; -webkit-box-orient:vertical;
margin-top: 10px;" v-html="item.content"> margin-top: 10px;" v-html="item.content">
</div> </div>
</div> </div>
</div> </div>
<div style="height: 40px;"></div> <div style="height: 40px;"></div>
<div class="page_more wow fadeInUp animated" data-wow-delay=".2s" id="More" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;" @click="addnews"> <div class="page_more wow fadeInUp animated" data-wow-delay=".2s" id="More"
style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;" @click="addnews">
<em>更多新闻</em> <em>更多新闻</em>
</div> </div>
<div style="height: 60px;"></div> <div style="height: 60px;"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import '@/assets/images/news1.png' import '@/assets/images/news1.png'
import { getnews,getmsg,NewCategary} from '@/api'; import {
import { Loading } from 'element-ui'; getnews,
export default{ getmsg,
data(){ NewCategary
return{ } from '@/api';
activeName:'企业新闻', import {
newshow:[], Loading
rest:[], } from 'element-ui';
newslist:[], export default {
newscatagary:[], data() {
page:0, return {
content:'' activeName: '企业新闻',
newshow: [],
rest: [],
newslist: [],
newscatagary: [],
page: 0,
content: ''
} }
}, },
mounted(){ mounted() {
let loadingInstance = Loading.service('loading'); let loadingInstance = Loading.service('loading');
NewCategary().then((res)=>{ NewCategary().then((res) => {
this.newscatagary=res.data this.newscatagary = res.data
}) })
getnews({'page':0,'articleType':this.activeName}).then((res)=>{ getnews({
'page': 0,
'articleType': this.activeName
}).then((res) => {
loadingInstance.close();
// 遍历数组，对每个对象的richText属性进行处理 // 遍历数组，对每个对象的richText属性进行处理
res.data.content.forEach(item => { res.data.content.forEach(item => {
// 去除所有标签和空格 // 去除所有标签和空格
item.content = item.content?.replace(/<[^>]+>/g, '').trim(); item.content = item.content?.replace(/<[^>]+>/g, '').trim();
}); });
this.newslist=res.data.content this.newslist = res.data.content
let arr = this.newslist.slice(0, 3)
let arr=this.newslist.slice(0,3) this.newshow = arr
this.newshow=arr
loadingInstance.close();
}) })
}, },
methods:{ methods: {
handleClick(){ handleClick() {
this.page = 0; this.page = 0;
console.log(1111) console.log(1111)
this.rest=[] this.rest = []
let loadingInstance = Loading.service('loading'); let loadingInstance = Loading.service('loading');
// if(this.activeName=='行业动态'){ // if(this.activeName=='行业动态'){
getmsg({'page':0,'articleType':this.activeName}).then((res)=>{ getmsg({
'page': 0,
'articleType': this.activeName
}).then((res) => {
// 遍历数组，对每个对象的richText属性进行处理 // 遍历数组，对每个对象的richText属性进行处理
res.data.content.forEach(item => { res.data.content.forEach(item => {
// 去除所有标签和空格 // 去除所有标签和空格
item.content = item.content?.replace(/<[^>]+>/g, '').trim(); item.content = item.content?.replace(/<[^>]+>/g, '').trim();
}); });
this.newslist=res.data.content this.newslist = res.data.content
let arr=this.newslist.slice(0,3) let arr = this.newslist.slice(0, 3)
this.newshow=arr this.newshow = arr
loadingInstance.close(); loadingInstance.close();
}) })
// }else if(this.activeName=='企业新闻'){ // }else if(this.activeName=='企业新闻'){
// getnews({'page':0,'articleType':activeName}).then((res)=>{ // getnews({'page':0,'articleType':activeName}).then((res)=>{
// res.data.content.forEach(item => { // res.data.content.forEach(item => {
// item.content = item.content?.replace(/<[^>]+>/g, '').trim(); // item.content = item.content?.replace(/<[^>]+>/g, '').trim();
// }); // });
// this.newslist=res.data.content // this.newslist=res.data.content
// let arr=this.newslist.slice(0,3) // let arr=this.newslist.slice(0,3)
// this.newshow=arr // this.newshow=arr
// loadingInstance.close(); // loadingInstance.close();
// }) // })
// } // }
}, },
addnews(){ addnews() {
this.page=this.page+1 this.page = this.page + 1
// if(this.activeName=='新闻资讯'){ // if(this.activeName=='新闻资讯'){
getmsg({'page':this.page,'articleType':this.activeName}).then((res)=>{ getmsg({
'page': this.page,
'articleType': this.activeName
}).then((res) => {
// console.log(res) // console.log(res)
for(let i=0;i<res.data.content.length;i++){ for (let i = 0; i < res.data.content.length; i++) {
res.data.content[i].content= res.data.content[i].content?.replace(/<[^>]+>/g, '').trim(); res.data.content[i].content = res.data.content[i].content?.replace(/<[^>]+>/g, '').trim();
res.data.content[i].day=res.data.content[i].releaseTime.slice(-2) res.data.content[i].day = res.data.content[i].releaseTime.slice(-2)
res.data.content[i].year=res.data.content[i].releaseTime.slice(0,7) res.data.content[i].year = res.data.content[i].releaseTime.slice(0, 7)
this.rest.push(res.data.content[i]) this.rest.push(res.data.content[i])
} }
@ -182,10 +197,10 @@ export default{
// } // }
}, },
changeto(id){ changeto(id) {
// if(this.activeName=='新闻资讯'){ // if(this.activeName=='新闻资讯'){
this.$router.push({ this.$router.push({
path:'/detail?type='+this.activeName+'&&id='+id path: '/detail?type=' + this.activeName + '&&id=' + id
}) })
// }else if(this.activeName=='企业新闻'){ // }else if(this.activeName=='企业新闻'){
// this.$router.push({ // this.$router.push({
@ -194,22 +209,22 @@ export default{
// } // }
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.compbg { .compbg {
background-image: url('../assets/images/banner.png'); background-image: url('../assets/images/banner.png');
} }
.page_ban { .page_ban {
height: 404px; height: 404px;
position: relative; position: relative;
text-align: center; text-align: center;
z-index: 101; z-index: 101;
} }
.page_ban .img { .page_ban .img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -218,8 +233,9 @@ export default{
left: 0; left: 0;
top: 0; top: 0;
z-index: -1; z-index: -1;
} }
.date{
.date {
font-size: 26px; font-size: 26px;
color: #dfd4c3; color: #dfd4c3;
@ -229,38 +245,41 @@ export default{
bottom: 20px; bottom: 20px;
padding: 0 30px; padding: 0 30px;
width: 100%; width: 100%;
} }
.page_ban .content {
.page_ban .content {
position: relative; position: relative;
height: 100%; height: 100%;
} }
.content {
.content {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
.page_nav { .page_nav {
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
div,
li { div,
li {
box-sizing: border-box; box-sizing: border-box;
} }
.page_nav .name { .page_nav .name {
float: left; float: left;
} }
.page_nav .list { .page_nav .list {
position: relative; position: relative;
float: right; float: right;
margin-right: -35px; margin-right: -35px;
} }
.page_nav a { .page_nav a {
float: left; float: left;
line-height: 76px; line-height: 76px;
position: relative; position: relative;
@ -269,26 +288,26 @@ li {
color: white; color: white;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
} }
.page_nav .name a { .page_nav .name a {
padding-left: 30px; padding-left: 30px;
/* background: url() no-repeat left 30px; */ /* background: url() no-repeat left 30px; */
} }
.page_nav .list { .page_nav .list {
position: relative; position: relative;
float: right; float: right;
margin-right: -35px; margin-right: -35px;
} }
.page_nav .list a { .page_nav .list a {
color: #e7dfd2; color: #e7dfd2;
color: rgba(231, 223, 210, .7); color: rgba(231, 223, 210, .7);
margin-right: 35px; margin-right: 35px;
} }
.page_nav a { .page_nav a {
float: left; float: left;
line-height: 76px; line-height: 76px;
position: relative; position: relative;
@ -296,27 +315,28 @@ li {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-weight: bold; font-weight: bold;
} }
.page_nav .inner_bor { .page_nav .inner_bor {
height: 4px; height: 4px;
background: #f23c39; background: #f23c39;
position: absolute; position: absolute;
bottom: -4px; bottom: -4px;
left: 0; left: 0;
display: block; display: block;
} }
::v-deep .el-tabs__item { ::v-deep .el-tabs__item {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
border: none; border: none;
} }
::v-deep .el-tabs__nav-wrap::after { ::v-deep .el-tabs__nav-wrap::after {
background-color: transparent; background-color: transparent;
} }
.card_img1{
.card_img1 {
border-radius: 14px; border-radius: 14px;
position: relative; position: relative;
@ -326,8 +346,9 @@ li {
background-size: cover; background-size: cover;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 14px; border-radius: 14px;
} }
.card_img2{
.card_img2 {
border-radius: 14px; border-radius: 14px;
background-image: url('../assets/images/news2.png'); background-image: url('../assets/images/news2.png');
position: relative; position: relative;
@ -337,8 +358,9 @@ li {
background-size: cover; background-size: cover;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 14px; border-radius: 14px;
} }
.card_img3{
.card_img3 {
border-radius: 14px; border-radius: 14px;
background-image: url('../assets/images/news3.png'); background-image: url('../assets/images/news3.png');
position: relative; position: relative;
@ -348,12 +370,14 @@ li {
background-size: cover; background-size: cover;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 14px; border-radius: 14px;
} }
.colitem{
display: inline-block; .colitem {
float: none; display: inline-block;
} float: none;
.mark::before{ }
.mark::before {
content: ''; content: '';
width: 100%; width: 100%;
@ -363,34 +387,39 @@ float: none;
bottom: 0; bottom: 0;
left: 0; left: 0;
opacity: .25; opacity: .25;
filter: alpha(opacity = 25); filter: alpha(opacity=25);
-webkit-filter: alpha(opacity = 25); -webkit-filter: alpha(opacity=25);
border-radius: 14px; border-radius: 14px;
} }
::v-deep .el-card.is-always-shadow{
::v-deep .el-card.is-always-shadow {
border-radius: 14px; border-radius: 14px;
box-shadow: initial; box-shadow: initial;
} }
::v-deep el-card{
border:none ::v-deep el-card {
} border: none
.news_li_con { }
.news_li_con {
position: relative; position: relative;
padding-left: 28px; padding-left: 28px;
height: 150px; height: 150px;
overflow: hidden; overflow: hidden;
} }
.news_li_con:before { .news_li_con:before {
content: ''; content: '';
width: 6px; width: 6px;
height: 21px; height: 21px;
background-color: rgb(48,113,183); background-color: rgb(48, 113, 183);
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 0; left: 0;
} }
.title {
.title {
font-size: 22px; font-size: 22px;
color: #3c3c48; color: #3c3c48;
color: rgba(60, 60, 72, .7); color: rgba(60, 60, 72, .7);
@ -405,7 +434,8 @@ overflow: hidden;
-moz-transition: all .4s; -moz-transition: all .4s;
-ms-transition: all .4s; -ms-transition: all .4s;
-o-transition: all .4s; -o-transition: all .4s;
} }
.introduction { .introduction {
min-height: 72px; min-height: 72px;
font-size: 14.5px; font-size: 14.5px;
@ -417,23 +447,27 @@ overflow: hidden;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.more { .more {
position:absolute; position: absolute;
bottom: 0; bottom: 0;
font-size: 18px; font-size: 18px;
color: #3958cd; color: #3958cd;
line-height: 1; line-height: 1;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: -.4px; letter-spacing: -.4px;
} }
div{
div {
box-sizing: border-box; box-sizing: border-box;
} }
.el-col{
.el-col {
padding: 0px 8px; padding: 0px 8px;
} }
.newsitem::before{
.newsitem::before {
content: ''; content: '';
width: 100%; width: 100%;
height: 2px; height: 2px;
@ -441,16 +475,18 @@ div{
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.newsitem .date1{
.newsitem .date1 {
width: 236px; width: 236px;
float: left; float: left;
font-family: 'Rajdhani'; font-family: 'Rajdhani';
font-size: 26px; font-size: 26px;
color: rgb(48,113,183); color: rgb(48, 113, 183);
line-height: 1; line-height: 1;
} }
.title1{
.title1 {
font-size: 20px; font-size: 20px;
color: #3c3c48; color: #3c3c48;
color: rgba(60, 60, 72, .7); color: rgba(60, 60, 72, .7);
@ -466,8 +502,9 @@ div{
-moz-transition: all .4s; -moz-transition: all .4s;
-ms-transition: all .4s; -ms-transition: all .4s;
-o-transition: all .4s; -o-transition: all .4s;
} }
.newsitem .introduction1{
.newsitem .introduction1 {
font-size: 14.5px; font-size: 14.5px;
color: #848484; color: #848484;
color: rgba(132, 132, 132, .7); color: rgba(132, 132, 132, .7);
@ -476,13 +513,14 @@ div{
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.page_more {
.page_more {
position: relative; position: relative;
font-size: 18px; font-size: 18px;
color: #ffffff; color: #ffffff;
line-height: 70px; line-height: 70px;
background-color: rgb(48,113,183); background-color: rgb(48, 113, 183);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border-radius: 14px; border-radius: 14px;
@ -490,8 +528,9 @@ div{
-moz-border-radius: 14px; -moz-border-radius: 14px;
-ms-border-radius: 14px; -ms-border-radius: 14px;
-o-border-radius: 14px; -o-border-radius: 14px;
} }
::v-deep .el-card{
::v-deep .el-card {
border: none; border: none;
} }
</style> </style>