123

src/style.scss

@@ -112,19 +112,86 @@ body {
 .header_swiper {
   position: relative;
   .swiper-pagination {
-    display: block;
+    display: flex;
+    flex-direction: row;
     position: absolute;
     right: 0 !important;
-    left: 90vw !important;
-    bottom: 90px !important;
-    width: 68px !important;
+    left: 87px !important;
+    bottom: 0px !important;
+    width: 250px !important;
+    height: 100px;
     .swiper-pagination-bullet {
-      width: 5px;
-      height: 5px;
-      background-color: $point_default;
+      width: 50px;
+      height: 3px !important;
+      background: #c2c2c2 !important;
+      opacity: 1 !important;
+      // height: 5px;
+      border-radius: 2px !important;
+      .home_swiper_page_num {
+        position: absolute;
+        bottom: 90px;
+        display: flex;
+        height: 14px;
+        font-size: 20px;
+        font-family: 'ZonaPro';
+        font-weight: 900;
+        color: #c2c2c2;
+        line-height: 67px;
+        width: 40px;
+        justify-content: center;
+      }
+    }
+    .active-class-1 {
+      background: $theme_color !important;
+      opacity: 1 !important;
+      .home_swiper_page_num {
+        position: absolute;
+        bottom: 90px;
+        display: flex;
+        height: 14px;
+        font-size: 20px;
+        font-family: 'ZonaPro';
+        font-weight: 900;
+        color: $theme_color;
+        line-height: 67px;
+        width: 40px;
+        justify-content: center;
+      }
+    }
+
+    .active-class-2 {
+      background: #fff !important;
+      opacity: 1 !important;
+      .home_swiper_page_num {
+        position: absolute;
+        bottom: 90px;
+        display: flex;
+        height: 14px;
+        font-size: 20px;
+        font-family: 'ZonaPro';
+        font-weight: 900;
+        color: #fff;
+        line-height: 67px;
+        width: 40px;
+        justify-content: center;
+      }
     }
     .swiper-pagination-bullet-active {
-      background-color: $theme_color;
+      background: $theme_color !important;
+      opacity: 1 !important;
+      .home_swiper_page_num {
+        position: absolute;
+        bottom: 90px;
+        display: flex;
+        height: 14px;
+        font-size: 20px;
+        font-family: 'ZonaPro';
+        font-weight: 900;
+        color: $theme_color;
+        line-height: 67px;
+        width: 40px;
+        justify-content: center;
+      }
     }
   }
 }

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

@@ -95,7 +95,7 @@
     }
     .bottom_statement {
       position: absolute;
-      left: 84px;
+      right: 87px;
       white-space: nowrap;
       z-index: 999;
       bottom: 75px;

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

@@ -82,7 +82,7 @@
   }
   .bottom_statement {
     position: absolute;
-    left: 87px;
+    right: 87px;
     white-space: nowrap;
     bottom: 75px;
     font-size: 12px;

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

@@ -89,7 +89,7 @@
   .bottom_statement {
     position: absolute;
     white-space: nowrap;
-    left: 87px;
+    right: 87px;
     bottom: 77px;
     width: 165px;
     height: 11px;

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

@@ -75,7 +75,7 @@ import Gif from '@/assets/img/banner/nation/logo.png'
   .bottom_statement {
     position: absolute;
     white-space: nowrap;
-    left: 87px;
+    right: 87px;
     bottom: 77px;
     font-size: 12px;
     font-family: 'ZonaPro';

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

@@ -74,14 +74,14 @@ import HeaderPng from '@/assets/img/banner/lilun/biaotitubiao.png'
   .bottom_statement {
     position: absolute;
     white-space: nowrap;
-    left: 87px;
+    right: 87px;
     bottom: 75px;
     width: 165px;
     height: 11px;
     font-size: 12px;
     font-family: 'ZonaPro';
     font-weight: 400;
-    color: #646a73;
+    color: #fff;
     letter-spacing: 1px;
   }
 }

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

@@ -6,10 +6,6 @@
       :virtual="true"
       :spaceBetween="0"
       :loop="true"
-      :autoplay="{
-        delay: 5000,
-        disableOnInteraction: false,
-      }"
       @swiper="onSwiper"
       @slideChange="onSlideChange"
       :keyboard="{
@@ -17,6 +13,10 @@
         onlyInViewport: false,
         pageUpDown: true,
       }"
+      :autoplay="{
+        delay: 5000,
+        disableOnInteraction: false,
+      }"
       @autoplayTimeLeft="onAutoplayTimeLeft"
       class="header_swiper ignore-min-width"
     >
@@ -35,13 +35,6 @@
       <swiper-slide :virtualIndex="5">
         <SlideThree />
       </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="isWhite ? 'down_circle' : 'down_circle bg_b'" @click="toNext">
       <img
@@ -93,6 +86,17 @@ export default {
       const { activeIndex, previousIndex } = swiper
       // totalTitleAni(activeIndex, previousIndex)
       swiperStore.updateHeaderIndex(activeIndex)
+      console.log(activeIndex)
+      if (activeIndex == 4) {
+        console.log(swiper.pagination.bullets)
+        if (swiper.pagination.bullets.length > 0) {
+          swiper.pagination.bullets[3].classList.add('active-class-2')
+        }
+      } else {
+        if (swiper.pagination.bullets.length > 0) {
+          swiper.pagination.bullets[3].classList.remove('active-class-2')
+        }
+      }
     },
     getSrc() {
       if (this.isWhite) {
@@ -112,17 +116,20 @@ export default {
   },
   setup() {
     const progressLine = ref(null)
-    const onAutoplayTimeLeft = (s, time, progress) => {
-      progressLine.value.style.setProperty('--progress', 1 - progress)
-    }
+    // const onAutoplayTimeLeft = (s, time, progress) => {
+    //   progressLine.value.style.setProperty('--progress', 1 - progress)
+    // }
     return {
-      onAutoplayTimeLeft,
+      // onAutoplayTimeLeft,
       progressLine,
       Arrow,
       pagination: {
         clickable: true,
+        bulletActiveClass: 'active-class-1',
         renderBullet: function (index, className) {
-          return '<div class="' + className + '"></div>'
+          return `<div class="${className}"><p class="home_swiper_page_num">0${
+            index + 1
+          }<p/></div>`
         },
       },
       modules: [Pagination, Autoplay, Keyboard, Virtual],