jiao dian

src/App.vue

@@ -19,7 +19,7 @@ export default {
   }
 }
 </script>
-
+<style src="../assets/css/swiper-bundle.min.css"></style>
 <style>
 @import 'assets/css/swiper.min.css';
 @import 'assets/css/swiper-bundle.min.css';

src/components/Banner.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="swiper-container von-in-ban">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide">
+        <a href=""><img src="@/assets/img/index_banner02.png" width="100%" /></a>
+      </div>
+      <div class="swiper-slide">
+        <a href=""><img src="@/assets/img/index_banner02.png" width="100%" /></a>
+      </div>
+      <div class="swiper-slide">
+        <a href=""><img src="@/assets/img/index_banner02.png" width="100%" /></a>
+      </div>
+      <div class="swiper-slide">
+        <a href=""><img src="@/assets/img/index_banner02.png" width="100%" /></a>
+      </div>
+      <div class="swiper-slide">
+        <a href=""><img src="@/assets/img/index_banner02.png" width="100%" /></a>
+      </div>
+    </div>
+    <div class="swiper-pagination"></div>
+  </div>
+</template>
+
+<script>
+import Swiper from '@/assets/js/swiper-bundle.min.js'
+export default {
+  name: "banner",
+  props: {
+    bannerRoute: {
+      require: false,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    slider() {
+      new Swiper(".swiper-container.von-in-ban", {
+        spaceBetween: 30,
+        centeredSlides: true,
+        autoplay: {
+          delay: 2500,
+          disableOnInteraction: false,
+        },
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true,
+        },
+      });
+    },
+  },
+  mounted() {
+    this.slider();
+  },
+};
+</script>
+
+<style>
+
+</style>

src/components/Banner2.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="swiper-container mt-5 von-in-cpbo">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide"><img src="@/assets/img/index12.png" width="100%" /></div>
+      <div class="swiper-slide"><img src="@/assets/img/index12.png" width="100%" /></div>
+      <div class="swiper-slide"><img src="@/assets/img/index12.png" width="100%" /></div>
+      <div class="swiper-slide"><img src="@/assets/img/index12.png" width="100%" /></div>
+      <div class="swiper-slide"><img src="@/assets/img/index12.png" width="100%" /></div>
+      <div class="swiper-slide"><img src="@/assets/img/index12.png" width="100%" /></div>
+      <div class="swiper-slide"><img src="@/assets/img/index12.png" width="100%" /></div>
+      <div class="swiper-slide"><img src="@/assets/img/index12.png" width="100%" /></div>
+    </div>
+    <div class="swiper-button-next"></div>
+    <div class="swiper-button-prev"></div>
+  </div>
+</template>
+
+<script>
+import Swiper from "@/assets/js/swiper-bundle.min.js";
+export default {
+  name: "banner2",
+  props: {
+    bannerRoute: {
+      require: false,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    slider() {
+      new Swiper(".swiper-container.von-in-cpbo", {
+        slidesPerView: 4,
+        spaceBetween: 30,
+        slidesPerGroup: 4,
+        loop: true,
+        loopFillGroupWithBlank: true,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      });
+    },
+  },
+  mounted() {
+    this.slider();
+  },
+};
+</script>
+
+<style>
+</style>

src/main.js

@@ -7,7 +7,6 @@ Vue.use(VueAwesomeSwiper)
 
 Vue.config.productionTip = false
 Vue.use(AxiosPlugin);
-
 new Vue({
   router,
   render: h => h(App)

src/views/index.vue

@@ -1,16 +1,7 @@
 <template>
   <div>
     <main role="main" class="von-in-main">
-      <div class="swiper-container von-in-ban">
-          <swiper class="swiper-wrapper" :options="swiperOptionTop">
-            <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
-            <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
-            <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
-            <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
-            <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
-          </swiper>
-          <!-- <div class="swiper-pagination"></div> -->
-      </div>
+     <banner ref="mybanner"></banner>
       <div class="von-in">
         <div class="von-in-one">
           <img src="../assets/img/index00.png" width="100%">
@@ -20,20 +11,8 @@
         <div class="mt-5">
           <img src="../assets/img/index11.png" width="100%">
         </div>
-        <div class="swiper-container mt-5 von-in-cpbo">
-          <swiper class="swiper-wrapper" :options="swiperOptionBtm">
-            <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
-            <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
-            <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
-            <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
-            <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
-            <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
-            <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
-            <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
-          </swiper>
-          <!-- <div class="swiper-button-next"></div>
-          <div class="swiper-button-prev"></div> -->
-        </div>
+        <banner2 ref="mybanner2"></banner2>
+        
         <div class="row mb-3 mt-5 von-in-text d-flex justify-content-between">
           <div class="themed-grid-col">
             <h1 class="yellow">种类与规格齐全</h1>
@@ -57,41 +36,21 @@
 
 
 <script>
-import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
 
+import Banner from '@/components/Banner.vue'
+import Banner2 from '@/components/Banner2.vue'
 export default {
   name: "app",
+  components: {
+  Banner,
+  Banner2
+  },
   data() {
     return {
-      swiperOptionTop: {
-        spaceBetween: 30,
-        centeredSlides: true,
-        autoplay: {
-          delay: 2500,
-          disableOnInteraction: false,
-        },
-        // pagination: {
-        //   el: '.swiper-pagination',
-        //   clickable: true,
-        // },
-      },
-      swiperOptionBtm: {
-        slidesPerView: 4,
-				spaceBetween: 30,
-				slidesPerGroup: 4,
-				loop: true,
-				loopFillGroupWithBlank: true,
-				// navigation: {
-				// 	nextEl: '.swiper-button-next',
-				// 	prevEl: '.swiper-button-prev',
-				// },
-      },
+     
     };
   },
-  components: {
-    Swiper,
-    SwiperSlide
-  },
+  
 
 }
 </script>