banner icon

src/components/Swiper.vue

@@ -10,12 +10,13 @@
       :navigation="true"
       :modules="modules"
       class="mySwiper"
+      @swiper="onSwiper"
     >
-      <swiper-slide>Slide 1</swiper-slide>
-      <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
-      <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
-      <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
-      <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
+      <swiper-slide><img :src="B1" class="banner" alt="" /></swiper-slide>
+      <swiper-slide><img :src="B2" class="banner" alt="" /></swiper-slide>
+      <swiper-slide><img :src="B3" class="banner" alt="" /></swiper-slide>
+      <div class="swiper-button-prev" @click="preSwiper"></div>
+      <div class="swiper-button-next" @click="nextSwiper"></div>
     </swiper>
     <div class="summar_wrap">
       <Summarize />
@@ -27,12 +28,26 @@
 <script setup>
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import Summarize from 'cpns/Summarize'
+import B1 from '@/static/img/banner/banner1.png'
+import B2 from '@/static/img/banner/banner2.png'
+import B3 from '@/static/img/banner/banner3.png'
 import Top from 'cpns/Top'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/navigation'
 import { Pagination, Navigation } from 'swiper'
 const modules = [Pagination, Navigation]
+import { ref } from 'vue'
+const sw = ref(null)
+const onSwiper = swiper => {
+  sw.value = swiper
+}
+const preSwiper = () => {
+  sw.value?.slidePrev(500, false)
+}
+const nextSwiper = () => {
+  sw.value?.slideNext(500, false)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -40,6 +55,18 @@ const modules = [Pagination, Navigation]
   width: 100vw;
   height: 126vw;
   position: relative;
+  .swiper-button-prev {
+    background: url(../static/img/banner/left.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .swiper-button-next {
+    background: url(../static/img/banner/right.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .banner {
+    width: 100vw;
+    height: auto;
+  }
   .summar_wrap {
     position: absolute;
     box-sizing: border-box;

src/components/Top.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="top_container">
-    <div class="logo_container"></div>
-    <div class="fold_icon" @click="openDrawer"></div>
+    <img class="logo" :src="Logo" alt="" />
+    <img class="fold_icon" :src="Icon" alt="" @click="openDrawer" />
     <div class="modal_drawer" v-if="drawer">
       <img :src="Close" class="close" alt="" @click="drawer = false" />
       <div class="content">
@@ -24,6 +24,8 @@
 <script setup>
 import { ref } from 'vue'
 import Close from '@/static/img/banner/x.png'
+import Logo from '@/static/img/banner/logo.png'
+import Icon from '@/static/img/banner/liebiao.png'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const drawer = ref(false)
@@ -44,20 +46,18 @@ const toPage = path => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #fff;
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
   box-sizing: border-box;
-  .logo_container {
-    display: flex;
-    align-items: center;
+  .logo {
+    width: 85px;
+    height: 17px;
   }
   .fold_icon {
     width: 18px;
     height: 12px;
-    background: #000;
   }
   .modal_drawer {
     position: fixed;

src/style.scss

@@ -15,3 +15,40 @@
   font-family: Zona Pro;
   src: url(./static/font/ZONAPRO-BLACK.OTF);
 }
+.swiper-pagination-bullets {
+  bottom: 51px !important;
+  top: auto !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mySwiper {
+  position: relative;
+  .swiper-pagination {
+    .swiper-pagination-bullet {
+      width: 3px;
+      height: 3px;
+      background: #646a73;
+      border-radius: 50%;
+    }
+    .swiper-pagination-bullet-active {
+      background-color: #01f4f6;
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+    }
+  }
+}
+
+.swiper-button-next:after,
+.swiper-button-prev:after {
+  font-size: 0;
+  display: none;
+}
+.swiper-button-prev {
+  left: 18px !important;
+}
+.swiper-button-next {
+  right: 18px !important;
+}