界面完善

Hui Yu

2021-03-24 22371ac7271a00c7dcd0aed47dcc6d856faaeec9

 src/views/home/components/ArtMien.vue

@@ -47,49 +47,24 @@
      },
      mounted() {

         var certifySwiper = new Swiper('#certify .swiper-container', {
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: true,
         new Swiper('#certify .swiper-container', {
            autoplay: {
              delay: 1000
            },
            loop: true,
            loopedSlides:8,
            autoplay: 3000,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            pagination: '.swiper-pagination',
            //paginationClickable :true,
            onProgress: function(swiper, progress) {
               for (var i = 0; i < swiper.slides.length; i++) {
                  var slide = swiper.slides.eq(i);
                  var slideProgress = swiper.slides[i].progress;
                  var modify = 1;
                  if (Math.abs(slideProgress) > 1) {
                     modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                  }
                  var translate = slideProgress * modify * 110 + 'px';
                  var scale = 1 - Math.abs(slideProgress) / 8;
                  var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                  slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                  slide.css('zIndex', zIndex);
                  slide.css('opacity', 1);
                  if (Math.abs(slideProgress) > 2) {
                     slide.css('opacity', 0);
                  }
               }
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
              rotate: 80,
              stretch: 0,
              depth: 200,
              modifier: 1,
              slideShadows: true
            },
            onSetTransition: function(swiper, transition) {
               for (var i = 0; i < swiper.slides.length; i++) {
                  var slide = swiper.slides.eq(i)
                  slide.transition(transition);
               }

            },
            //处理分页器bug
            onSlideChangeStart: function(swiper) {
               if (swiper.activeIndex == 4) {
                  swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');
                  console.log(swiper.bullets.length);
               }
            pagination: {
              el: '.swiper-pagination'
            }
         });
      }