123

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>

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>

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>

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;