From e7f32f75f2c79d43e4b8193efe9e7eb64123c9c1 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Wed, 29 Mar 2023 13:56:56 +0800
Subject: [PATCH] 123

---
 src/assets/img/banner/team/Composite Team.png      | Bin 2367 -> 0 bytes
 src/assets/img/banner/team/composite.png           | Bin 0 -> 2367 bytes
 .../components/HeaderSwiper/SlideOne/index.vue     |  38 +++++++++------
 .../components/HeaderSwiper/SlideThree/index.vue   |  54 +++++++++++++++++++--
 .../components/HeaderSwiper/SlideTwo/index.vue     |  54 +++++++++++++++++++--
 src/views/Index/components/HeaderSwiper/index.vue  |  37 +++++++++-----
 6 files changed, 148 insertions(+), 35 deletions(-)
 delete mode 100644 src/assets/img/banner/team/Composite Team.png
 create mode 100644 src/assets/img/banner/team/composite.png

diff --git a/src/assets/img/banner/team/Composite Team.png b/src/assets/img/banner/team/Composite Team.png
deleted file mode 100644
index ea41a2d1c72e10bfc4eb19ae32f870ef82b7eb72..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2367
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

diff --git a/src/assets/img/banner/team/composite.png b/src/assets/img/banner/team/composite.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea41a2d1c72e10bfc4eb19ae32f870ef82b7eb72
GIT binary patch
literal 2367
zcmV-F3BdM=P)<h;3K|Lk000e1NJLTq00D~t001Qj1^@s6vw_8-00009a7bBm000XU
z000XU0RWnu7ytkW@kvBMRCt{2o$YlSD-ebUpERJ9pp>8%<PvmCa7xfE!6`v5Aub^*
zK`ucqK`!CV4_F6g*<A+EvXbXH$3Nm2n4JNJ&w)r$lqw)(+gct)sma6C9{^Ybcmi+$
z@CSWP?)Q5Dn>mD5lxqNB<?1;AoB`}x%cLla2f)T_I1<hPo?6SVC{o;jhm$-2`f4+a
zfx%-HT7R3;CpxnL@JvJ}BFgFX*F<!1PD5uJ$}RIjMDMMIP?W_1I}MMG7R~^kW1}Si
zTi6lVX<(3`vkc`XKz|u(Crt07Gm8RRf15G^fZxn!7fELi>o{T+NF9c9_pmyD_s${}
z)ytiM{(9{Rz`9aiX8^0(GAqiG&`vRq>g7K8Mr2Ps5s`oL<DG~ejWHiNnHpn$0r()I
z0};KI<mH^q6A^95?uYpMAa73AHzIm9##CQlcDmUS(boO=Wq0KsN78LP+5NOfB09#>
z7RuYnxnc5ldOA9pv+OZY=BzeiHrWu7KM;9$KSv^ZtF7Ob!0rKdb;`Hx2ZeR&t$}#W
znOi@u-goto*ZU*6dT5M!tx;a2{Q3JP*!>8fDjU;ohLJU+K)8OK%AugVVDtlfWSB3@
z4e{*dBS{DMw_=$i@(wKl#<-xuu~5uxBUdJ`t0~`_Tqa99sw2ctPbDGzW{GX#{&q2k
zOPFlcXBI8=18e(BVtJn@M00e()1YPFgz%#eB}%LT?6KWcLvSw0s0dua8RhSh-+7!0
z<;^+b3>4TJZETeLoo7KAKFys4>>a0E7O_{zWUA^cTIdG_?JY+aEKR$<3BZp1XVVc0
ztmovM5xMjS+hOh9|8qo@a!gsU6>{zUZOR>#3nC}TJej${MI-%;a<>CAiya0U*a-bj
z;RIWESM2XL?)TmCZNM8{C6tqF6I|I@M7|lYqvGJZVP|;VH*=ah3?@%CXVF4G19=?4
zPR?Px-ivfGl78O431Nj#9)Vp0*lAKvP)sZ#z*Yv{a4!&S&<`kdv?4{yl*k+#nI|vL
z43s;$+%izE<iuMO8zG!N{}IUhg#3$jB@Vo(Q*?IXx|%%78?mpb9bAK&dhzm{T|ej#
ztS>3wgW-N6*IBgbn-H$`C6B<a0s8A{Qm@ZP8ovc;xiOMD7^c6RqsCd^8>s}6v@2E_
zB+E2SY{cXh-G30u=hM<z@OmY2c)YPUU0SZG7cbA*^@DJhP+DfPE?Am&eG|gVbj@Pn
zz>ZjbvK$xs8=$G92C)%cx}fvRkk{9La-%NQ75by3$%@p{M!ELMkj<xwvp~P0irXdn
zPPy69_1d;;p`Xa#i<kG%Z*y52+=BAz_D!`7nG3=W<dR#t(H}J@b!Y_!38upt^7_+7
z$?{6E-4KqHCP(-!ZG@Rd%1p1VoQ1#UoV_&6?AvVbqLyB~{ASk=!Wnf*nPOe!>JOFs
zrpc(YGvX`ZrQnXo2NAst<XatnW;>%X`1cOxK3pKxQ%f89XVsrja4h=<2=rW#kFT@E
z9Hp&53;on8b2e)CO-phX{6b3!e)^?162HTpyYuraQ%cz_ZNx7&JrhwEv+Qbn7>(eU
zq;l~ad(%zs%Cyjr-#)&|rN^Le`qoSg5A-)|N{zui>gKE7Y8}HEbM$AY0JcLno?F|<
z$@-IQRDg~ZxyS?VJC1bYx0oZNzdiEz68#Qt>4T;uTIh$Dc~4ORBzz;=xH@HQsC>kj
zLoli>4Mky$`Cv<Q_qtp$C(UhSjCp|#BlAr0k>F?80|4)2mkY9&%N9bdWz>6Z1FD~y
zc%X2qaZgiK<qk2%yc%PE5YbQSFHQNZ$vTx&WLBgoijW5imjha@{RShy(v8bV`dc1Z
z&dHdb7G)!2%!@JRKVys`qDLb7pW?IPH4!Z;R?-Aq58q8CntV-tR6mV)ps<0hT5J}Y
z{`zuh!w%9%@>eLj7CW|Quvi-zV~)m{U&fe6BKl5t*5Pkne(r57oh#`1u4thj!}cg@
z9RIyV9-Q+1hSlmkwqFTKjlsk9DslXVmJ&LA@isEXd>A|H_(9<j$6g$%1>@V|OLj~X
zw9rq>Bkqf!J31Sjd9O9QKqS!H2)_4z%5B*A_qIYTUnNAUr(3hpFZS<SY2^G)$*nlK
zxoDxEpzhC5-s13`g})YfC|%=qHzI$NT`x{Crth#ymJRk4o@}^@3p9n~g!|r6c%UJr
z!@emSnJYYoH50+oFlBa5us7vz#X(AFp&!4@b<T0!ySWd9ctpjliiUo~!&8dGz;Xf!
zmV`H#rVZlUWR@u^7q=NmFz10N9+^}cgGw6iqgtFb^dIw)>Urhl$!^EB$gQUndCsmM
zEF+NMGWsU;<DiRPRC5Z6y;zl$2bL3}d>IBwFEd%s&PF`Oe)5Q?m5p55lTcRQv0W0=
zi1f+Q`gK1!&euR*+|eb=16!wf81B0XB<S*-T|dYVQNBaJ%_QrhM1O^8$NMJ4AI|8)
zDr~t@-S74oe%4Ux@nar%?#GXoW015mQ*>4H@uS&o#L|C;`2ce^`1jBauaBu=sC}f)
zf;+<l!iQ;A&JL-aTI_M3F+D#;z8h%#08*~a6Y`y1KS+Q4XgyM%NEapgD@;4xH$nEk
z>=0+Ea9;VXpH*F!L8i;R>t|IFf0<8OUQVcbsk7kAdqYScZz^ev%{OD2JlA+ubyoeL
z?X#-O>ziObV~$eJsPHZZY{Qe5KlxJJNO>hnElFF$S!~_U*b|OEqK8mMWSGrH?)%0@
zX+wx^aI>^E-bsidTB3q&i_&jj%tb^dSM{T=E%XCBdzG}eol7UyMT!0j(*}Lh<gG>6
zhP@+u;$}_#bIosLPf}eafE)fDv+T<E4cy%kc_X6N8$SIa1_&I>V|Q`LRmv?{J;ii&
zB&(}xx7z2lkyjtPayHbD>vMEv9*r?$AwjMJ>?~$a)(-xR=H30g8e_yKz+Aqaeb>~F
zzWOEGLPrbzzz(`LG}7L3Y^^BOC>b#*ilRta(t8$)qA1EjQD>njilR)S&O%WXMVUmM
lg`y~mGKo41MNt%GlE09OQHEc!wZi}a002ovPDHLkV1hQIhH3x+

literal 0
HcmV?d00001

diff --git a/src/views/Index/components/HeaderSwiper/SlideOne/index.vue b/src/views/Index/components/HeaderSwiper/SlideOne/index.vue
index 730534e..4c64320 100644
--- a/src/views/Index/components/HeaderSwiper/SlideOne/index.vue
+++ b/src/views/Index/components/HeaderSwiper/SlideOne/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="slide_one">
+  <div class="slide_one title_slide">
     <div class="main_content">
-      <img :src="Design" alt="Design" class="design" />
-      <img :src="Title" alt="Title" class="title" />
+      <img :src="Design" alt="Design" class="design_banner" />
+      <img :src="Title" alt="Title" class="title_banner" />
       <img :src="Blue" alt="Blue" class="blue" />
     </div>
     <div class="bottom_statement">
-      <img :src="Factory" alt="design" />
+      <img :src="Factory" alt="design" class="factory" />
     </div>
   </div>
 </template>
@@ -30,23 +30,29 @@ import Blue from '@/assets/img/banner/design/gongyebiaoti.png'
     position: absolute;
     left: 280px;
     top: 359px;
-    // .design {
-    //   width: 192px;
-    //   height: 31px;
-    // }
-    // .title {
-    //   width: 593px;
-    //   height: 86px;
-    // }
-    // .blue {
-    //   width: 530px;
-    //   height: 72px;
-    // }
+    .design_banner {
+      width: 151px;
+      height: 37px;
+      margin-bottom: 45px;
+    }
+    .title_banner {
+      width: 487px;
+      height: 84px;
+      margin-bottom: 57px;
+    }
+    .blue {
+      width: 360px;
+      height: 72px;
+    }
   }
   .bottom_statement {
     position: absolute;
     left: 87px;
     bottom: 77px;
+    .factory {
+      width: 165px;
+      height: 11px;
+    }
   }
 }
 </style>
diff --git a/src/views/Index/components/HeaderSwiper/SlideThree/index.vue b/src/views/Index/components/HeaderSwiper/SlideThree/index.vue
index ff7ca86..f98383c 100644
--- a/src/views/Index/components/HeaderSwiper/SlideThree/index.vue
+++ b/src/views/Index/components/HeaderSwiper/SlideThree/index.vue
@@ -1,12 +1,58 @@
 <template>
-  <div class="slide_three">three</div>
+  <div class="slide_three title_slide">
+    <div class="main_content">
+      <img :src="Design" alt="Design" class="design_banner" />
+      <img :src="Title" alt="Title" class="title_banner" />
+      <img :src="Blue" alt="Blue" class="blue" />
+    </div>
+    <div class="bottom_statement">
+      <img :src="Factory" alt="design" class="factory" />
+    </div>
+  </div>
 </template>
 
-<script>
-export default {}
+<script setup>
+import Factory from '@/assets/img/banner/factory.png'
+import Design from '@/assets/img/banner/lilun/Practice.png'
+import Title from '@/assets/img/banner/lilun/lilunshijian.png'
+import Blue from '@/assets/img/banner/lilun/zhuanjiatuandui.png'
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .slide_three {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../../assets/img/banner/lilun/lilunshijian.jpg);
+  background-position: 100%;
+  background-size: auto 100%;
+  position: relative;
+  .main_content {
+    position: absolute;
+    left: 280px;
+    top: 359px;
+    .design_banner {
+      width: 192px;
+      height: 31px;
+      margin-bottom: 47px;
+    }
+    .title_banner {
+      width: 593px;
+      height: 86px;
+      margin-bottom: 57px;
+    }
+    .blue {
+      width: 530px;
+      height: 72px;
+    }
+  }
+  .bottom_statement {
+    position: absolute;
+    left: 87px;
+    bottom: 77px;
+    .factory {
+      width: 165px;
+      height: 11px;
+    }
+  }
 }
 </style>
diff --git a/src/views/Index/components/HeaderSwiper/SlideTwo/index.vue b/src/views/Index/components/HeaderSwiper/SlideTwo/index.vue
index 26e8f25..6325c45 100644
--- a/src/views/Index/components/HeaderSwiper/SlideTwo/index.vue
+++ b/src/views/Index/components/HeaderSwiper/SlideTwo/index.vue
@@ -1,12 +1,58 @@
 <template>
-  <div class="slide_two">twoi</div>
+  <div class="slide_two title_slide">
+    <div class="main_content">
+      <img :src="Design" alt="Design" class="design_banner" />
+      <img :src="Title" alt="Title" class="title_banner" />
+      <img :src="Blue" alt="Blue" class="blue" />
+    </div>
+    <div class="bottom_statement">
+      <img :src="Factory" alt="design" class="factory" />
+    </div>
+  </div>
 </template>
 
-<script>
-export default {}
+<script setup>
+import Factory from '@/assets/img/banner/factory.png'
+import Design from '@/assets/img/banner/team/composite.png'
+import Title from '@/assets/img/banner/team/fuhetuandui.png'
+import Blue from '@/assets/img/banner/team/zhuanjia.png'
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .slide_two {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../../assets/img/banner/team/tuandui.jpg);
+  background-position: 100%;
+  background-size: auto 100%;
+  position: relative;
+  .main_content {
+    position: absolute;
+    left: 280px;
+    top: 359px;
+    .design_banner {
+      width: 395px;
+      height: 37px;
+      margin-bottom: 40px;
+    }
+    .title_banner {
+      width: 690px;
+      height: 86px;
+      margin-bottom: 58px;
+    }
+    .blue {
+      width: 569px;
+      height: 72px;
+    }
+  }
+  .bottom_statement {
+    position: absolute;
+    left: 87px;
+    bottom: 77px;
+    .factory {
+      width: 165px;
+      height: 11px;
+    }
+  }
 }
 </style>
diff --git a/src/views/Index/components/HeaderSwiper/index.vue b/src/views/Index/components/HeaderSwiper/index.vue
index 62b3f39..3bfdb05 100644
--- a/src/views/Index/components/HeaderSwiper/index.vue
+++ b/src/views/Index/components/HeaderSwiper/index.vue
@@ -3,20 +3,28 @@
     <swiper
       :pagination="pagination"
       :modules="modules"
+      :virtual="true"
+      :spaceBetween="0"
       :loop="true"
+      @slideChange="onSlideChange"
+      :keyboard="{
+        enabled: true,
+        onlyInViewport: false,
+        pageUpDown: true,
+      }"
       @autoplayTimeLeft="onAutoplayTimeLeft"
       class="header_swiper"
     >
-      <swiper-slide>
+      <swiper-slide :virtualIndex="0">
         <SlideOne />
       </swiper-slide>
-      <swiper-slide>
+      <swiper-slide :virtualIndex="1">
         <SlideTwo />
       </swiper-slide>
-      <swiper-slide>
+      <swiper-slide :virtualIndex="2">
         <SlideThree />
       </swiper-slide>
-      <swiper-slide>
+      <swiper-slide :virtualIndex="3">
         <SlideFour />
       </swiper-slide>
       <template #container-end>
@@ -28,22 +36,26 @@
       </template>
     </swiper>
     <div class="down_circle" @click="toNext">
-      <img :src="Arrow" alt="arrow" class="arrow" />
+      <img
+        :src="Arrow"
+        alt="arrow"
+        class="arrow animate__animated animate__heartBeat animate__infinite animate__slower"
+      />
     </div>
   </div>
 </template>
 <script>
-// :autoplay="{
-//     delay: 5000,
-//     disableOnInteraction: false,
-//   }"
+//  :autoplay="{
+//       delay: 5000,
+//       disableOnInteraction: false,
+//     }"
 import { useSwiperStore } from '@/store'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
 // Import Swiper styles
 import 'swiper/css'
 // import required modules
-import { Pagination, Autoplay } from 'swiper'
+import { Pagination, Autoplay, Keyboard, Virtual } from 'swiper'
 import { ref } from 'vue'
 import SlideOne from './SlideOne'
 import SlideTwo from './SlideTwo'
@@ -64,6 +76,7 @@ export default {
       const swiperStore = useSwiperStore()
       swiperStore.slideTo(1)
     },
+    onSlideChange(swiper) {},
   },
   setup() {
     const progressLine = ref(null)
@@ -80,7 +93,7 @@ export default {
           return '<div class="' + className + '"></div>'
         },
       },
-      modules: [Pagination, Autoplay],
+      modules: [Pagination, Autoplay, Keyboard, Virtual],
     }
   },
 }
@@ -91,6 +104,8 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
+  min-width: 1668px;
+  background: #000;
   .down_circle {
     position: absolute;
     bottom: 67px;