123

package.json

@@ -19,6 +19,7 @@
     "swiper": "^9.0.0",
     "vue": "^3.2.45",
     "vue-router": "^4.0.13",
+    "vue3-lazy": "^1.0.0-alpha.1",
     "vue3-marquee": "^3.1.2",
     "vue3-video-play": "^1.3.1-beta.6"
   },

src/components/Img/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="card_detail_img" v-if="pic1">
     <div class="double_wrap" v-if="double">
-      <img :src="pic1" alt="" />
-      <img :src="pic2" alt="" />
+      <img v-lazy="pic1" alt="" />
+      <img v-lazy="pic2" alt="" />
     </div>
-    <img v-else :src="pic1" class="sing_img" alt="" />
+    <img v-else v-lazy="pic1" class="sing_img" alt="" />
   </div>
 </template>
 

src/components/TopNav/index.vue

@@ -6,7 +6,7 @@
         : 'header_container not_first'
     "
   >
-    <img :src="logo()" alt="logo" class="logo" @click="scrollToPage(0)" />
+    <img v-lazy="logo()" alt="logo" class="logo" @click="scrollToPage(0)" />
     <ul :class="fontColor()">
       <li :class="getActiveClass([0])" @click="scrollToPage(0)">首页</li>
       <li :class="getActiveClass([3, 4])" @click="scrollToPage(3)">工业设计</li>

src/components/Trumbs/index.vue

@@ -18,7 +18,7 @@
         style="background: none"
       >
         <div class="img_card">
-          <img :src="item.picUrl" class="img" alt="" />
+          <img v-lazy="item.picUrl" class="img" alt="" />
           <div class="dialog_text">
             <div class="btn" @click="viewDetail(item.id)">查看详情</div>
           </div>

src/main.js

@@ -2,9 +2,19 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
+import lazyPlugin from 'vue3-lazy'
+import defaultImage from '@/assets/img/default.gif'
+import errorImage from '@/assets/img/error.png'
 import 'amfe-flexible'
 import '@/assets/reset.css'
 import 'animate.css'
 import './style.scss'
 
-createApp(App).use(router).use(store).mount('#app')
+createApp(App)
+  .use(lazyPlugin, {
+    loading: defaultImage,
+    error: errorImage,
+  })
+  .use(router)
+  .use(store)
+  .mount('#app')

src/views/Index/components/CaseDetails/index.vue

@@ -29,7 +29,7 @@
                     :key="item.id"
                   >
                     <div class="swiper_div_wrap">
-                      <img :src="item.picUrl" class="img_swiper" alt="" />
+                      <img v-lazy="item.picUrl" class="img_swiper" alt="" />
                     </div>
                   </swiper-slide>
                 </swiper>
@@ -93,7 +93,7 @@
                       style="width: 100%; height: auto; object-fit: fill"
                       controlslist="nodownload"
                     >
-                      <source :src="item?.video" />
+                      <source v-lazy="item?.video" />
                     </video>
                   </div>
                 </div>

src/views/Index/components/CasePictureList/index.vue

@@ -70,7 +70,7 @@
                   v-for="item in allCaseList1"
                   :key="item.id"
                 >
-                  <img class="pic" :src="item.picUrl" alt="" />
+                  <img class="pic" v-lazy="item.picUrl" alt="" />
                   <div class="dialog_text">
                     <div
                       class="btn"
@@ -95,7 +95,7 @@
                   v-for="item in allCaseList2"
                   :key="item.id"
                 >
-                  <img class="pic" :src="item.picUrl" alt="" />
+                  <img class="pic" v-lazy="item.picUrl" alt="" />
                   <div class="dialog_text">
                     <div
                       class="btn"
@@ -119,7 +119,7 @@
                   v-for="item in allCaseList3"
                   :key="item.id"
                 >
-                  <img class="pic" :src="item.picUrl" alt="" />
+                  <img class="pic" v-lazy="item.picUrl" alt="" />
                   <div class="dialog_text">
                     <div
                       class="btn"

src/views/Index/components/ContactUs/index.vue

@@ -8,9 +8,9 @@
         <div class="contact_title_container" id="contact_title_container">
           <div class="yingwen_text">
             <span>联系我们</span>
-            <img :src="Line" alt="" class="line" />
+            <img v-lazy="Line" alt="" class="line" />
           </div>
-          <img :src="Contact" alt="" class="yingwen" />
+          <img v-lazy="Contact" alt="" class="yingwen" />
         </div>
         <div class="main_content" id="contactus_main_content">
           <div id="contract_info_ani">
@@ -20,21 +20,21 @@
             </p>
             <div class="phone_line_1">
               <div class="item mr">
-                <img :src="Phone" alt="" class="icon" />
+                <img v-lazy="Phone" alt="" class="icon" />
                 <p class="phone">袁老师&nbsp;&nbsp;137&nbsp;1789&nbsp;2018</p>
               </div>
               <div class="item">
-                <img :src="Phone" alt="" class="icon" />
+                <img v-lazy="Phone" alt="" class="icon" />
                 <p class="phone">郭老师&nbsp;&nbsp;131&nbsp;6196&nbsp;7787</p>
               </div>
             </div>
             <div class="phone_line_2">
               <div class="item mr">
-                <img :src="Email" alt="" class="icon" />
+                <img v-lazy="Email" alt="" class="icon" />
                 <p class="phone">info@iflytop.com</p>
               </div>
               <div class="item">
-                <img :src="Address" alt="" class="icon" />
+                <img v-lazy="Address" alt="" class="icon" />
                 <p class="phone">
                   北京市昌平区回龙观街道博纳集团3号楼一层 &nbsp;&nbsp;产品梦工厂
                 </p>
@@ -46,7 +46,7 @@
       </div>
       <!-- <div class="bottom_text_container">
         <div>
-          <img :src="Logo" alt="" class="img" />
+          <img v-lazy="Logo" alt="" class="img" />
         </div>
         <div class="some_link_container">
           <div class="some_link">

src/views/Index/components/Cooperation/index.vue

@@ -10,66 +10,66 @@
           <p class="detail">
             医疗企业&nbsp;&nbsp;互联网公司&nbsp;&nbsp;智能硬件公司&nbsp;&nbsp;科研院所&nbsp;&nbsp;工业自动化企业
           </p>
-          <!-- <img class="img" :src="Back" alt="back" /> -->
+          <!-- <img class="img" v-lazy="Back" alt="back" /> -->
         </div>
         <div class="contract" id="contract_bg_coop">
           <!-- <div class="real_img" id="contract_real_coop"></div> -->
           <div class="real_img_container" id="contract_real_coop">
-            <img class="header" :src="Header" alt="" />
+            <img class="header" v-lazy="Header" alt="" />
             <div class="grid_icons">
               <div class="img_wrap">
-                <img :src="A1" class="img_com1" alt="" />
+                <img v-lazy="A1" class="img_com1" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A2" class="img_com2" alt="" />
+                <img v-lazy="A2" class="img_com2" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A3" class="img_com3" alt="" />
+                <img v-lazy="A3" class="img_com3" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A4" class="img_com4" alt="" />
+                <img v-lazy="A4" class="img_com4" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A5" class="img_com5" alt="" />
+                <img v-lazy="A5" class="img_com5" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A6" class="img_com6" alt="" />
+                <img v-lazy="A6" class="img_com6" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A7" class="img_com7" alt="" />
+                <img v-lazy="A7" class="img_com7" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A8" class="img_com8" alt="" />
+                <img v-lazy="A8" class="img_com8" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A9" class="img_com9" alt="" />
+                <img v-lazy="A9" class="img_com9" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A10" class="img_com10" alt="" />
+                <img v-lazy="A10" class="img_com10" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A11" class="img_com11" alt="" />
+                <img v-lazy="A11" class="img_com11" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A12" class="img_com12" alt="" />
+                <img v-lazy="A12" class="img_com12" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A13" class="img_com13" alt="" />
+                <img v-lazy="A13" class="img_com13" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A14" class="img_com14" alt="" />
+                <img v-lazy="A14" class="img_com14" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A15" class="img_com15" alt="" />
+                <img v-lazy="A15" class="img_com15" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A16" class="img_com16" alt="" />
+                <img v-lazy="A16" class="img_com16" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A17" class="img_com17" alt="" />
+                <img v-lazy="A17" class="img_com17" alt="" />
               </div>
               <div class="img_wrap">
-                <img :src="A18" class="img_com18" alt="" />
+                <img v-lazy="A18" class="img_com18" alt="" />
               </div>
             </div>
           </div>

src/views/Index/components/Culture/Card/index.vue

@@ -3,7 +3,7 @@
     <div class="hold_wrap">
       <div class="top_circle">
         <div class="circle_wrap">
-          <img :src="Logo" alt="" class="logo" />
+          <img v-lazy="Logo" alt="" class="logo" />
           <div class="new_btn">{{ getTitle() }}</div>
         </div>
       </div>

src/views/Index/components/Culture/index.vue

@@ -3,14 +3,14 @@
     <div class="empty" v-if="showEmpty"></div>
     <div class="flex_center" id="culture_container_flex">
       <div class="culture_container" id="culture_container">
-        <img :src="Background" class="bg_img" id="bg_img_scale" />
+        <img v-lazy="Background" class="bg_img" id="bg_img_scale" />
         <div class="contract_title" id="culture_ani">
           <p class="line"></p>
           <p class="title">企业文化</p>
           <p class="detail">
             有信心、有逻辑、有实践、有责任、有总结·这就是我们的财富
           </p>
-          <!-- <img class="img" :src="Back" alt="back" /> -->
+          <!-- <img class="img" v-lazy="Back" alt="back" /> -->
         </div>
         <div class="card_list">
           <Card i="4" />

src/views/Index/components/HardwareDetails/index.vue

@@ -29,7 +29,7 @@
                     :key="item.id"
                   >
                     <div class="swiper_div_wrap">
-                      <img :src="item.picUrl" class="img_swiper" alt="" />
+                      <img v-lazy="item.picUrl" class="img_swiper" alt="" />
                     </div>
                   </swiper-slide>
                 </swiper>

src/views/Index/components/HardwareSummary/index.vue

@@ -6,7 +6,7 @@
         <div class="contract_title" id="contract_ani">
           <p class="line"></p>
           <p class="title">案例展示</p>
-          <!-- <img class="img" :src="Back" alt="back" /> -->
+          <!-- <img class="img" v-lazy="Back" alt="back" /> -->
         </div>
         <div class="wrapper_swiper">
           <div class="data_container">
@@ -70,7 +70,7 @@
                   v-for="item in allCaseList1"
                   :key="item.id"
                 >
-                  <img class="pic" :src="item.picUrl" alt="" />
+                  <img class="pic" v-lazy="item.picUrl" alt="" />
                   <div class="dialog_text">
                     <div
                       class="btn"
@@ -95,7 +95,7 @@
                   v-for="item in allCaseList2"
                   :key="item.id"
                 >
-                  <img class="pic" :src="item.picUrl" alt="" />
+                  <img class="pic" v-lazy="item.picUrl" alt="" />
                   <div class="dialog_text">
                     <div
                       class="btn"
@@ -119,7 +119,7 @@
                   v-for="item in allCaseList3"
                   :key="item.id"
                 >
-                  <img class="pic" :src="item.picUrl" alt="" />
+                  <img class="pic" v-lazy="item.picUrl" alt="" />
                   <div class="dialog_text">
                     <div
                       class="btn"

src/views/Index/components/HeaderSwiper/SlideThree/index.vue

@@ -10,7 +10,7 @@
       <div class="btn">建立研发体系和生产流程新标准</div>
     </div>
     <div class="right_img">
-      <img :src="Gif" class="gif" alt="" />
+      <img v-lazy="Gif" class="gif" alt="" />
     </div>
     <div class="bottom_statement">Product Dreamworks</div>
   </div>

src/views/Index/components/HeaderSwiper/SlideTwo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="slide_two title_slide">
     <div class="main_content">
-      <img :src="HeaderPng" alt="" class="main_png" />
+      <img v-lazy="HeaderPng" alt="" class="main_png" />
       <div
         class="big_title animate__animated animate__fadeInDown"
         id="slide_two_ani"

src/views/Index/components/MechanicalControl/index.vue

@@ -27,7 +27,7 @@
             <div class="control_btn_wrap">
               <div class="btn">自主研发电机驱动器</div>
             </div>
-            <img :src="MainPic" class="bottom_img" alt="" />
+            <img v-lazy="MainPic" class="bottom_img" alt="" />
           </div>
           <div class="img_list_inwrap">
             <div class="broadside_div bg4">
@@ -43,7 +43,7 @@
         </div>
         <div class="bottom_quxian">
           <div class="left_img">
-            <img :src="Qu" class="gif" alt="" />
+            <img v-lazy="Qu" class="gif" alt="" />
           </div>
           <div class="text_cont">
             <div class="s_text">
@@ -58,8 +58,8 @@
             </div>
           </div>
           <div class="right_img">
-            <img :src="Q2" class="img" alt="" />
-            <img :src="Q1" class="img" alt="" />
+            <img v-lazy="Q2" class="img" alt="" />
+            <img v-lazy="Q1" class="img" alt="" />
           </div>
         </div>
       </div>

src/views/Index/components/MechanicalDrive/Card/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dian_container">
-    <img :src="getImgSrc()" alt="" class="img" />
+    <img v-lazy="getImgSrc()" alt="" class="img" />
     <div class="btn">{{ title }}</div>
   </div>
 </template>

src/views/Index/components/Recruit/Card/index.vue

@@ -6,7 +6,7 @@
       <div class="bottom">
         <div class="btn" @click="showDetail(postInfo.id)">
           <span>详情</span>
-          <img :src="Arrow" class="icon" alt="" />
+          <img v-lazy="Arrow" class="icon" alt="" />
         </div>
       </div>
     </div>

src/views/Index/components/Recruit/Detail/index.vue

@@ -26,7 +26,7 @@
             v-for="(item, index) in postInfo?.jobContent"
             :key="index"
           >
-            <img :src="Ok" class="ok" alt="" />
+            <img v-lazy="Ok" class="ok" alt="" />
             <p class="text">{{ item }};</p>
           </div>
         </div>
@@ -37,7 +37,7 @@
             v-for="(item, index) in postInfo?.duty"
             :key="index"
           >
-            <img :src="Ok" class="ok" alt="" />
+            <img v-lazy="Ok" class="ok" alt="" />
             <p class="text">{{ item }}</p>
           </div>
         </div>
@@ -47,15 +47,15 @@
     <div class="bt_wrap">
       <div class="bt_left">
         <div class="one_p">
-          <img :src="Email" class="icon1" alt="" />
+          <img v-lazy="Email" class="icon1" alt="" />
           <p class="font">hr@iflytop.com</p>
         </div>
         <div class="one_p">
-          <img :src="Earth" class="icon2" alt="" />
+          <img v-lazy="Earth" class="icon2" alt="" />
           <p class="font">www.iflytop.com</p>
         </div>
         <div class="one_p">
-          <img :src="Address" class="icon3" alt="" />
+          <img v-lazy="Address" class="icon3" alt="" />
           <p class="font">北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂</p>
         </div>
       </div>
@@ -66,7 +66,7 @@
         v-on:mouseleave="mouseleave"
       >
         <span class="return_btn">返回列表</span>
-        <img :src="arrowShow ? Arrow1 : Arrow" class="icon" alt="" />
+        <img v-lazy="arrowShow ? Arrow1 : Arrow" class="icon" alt="" />
       </div>
     </div>
   </div>

src/views/Index/components/SoftHardwareDetail/Card/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dian_container">
     <div class="wrap">
-      <img :src="getImgSrc()" alt="" :class="getImgClass()" />
+      <img v-lazy="getImgSrc()" alt="" :class="getImgClass()" />
     </div>
     <div class="btn">{{ title }}</div>
   </div>

src/views/Index/components/SoftHardwareSummary/index.vue

@@ -6,35 +6,35 @@
         <div class="contract_title" id="software_c_ani">
           <p class="line"></p>
           <p class="title">硬件<span class="blue_font">研发经验</span></p>
-          <!-- <img class="img" :src="Back" alt="back" /> -->
+          <!-- <img class="img" v-lazy="Back" alt="back" /> -->
         </div>
         <div class="card_list">
           <div class="card_wrap bg1">
-            <img class="img" :src="Danpianji" alt="" />
+            <img class="img" v-lazy="Danpianji" alt="" />
             <p class="font">单片机</p>
           </div>
           <div class="card_wrap bg2">
-            <img class="img" :src="Cpu" alt="" />
+            <img class="img" v-lazy="Cpu" alt="" />
             <p class="font">处理器</p>
           </div>
           <div class="card_wrap bg3">
-            <img class="img" :src="Fpga" alt="" />
+            <img class="img" v-lazy="Fpga" alt="" />
             <p class="font">FPGA</p>
           </div>
           <div class="card_wrap bg4">
-            <img class="img" :src="Dps" alt="" />
+            <img class="img" v-lazy="Dps" alt="" />
             <p class="font">DSP</p>
           </div>
           <div class="card_wrap bg5">
-            <img class="img" :src="Dianlu" alt="" />
+            <img class="img" v-lazy="Dianlu" alt="" />
             <p class="font">模拟电路</p>
           </div>
           <div class="card_wrap bg6">
-            <img class="img" :src="Shuzi" alt="" />
+            <img class="img" v-lazy="Shuzi" alt="" />
             <p class="font">数字电路</p>
           </div>
           <div class="card_wrap bg7">
-            <img class="img" :src="Chuanganji" alt="" />
+            <img class="img" v-lazy="Chuanganji" alt="" />
             <p class="font">各种传感器</p>
           </div>
         </div>
@@ -43,40 +43,40 @@
         </p>
         <div class="img_wrap">
           <div class="img_card_wrap_grid mb67">
-            <img :src="A1" alt="" class="img1" />
+            <img v-lazy="A1" alt="" class="img1" />
           </div>
           <div class="img_card_wrap_grid mb67 mdb">
-            <img :src="A2" alt="" class="img2" />
+            <img v-lazy="A2" alt="" class="img2" />
           </div>
           <div class="img_card_wrap_grid mb67">
-            <img :src="A3" alt="" class="img3" />
+            <img v-lazy="A3" alt="" class="img3" />
           </div>
           <div class="img_card_wrap_grid mb67 mdb">
-            <img :src="A4" alt="" class="img4" />
+            <img v-lazy="A4" alt="" class="img4" />
           </div>
           <div class="img_card_wrap_grid mb67">
-            <img :src="A5" alt="" class="img5" />
+            <img v-lazy="A5" alt="" class="img5" />
           </div>
           <div class="img_card_wrap_grid mb67 mlb">
-            <img :src="A6" alt="" class="img6" />
+            <img v-lazy="A6" alt="" class="img6" />
           </div>
           <div class="img_card_wrap_grid mt67">
-            <img :src="A7" alt="" class="img7" />
+            <img v-lazy="A7" alt="" class="img7" />
           </div>
           <div class="img_card_wrap_grid mt67 mdb">
-            <img :src="A8" alt="" class="img8" />
+            <img v-lazy="A8" alt="" class="img8" />
           </div>
           <div class="img_card_wrap_grid mt67">
-            <img :src="A9" alt="" class="img9" />
+            <img v-lazy="A9" alt="" class="img9" />
           </div>
           <div class="img_card_wrap_grid mt67 mdb">
-            <img :src="A10" alt="" class="img10" />
+            <img v-lazy="A10" alt="" class="img10" />
           </div>
           <div class="img_card_wrap_grid mt67">
-            <img :src="A11" alt="" class="img11" />
+            <img v-lazy="A11" alt="" class="img11" />
           </div>
           <div class="img_card_wrap_grid mt67 mlb">
-            <img :src="A12" alt="" class="img12" />
+            <img v-lazy="A12" alt="" class="img12" />
           </div>
         </div>
       </div>

src/views/Index/components/WebOfThing/index.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="btn">多年物联网技术开发经验</div>
       <div id="webofthing_img_ani">
-        <img :src="Project" class="pro_img" alt="" />
+        <img v-lazy="Project" class="pro_img" alt="" />
       </div>
     </div>
   </div>
@@ -21,7 +21,7 @@ import Project from '@/assets/img/web/zuo1.png'
 .web_of_thing_container {
   width: 100%;
   height: 100%;
-  background: url(../../../../assets/img/web/back.gif) no-repeat;
+  background: url(../../../../assets/img/web/back.jpg) no-repeat;
   background-position: 100%;
   background-size: auto 100%;
   position: relative;

yarn.lock

@@ -2984,6 +2984,11 @@ vue-router@^4.0.13:
   dependencies:
     "@vue/devtools-api" "^6.0.0"
 
+vue3-lazy@^1.0.0-alpha.1:
+  version "1.0.0-alpha.1"
+  resolved "https://registry.npmmirror.com/vue3-lazy/-/vue3-lazy-1.0.0-alpha.1.tgz#326a56c2ade4430c76b7ac90d33a7fde0af9aaa6"
+  integrity sha512-dpjpKK4DC5q+wZVtS/VY3X6pYBJHxRmYanr20s39RB6o6fvbneQ/DNuz37bipYfEdrEvbSZ95Y2SCexuznQNrQ==
+
 vue3-marquee@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmmirror.com/vue3-marquee/-/vue3-marquee-3.1.2.tgz#a168523944738b3bb59e60a154a94f8c3013c47d"