新闻页面加载过慢优化

src/views/news.vue

@@ -29,7 +29,10 @@
 								<!-- <div class="date">{{item.releaseTime}}</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>
 						</el-card>
@@ -39,7 +42,9 @@
 		</div>
 
 		<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="" style="  margin-left: 35px;overflow: hidden;">
 					<div style="    font-size: 18px;
@@ -65,7 +70,8 @@
 				</div>
 			</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>
 			</div>
 			<div style="height: 60px;"></div>
@@ -74,8 +80,14 @@
 </template>
 <script>
 	import '@/assets/images/news1.png'
-import { getnews,getmsg,NewCategary} from '@/api';
+	import {
-import { Loading } from 'element-ui';
+		getnews,
+		getmsg,
+		NewCategary
+	} from '@/api';
+	import {
+		Loading
+	} from 'element-ui';
 	export default {
 		data() {
 			return {
@@ -94,22 +106,19 @@ export default{
 			NewCategary().then((res) => {
 				this.newscatagary = res.data
 			})
-       getnews({'page':0,'articleType':this.activeName}).then((res)=>{
+			getnews({
-      
+				'page': 0,
-
+				'articleType': this.activeName
-
+			}).then((res) => {
+				loadingInstance.close();
 				// 遍历数组，对每个对象的richText属性进行处理
 				res.data.content.forEach(item => {
 					// 去除所有标签和空格
 					item.content = item.content?.replace(/<[^>]+>/g, '').trim();
 				});
 				this.newslist = res.data.content
-      
 				let arr = this.newslist.slice(0, 3)
-        
-       
 				this.newshow = arr
-     loadingInstance.close();
 			})
 		},
 		methods: {
@@ -121,7 +130,10 @@ export default{
 				let loadingInstance = Loading.service('loading');
 				// if(this.activeName=='行业动态'){
 
-             getmsg({'page':0,'articleType':this.activeName}).then((res)=>{
+				getmsg({
+					'page': 0,
+					'articleType': this.activeName
+				}).then((res) => {
 
 					// 遍历数组，对每个对象的richText属性进行处理
 					res.data.content.forEach(item => {
@@ -156,7 +168,10 @@ export default{
 			addnews() {
 				this.page = this.page + 1
 				// if(this.activeName=='新闻资讯'){
-                getmsg({'page':this.page,'articleType':this.activeName}).then((res)=>{
+				getmsg({
+					'page': this.page,
+					'articleType': this.activeName
+				}).then((res) => {
 					//    console.log(res)
 					for (let i = 0; i < res.data.content.length; i++) {
 						res.data.content[i].content = res.data.content[i].content?.replace(/<[^>]+>/g, '').trim();
@@ -219,6 +234,7 @@ export default{
 		top: 0;
 		z-index: -1;
 	}
+
 	.date {
 
 		font-size: 26px;
@@ -230,10 +246,12 @@ export default{
 		padding: 0 30px;
 		width: 100%;
 	}
+
 	.page_ban .content {
 		position: relative;
 		height: 100%;
 	}
+
 	.content {
 		width: 80%;
 		margin: 0 auto;
@@ -245,6 +263,7 @@ export default{
 		left: 0;
 		bottom: 0;
 	}
+
 	div,
 	li {
 		box-sizing: border-box;
@@ -316,6 +335,7 @@ li {
 	::v-deep .el-tabs__nav-wrap::after {
 		background-color: transparent;
 	}
+
 	.card_img1 {
 		border-radius: 14px;
 
@@ -327,6 +347,7 @@ li {
 		margin-bottom: 16px;
 		border-radius: 14px;
 	}
+
 	.card_img2 {
 		border-radius: 14px;
 		background-image: url('../assets/images/news2.png');
@@ -338,6 +359,7 @@ li {
 		margin-bottom: 16px;
 		border-radius: 14px;
 	}
+
 	.card_img3 {
 		border-radius: 14px;
 		background-image: url('../assets/images/news3.png');
@@ -349,10 +371,12 @@ li {
 		margin-bottom: 16px;
 		border-radius: 14px;
 	}
+
 	.colitem {
 		display: inline-block;
 		float: none;
 	}
+
 	.mark::before {
 
 		content: '';
@@ -368,19 +392,23 @@ float: none;
 		border-radius: 14px;
 
 	}
+
 	::v-deep .el-card.is-always-shadow {
 		border-radius: 14px;
 		box-shadow: initial;
 	}
+
 	::v-deep el-card {
 		border: none
 	}
+
 	.news_li_con {
 		position: relative;
 		padding-left: 28px;
 		height: 150px;
 		overflow: hidden;
 	}
+
 	.news_li_con:before {
 		content: '';
 		width: 6px;
@@ -390,6 +418,7 @@ overflow: hidden;
 		top: 4px;
 		left: 0;
 	}
+
 	.title {
 		font-size: 22px;
 		color: #3c3c48;
@@ -406,6 +435,7 @@ overflow: hidden;
 		-ms-transition: all .4s;
 		-o-transition: all .4s;
 	}
+
 	.introduction {
 		min-height: 72px;
 		font-size: 14.5px;
@@ -418,6 +448,7 @@ overflow: hidden;
 		-webkit-line-clamp: 3;
 		-webkit-box-orient: vertical;
 	}
+
 	.more {
 		position: absolute;
 		bottom: 0;
@@ -427,12 +458,15 @@ overflow: hidden;
 		text-transform: uppercase;
 		letter-spacing: -.4px;
 	}
+
 	div {
 		box-sizing: border-box;
 	}
+
 	.el-col {
 		padding: 0px 8px;
 	}
+
 	.newsitem::before {
 		content: '';
 		width: 100%;
@@ -442,6 +476,7 @@ div{
 		bottom: 0;
 		left: 0;
 	}
+
 	.newsitem .date1 {
 		width: 236px;
 		float: left;
@@ -450,6 +485,7 @@ div{
 		color: rgb(48, 113, 183);
 		line-height: 1;
 	}
+
 	.title1 {
 		font-size: 20px;
 		color: #3c3c48;
@@ -467,6 +503,7 @@ div{
 		-ms-transition: all .4s;
 		-o-transition: all .4s;
 	}
+
 	.newsitem .introduction1 {
 		font-size: 14.5px;
 		color: #848484;
@@ -477,6 +514,7 @@ div{
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
 	}
+
 	.page_more {
 		position: relative;
 		font-size: 18px;
@@ -491,6 +529,7 @@ div{
 		-ms-border-radius: 14px;
 		-o-border-radius: 14px;
 	}
+
 	::v-deep .el-card {
 		border: none;
 	}