web/pcac.git - Gitblit

			@@ -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%
			}
			}
			}