From 37996b71876874d6082eec041bd6deac3707f5fd Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Mon, 19 Jun 2023 11:34:09 +0800
Subject: [PATCH] banner icon

---
 src/components/Swiper.vue       |  37 ++++++++++++++++++++++++++++++++-----
 src/components/Top.vue          |  14 +++++++-------
 src/static/img/banner/left.png  | Bin 0 -> 2056 bytes
 src/static/img/banner/lighy.png | Bin 2056 -> 0 bytes
 src/style.scss                  |  37 +++++++++++++++++++++++++++++++++++++
 5 files changed, 76 insertions(+), 12 deletions(-)
 create mode 100644 src/static/img/banner/left.png
 delete mode 100644 src/static/img/banner/lighy.png

diff --git a/src/components/Swiper.vue b/src/components/Swiper.vue
index 8d0b05a..2c8feb3 100644
--- a/src/components/Swiper.vue
+++ b/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;
diff --git a/src/components/Top.vue b/src/components/Top.vue
index 2141ced..a7ffbcc 100644
--- a/src/components/Top.vue
+++ b/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;
diff --git a/src/static/img/banner/left.png b/src/static/img/banner/left.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a3a7cafbe9e13f057a3a671b2dcadb7f1e9cf95
GIT binary patch
literal 2056
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

literal 0
HcmV?d00001

diff --git a/src/static/img/banner/lighy.png b/src/static/img/banner/lighy.png
deleted file mode 100644
index 9a3a7cafbe9e13f057a3a671b2dcadb7f1e9cf95..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

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

diff --git a/src/style.scss b/src/style.scss
index 5535957..6020fe5 100644
--- a/src/style.scss
+++ b/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;
+}