diff --git a/src/style.scss b/src/style.scss index 1c09cbc..ff4dd89 100644 --- a/src/style.scss +++ b/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; + } } } } diff --git a/src/views/Index/components/HeaderSwiper/SlideFive/index.vue b/src/views/Index/components/HeaderSwiper/SlideFive/index.vue index 405cc56..17b71a4 100644 --- a/src/views/Index/components/HeaderSwiper/SlideFive/index.vue +++ b/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; diff --git a/src/views/Index/components/HeaderSwiper/SlideFour/index.vue b/src/views/Index/components/HeaderSwiper/SlideFour/index.vue index d1bbe45..3206c5e 100644 --- a/src/views/Index/components/HeaderSwiper/SlideFour/index.vue +++ b/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; diff --git a/src/views/Index/components/HeaderSwiper/SlideOne/index.vue b/src/views/Index/components/HeaderSwiper/SlideOne/index.vue index e833045..2cb8007 100644 --- a/src/views/Index/components/HeaderSwiper/SlideOne/index.vue +++ b/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; diff --git a/src/views/Index/components/HeaderSwiper/SlideThree/index.vue b/src/views/Index/components/HeaderSwiper/SlideThree/index.vue index f516ecb..ad5a128 100644 --- a/src/views/Index/components/HeaderSwiper/SlideThree/index.vue +++ b/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'; diff --git a/src/views/Index/components/HeaderSwiper/SlideTwo/index.vue b/src/views/Index/components/HeaderSwiper/SlideTwo/index.vue index 65f33bf..380ae67 100644 --- a/src/views/Index/components/HeaderSwiper/SlideTwo/index.vue +++ b/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; } } diff --git a/src/views/Index/components/HeaderSwiper/index.vue b/src/views/Index/components/HeaderSwiper/index.vue index c22f8dc..71578de 100644 --- a/src/views/Index/components/HeaderSwiper/index.vue +++ b/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 @@ -
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 '
' + return `

0${ + index + 1 + }

` }, }, modules: [Pagination, Autoplay, Keyboard, Virtual], diff --git a/stats.html b/stats.html index ecc8b2d..6f230da 100644 --- a/stats.html +++ b/stats.html @@ -6157,7 +6157,7 @@ var drawChart = (function (exports) {