From d20bb62bd788e30d879be1ce3612862d0eb66be5 Mon Sep 17 00:00:00 2001
From: 77 <270260644@qq.com>
Date: Tue, 13 Aug 2024 14:36:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=87=92=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E4=B8=8E=E9=A6=96=E9=A1=B5=E5=85=AC=E5=8F=B8=E8=8D=A3=E8=AA=89?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=B0=83=E6=88=90=E7=99=BD=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json      | 11 +++++++++++
 package.json           |  1 +
 src/main.js            | 10 ++++++++++
 src/views/HomeView.vue | 13 +++++++------
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c2fff77..26d8b52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "swiper": "^5.4.5",
         "vue": "^2.6.14",
         "vue-awesome-swiper": "^3.1.3",
+        "vue-lazyload": "^1.3.5",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2"
       },
@@ -10255,6 +10256,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-lazyload": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz",
+      "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA=="
+    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz",
@@ -19039,6 +19045,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz",
+      "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA=="
+    },
     "vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz",
diff --git a/package.json b/package.json
index b424616..5537f29 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "swiper": "^5.4.5",
     "vue": "^2.6.14",
     "vue-awesome-swiper": "^3.1.3",
+    "vue-lazyload": "^1.3.5",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },
diff --git a/src/main.js b/src/main.js
index 9c28cfd..eace45d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,16 @@ import './assets/ReactQuilll.less'
 import 'react-quill/dist/quill.core.css'
 import 'react-quill/dist/quill.snow.css'
 import 'react-quill/dist/quill.bubble.css'
+
+import lazyload from 'vue-lazyload'
+// 全局使用插件
+Vue.use(lazyload, {
+preload: 1,   // preload配置项用来设置预加载的高度(默认值为1.3)
+loading: '',   // loading配置项用来配置加载时显示的图片路径
+error: '',    // error配置项用来配置加载错误时的显示的图片路径
+attemp: 3   // attemp配置项用来设置加载错误时的重传次数
+});
+
 Vue.config.productionTip = false
 Vue.use(ElementUI);
 new Vue({
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 584f54a..6802b38 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,8 +5,9 @@
 			<div class="bd" style="height: 581px;position: relative;">
 				<div class="swiper-container swiper5">
 					<div class="swiper-wrapper">
-						<div class="swiper-slide" v-for="item in imgarr" :key="item.id"><img :src="item.url"
-								style="width: 100%;height:100%;"></div>
+						<div class="swiper-slide" v-for="item in imgarr" :key="item.id">
+							<img :src="item.url" style="width: 100%;height:100%;">
+							</div>
 
 					</div>
 					<div class="swiper-pagination"></div>
@@ -90,7 +91,7 @@
 						<div class="swiper-container swiper6">
 							<div class="swiper-wrapper">
 								<div class="swiper-slide yanshi" v-for="item in indexinfo" :key="item.id"><img
-										:src="item.pic" style="width: 100%;height:320px;cursor: pointer;"
+										v-lazy="item.pic" style="width: 100%;height:320px;cursor: pointer;"
 										@click="routerTo(item.id)"></div>
 
 							</div>
@@ -132,7 +133,7 @@
 								<div class="swiper-slide" style="cursor: pointer;height: 316px;"
 									v-for="item in smallPicturearr" :key="item.id" v-if="item.state=='true'"
 									@click="projecto(item.id)">
-									<img :src="item.picture"
+									<img v-lazy="item.picture"
 										style=" width: 100%;height:100%;margin: auto;border-radius: 5%;">
 								</div>
 
@@ -179,8 +180,8 @@
 					<div class="swiper-wrapper swiper9">
 						<div class="swiper-slide" v-for="item in achievementarr" :key="item.id"
 							v-if="item.state=='true'" @click="honorto(item.id)"
-							style="background-color: rgb(240,246,250);border-radius: 10px;padding: 20px;box-sizing: border-box;cursor: pointer;">
-							<img :src="item.picture" style=" height:239px ;margin: auto;display: block;">
+							style="background-color: white;border-radius: 10px;padding: 20px;box-sizing: border-box;cursor: pointer;">
+							<img v-lazy="item.picture" style=" height:239px ;margin: auto;display: block;">
 						</div>
 					</div>
 					<div class="swiper-pagination1" style="text-align: center;"></div>