Merge branch 'master' of http://git.cstar.info/r/web/pcac into master

landjj321

2021-03-20 a864d323f4bd4a2d5614e657fae5f09137e84bb9

Merge branch 'master' of http://git.cstar.info/r/web/pcac into master

 src/assets/home/art_mien/certify01.png

Binary files differ

 src/assets/home/art_mien/wm_button_icon.png

 src/views/home/components/ArtMien.vue

@@ -1,123 +1,126 @@
<template>
  <div class="art-mien">
    <div class="bg">
      <span class="title font-bold">文艺·风采</span>
    </div>
    <div class="content">
      <el-carousel type="card" indicator-position="none" :loop="true" :interval="2000" height="360px" :autoplay="true">
        <el-carousel-item v-for="(item, index) in list" :key="index">
    <div class="art-mien">
        <div class="bg">
            <span class="title font-bold">文艺·风采</span>
        </div>
        <div id="certify">
            <!-- <el-carousel type="card" indicator-position="none" loop="true" interval="2000" height="360px" :autoplay="true">
                <el-carousel-item v-for="(item, index) in list" :key="index">
                    
          <img :src="item.imgSrc">
        </el-carousel-item>
      </el-carousel>
      <!-- <div class="swiper-container">
                        <img :src="item.imgSrc" />
                </el-carousel-item>
            </el-carousel> -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in list" :key="index">
                        <img :src="item.imgSrc" />
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div> -->
    </div>
  </div>
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->
            </div>
        </div>
    </div>
</template>

<script>
// import '../../../utils/swiper.min.js';
	
export default {
  name: 'ArtMien',
  data() {
    return {
      list: [{
        imgSrc: require('@/assets/home/art_mien/1.png')
      },
      {
        imgSrc: require('@/assets/home/art_mien/2.png')
      },
      {
        imgSrc: require('@/assets/home/art_mien/3.png')
      },
					
      {
        imgSrc: require('@/assets/home/art_mien/4.png')
      },
      {
        imgSrc: require('@/assets/home/art_mien/5.png')
      },
      {
        imgSrc: require('@/assets/home/art_mien/6.png')
      },
      {
        imgSrc: require('@/assets/home/art_mien/7.png')
      },
      {
        imgSrc: require('@/assets/home/art_mien/8.png')
      }
      ],
      certifySwiper: null
    }
  }
  // beforeMount() {
  //     var certifySwiper = new Swiper('.content .swiper-container', {
  //         watchSlidesProgress: true,
  //         slidesPerView: 'auto',
  //         centeredSlides: true,
  //         loop: true,
  //         loopedSlides: 5,
  //         autoplay: 3000,
  //         prevButton: '.swiper-button-prev',
  //         nextButton: '.swiper-button-next',
  //         pagination: '.swiper-pagination',
  //         //paginationClickable :true,
  //         onProgress: function(swiper, progress) {
  //             for (i = 0; i < swiper.slides.length; i++) {
  //                 var slide = swiper.slides.eq(i);
  //                 var slideProgress = swiper.slides[i].progress;
  //                 modify = 1;
  //                 if (Math.abs(slideProgress) > 1) {
  //                     modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
  //                 }
  //                 translate = slideProgress * modify * 260 + 'px';
  //                 scale = 1 - Math.abs(slideProgress) / 5;
  //                 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) > 3) {
  //                     slide.css('opacity', 0);
  //                 }
  //             }
  //         },
  //         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);
  //             }
  //         }
  //     });
  // }
		
}
    import '../../../utils/swiper.min.js';

    export default {
        name: "ArtMien",
        data() {
            return {
                list: [{
                        imgSrc: require("@/assets/home/art_mien/1.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/2.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/3.png")
                    },

                    {
                        imgSrc: require("@/assets/home/art_mien/4.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/5.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/6.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/7.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/8.png")
                    }
                ],
                certifySwiper: null
            }
        },
        mounted() {

            var certifySwiper = new Swiper('#certify .swiper-container', {
                watchSlidesProgress: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                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);
                        }
                    }
                },
                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);
                    }
                }
            });
        }

    }
</script>


<style lang="scss" scoped>
    @import "~@/styles/variables.scss";
    // @import  "../../../styles/swiper.min.css";
    @import "../../../styles/swiper.min.css";

    .art-mien {
        width: $appWidth;
        height: 36rem;
        padding: 20px;
        // height: 36rem;

        .bg {
            height: 8rem;
@@ -142,131 +145,79 @@
            }
        }

        .content {
        #certify {
            margin-top: 1rem;
            height: 27rem;
            position: relative;
            background-image: url("../../../assets/home/art_subject/bg.png");
            background-size: 100% 100%;
			
            // position: relative;
            // width: 1200px;
            // margin: 0 auto;
				
            // .swiper-container {
            //     padding-bottom: 60px;
            // }
			
            // .swiper-slide {
            //     width: 520px;
            //     height: 408px;
            //     background: #fff;
            //     box-shadow: 0 8px 30px #ddd;
            // }
            // .swiper-slide img{
            //     display:block;
            // }
            // .swiper-slide p {
            //     line-height: 98px;
            //     padding-top: 0;
            //     text-align: center;
            //     color: #636363;
            //     font-size: 1.1em;
            //     margin: 0;
            // }
			
            // .swiper-pagination {
            //     width: 100%;
            //     bottom: 20px;
            // }
			
            // .swiper-pagination-bullets .swiper-pagination-bullet {
            //     margin: 0 5px;
            //     border: 3px solid #fff;
            //     background-color: #d5d5d5;
            //     width: 10px;
            //     height: 10px;
            //     opacity: 1;
            // }
			
            // .swiper-pagination-bullets .swiper-pagination-bullet-active {
            //     border: 3px solid #00aadc;
            //     background-color: #fff;
            // }
			
            // .swiper-button-prev {
            //     left: -30px;
            //     width: 45px;
            //     height: 45px;
            //     background: url(../../../assets/wm_button_icon.png) no-repeat;
            //     background-position: 0 0;
            //     background-size: 100%;
            // }
			
            // .swiper-button-prev:hover {
            //     background-position: 0 -46px;
            //     background-size: 100%
            // }
			
            // .swiper-button-next {
            //     right: -30px;
            //     width: 45px;
            //     height: 45px;
            //     background: url(../../../assets/wm_button_icon.png) no-repeat;
            //     background-position: 0 -93px;
            //     background-size: 100%;
            // }
			
            // .swiper-button-next:hover {
            //     background-position: 0 -139px;
            //     background-size: 100%
            // }

            /deep/ .el-carousel__indicators--outside {
                margin-top: 23px;
            margin: 0 auto;
            .swiper-container {
                padding: 30px;
            }

            img {
                position: absolute;
                width: 18.5rem;
                height: 30rem;
            .swiper-slide {
                width: 350px;
                height: 430px;
            }

            img:nth-child(1) {
                left: 0;
            .swiper-slide img {
                display: block;
                width: 100%;
                height: 100%;
            }

            img:nth-child(2) {
                left: 11.2rem;
            .swiper-slide p {
                line-height: 98px;
                padding-top: 0;
                text-align: center;
                color: #636363;
                font-size: 1.1em;
                margin: 0;
            }

            img:nth-child(3) {
                left: 18.7rem;
            .swiper-pagination {
                width: 100%;
                bottom: 0px;
            }

            img:nth-child(4) {
                left: 26.1rem;
            .swiper-pagination-bullets .swiper-pagination-bullet {
                margin: 0 5px;
                border: 3px solid #fff;
                background-color: #d5d5d5;
                width: 10px;
                height: 10px;
                opacity: 1;
            }

            img:nth-child(5) {
                left: 37rem;
                z-index: 5;
            .swiper-pagination-bullets .swiper-pagination-bullet-active {
                border: 3px solid #00aadc;
                background-color: #fff;
            }

            img:nth-child(6) {
                left: 47.6rem;
                z-index: 4;
            .swiper-button-prev {
                left: -30px;
                width: 45px;
                height: 45px;
                background: url(../../../assets/home/art_mien/wm_button_icon.png) no-repeat;
                background-position: 0 0;
                background-size: 100%;
            }

            img:nth-child(7) {
                left: 55.5rem;
                width: 17.5rem;
                z-index: 3;
            .swiper-button-prev:hover {
                background-position: 0 -46px;
                background-size: 100%
            }

            img:nth-child(8) {
                right: 0;
                z-index: 2;
            .swiper-button-next {
                right: -30px;
                width: 45px;
                height: 45px;
                background: url(../../../assets/home/art_mien/wm_button_icon.png) no-repeat;
                background-position: 0 -93px;
                background-size: 100%;
            }

            .swiper-button-next:hover {
                background-position: 0 -139px;
                background-size: 100%
            }
        }
    }