123

src/assets/scss/globalVar.scss

@@ -1,4 +1,5 @@
-$theme_color: #2e39e6;
+$theme_color: #283fe7;
 $default_color: #ffffff;
+$point_default: #646a73;
 
 $header_height: 90px;

src/components/TopNav/index.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import Logo from '@/assets/img/logo1.png'
+import Logo from '@/assets/img/banner/logo1.png'
 </script>
 
 <style scoped lang="scss">

src/store/index.js

@@ -1,6 +1,7 @@
 import { createPinia } from 'pinia'
 import { useCountStore } from './modules/count'
+import { useSwiperStore } from './modules/swiper'
 const store = createPinia()
 
 export default store
-export { useCountStore }
+export { useCountStore, useSwiperStore }

src/store/modules/swiper.js

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+export const useSwiperStore = defineStore({
+  id: 'swiper', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      swiper: null,
+    }
+  },
+  // actions
+  actions: {
+    initSwiper(swiper) {
+      this.swiper = swiper
+    },
+    slideTo(index) {
+      this.swiper.slideTo(index, 500, false)
+    },
+  },
+})

src/style.scss

@@ -76,11 +76,34 @@ body {
     object-fit: cover;
   }
 }
+// 首页轮播 pagination重写样式
+.home_swiper {
+  position: relative;
+  .swiper-pagination {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    margin-right: 40px;
+    .swiper-pagination-bullet {
+      width: 6px;
+      height: 6px;
+      background: $point_default;
+      border-radius: 50%;
+    }
+    .swiper-pagination-bullet-active {
+      background-color: $theme_color;
+      width: 24px;
+      height: 6px;
+      border-radius: 3px;
+    }
+  }
+}
 
 // 头部轮播 pagination重写样式
 .header_swiper {
   position: relative;
   .swiper-pagination {
+    display: block;
     position: absolute;
     right: 0 !important;
     left: 90vw !important;
@@ -89,7 +112,7 @@ body {
     .swiper-pagination-bullet {
       width: 5px;
       height: 5px;
-      background-color: #576166;
+      background-color: $point_default;
     }
     .swiper-pagination-bullet-active {
       background-color: $theme_color;
@@ -118,8 +141,7 @@ body {
   z-index: 10;
   width: 100%;
   height: 100%;
-  stroke-width: 20px;
-  fill: none;
+  stroke-width: 10px;
   stroke: $theme_color;
   stroke-dashoffset: calc(480 * (1 - var(--progress)));
   stroke-dasharray: 480;

src/views/Index/components/HeaderSwiper/SlideOne/index.vue

@@ -1,26 +1,47 @@
 <template>
   <div class="slide_one">
-    <div class="main_content"></div>
-    <div class="bottom_statement"></div>
+    <div class="main_content">
+      <img :src="Design" alt="Design" class="design" />
+      <img :src="Title" alt="Title" class="title" />
+      <img :src="Blue" alt="Blue" class="blue" />
+    </div>
+    <div class="bottom_statement">
+      <img :src="Factory" alt="design" />
+    </div>
   </div>
 </template>
 
-<script>
-export default {}
+<script setup>
+import Factory from '@/assets/img/banner/factory.png'
+import Design from '@/assets/img/banner/design/design.png'
+import Title from '@/assets/img/banner/design/xingongyesheji.png'
+import Blue from '@/assets/img/banner/design/gongyebiaoti.png'
 </script>
 
 <style lang="scss" scoped>
 .slide_one {
   width: 100%;
   height: 100%;
-  background: url(../../../../../assets/img/1.jpg);
-  background-position: 40%;
+  background: url(../../../../../assets/img/banner/design/gongyesheji.jpg);
+  background-position: 100%;
   background-size: auto 100%;
   position: relative;
   .main_content {
     position: absolute;
     left: 280px;
     top: 359px;
+    // .design {
+    //   width: 192px;
+    //   height: 31px;
+    // }
+    // .title {
+    //   width: 593px;
+    //   height: 86px;
+    // }
+    // .blue {
+    //   width: 530px;
+    //   height: 72px;
+    // }
   }
   .bottom_statement {
     position: absolute;

src/views/Index/components/HeaderSwiper/index.vue

@@ -1,37 +1,43 @@
 <template>
-  <swiper
-    :pagination="pagination"
-    :modules="modules"
-    :loop="true"
-    @autoplayTimeLeft="onAutoplayTimeLeft"
-    :autoplay="{
-      delay: 5000,
-      disableOnInteraction: false,
-    }"
-    class="header_swiper"
-  >
-    <swiper-slide>
-      <SlideOne />
-    </swiper-slide>
-    <swiper-slide>
-      <SlideTwo />
-    </swiper-slide>
-    <swiper-slide>
-      <SlideThree />
-    </swiper-slide>
-    <swiper-slide>
-      <SlideFour />
-    </swiper-slide>
-    <template #container-end>
-      <div class="autoplay-progress">
-        <svg viewBox="0 0 48 48" ref="progressLine">
-          <line x1="-190" y1="2" x2="300" y2="2"></line>
-        </svg>
-      </div>
-    </template>
-  </swiper>
+  <div class="header_container">
+    <swiper
+      :pagination="pagination"
+      :modules="modules"
+      :loop="true"
+      @autoplayTimeLeft="onAutoplayTimeLeft"
+      class="header_swiper"
+    >
+      <swiper-slide>
+        <SlideOne />
+      </swiper-slide>
+      <swiper-slide>
+        <SlideTwo />
+      </swiper-slide>
+      <swiper-slide>
+        <SlideThree />
+      </swiper-slide>
+      <swiper-slide>
+        <SlideFour />
+      </swiper-slide>
+      <template #container-end>
+        <div class="autoplay-progress">
+          <svg viewBox="0 0 48 48" ref="progressLine">
+            <line x1="-200" y1="2" x2="300" y2="2"></line>
+          </svg>
+        </div>
+      </template>
+    </swiper>
+    <div class="down_circle" @click="toNext">
+      <img :src="Arrow" alt="arrow" class="arrow" />
+    </div>
+  </div>
 </template>
 <script>
+// :autoplay="{
+//     delay: 5000,
+//     disableOnInteraction: false,
+//   }"
+import { useSwiperStore } from '@/store'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
 // Import Swiper styles
@@ -43,6 +49,7 @@ import SlideOne from './SlideOne'
 import SlideTwo from './SlideTwo'
 import SlideThree from './SlideThree'
 import SlideFour from './SlideFour'
+import Arrow from '@/assets/img/banner/arrow.png'
 export default {
   components: {
     Swiper,
@@ -52,6 +59,12 @@ export default {
     SlideThree,
     SlideFour,
   },
+  methods: {
+    toNext() {
+      const swiperStore = useSwiperStore()
+      swiperStore.slideTo(1)
+    },
+  },
   setup() {
     const progressLine = ref(null)
     const onAutoplayTimeLeft = (s, time, progress) => {
@@ -60,7 +73,9 @@ export default {
     return {
       onAutoplayTimeLeft,
       progressLine,
+      Arrow,
       pagination: {
+        clickable: true,
         renderBullet: function (index, className) {
           return '<div class="' + className + '"></div>'
         },
@@ -72,6 +87,28 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.header_swiper {
+.header_container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .down_circle {
+    position: absolute;
+    bottom: 67px;
+    left: 50%;
+    transform: translate(-50%);
+    width: 28px;
+    height: 28px;
+    border: 2px solid #ffffff;
+    z-index: 11;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .arrow {
+      width: 12px;
+      height: 8px;
+    }
+  }
 }
 </style>

src/views/Index/index.vue

@@ -6,9 +6,7 @@
     :spaceBetween="0"
     :mousewheel="true"
     :speed="800"
-    :pagination="{
-      clickable: true,
-    }"
+    :pagination="pagination"
     :keyboard="{
       enabled: true,
       onlyInViewport: false,
@@ -17,6 +15,7 @@
     @swiper="onSwiper"
     @slideChange="onSlideChange"
     :modules="modules"
+    class="home_swiper"
   >
     <swiper-slide :key="0" :virtualIndex="0">
       <HeaderSwiper />
@@ -54,6 +53,8 @@
   </swiper>
 </template>
 <script>
+import { onMounted } from 'vue'
+import { useSwiperStore } from '@/store'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
 // import required modules
@@ -93,7 +94,8 @@ export default {
   },
   setup() {
     const onSwiper = swiper => {
-      // console.log(swiper)
+      const swiperStore = useSwiperStore()
+      swiperStore.initSwiper(swiper)
     }
     const onSlideChange = swiper => {
       const { activeIndex } = swiper
@@ -101,8 +103,16 @@ export default {
     return {
       onSwiper,
       onSlideChange,
+      pagination: {
+        clickable: true,
+        renderBullet: function (index, className) {
+          return '<div class="' + className + '"></div>'
+        },
+      },
       modules: [Mousewheel, Pagination, Virtual, Keyboard],
     }
   },
 }
 </script>
+
+<style lang="scss" scoped></style>