sy/src/pages/bigdata/home/index.vue

<template>
	<div class="wrap" :style="{backgroundImage:'url('+bodyBg+')'}">
		<div id="certify">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div
						class="swiper-slide"
						v-for="(item,index) in lists"
						@click="goPage(item.type)"
						:key="index"
						:style="{backgroundImage:'url('+item.imgUrl+')'}"
					></div>
				</div>
			</div>
			<div class="swiper-button-prev" :style="{backgroundImage:'url('+btnBg+')'}"></div>
			<div class="swiper-button-next" :style="{backgroundImage:'url('+btnBg+')'}"></div>
			<div class="swiper-pagination"></div>
		</div>
		<div class="btn-box">
			<ul>
				<li
					:class="{'active':aIndex==index}"
					@click="switchTo(index)"
					v-for="(item,index) in lists"
					:key="index"
				>{{item.name}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
	data() {
		return {
			bodyBg: require('@/assets/images/bigdata/home/bg.jpg'),
			btnBg: require('@/assets/images/bigdata/home/button_icon.png'),
			certifySwiper: '',
			aIndex: 0,
			lists: [
				{
					type: '/bCbd',
					name: '虫情测报系统',
					imgUrl: require('@/assets/images/bigdata/home/cbd.png')
				},
				// {
				// 	type: '/jk',
				// 	name: '监控系统',
				// 	imgUrl: require('@/assets/images/bigdata/home/jk.png')
				// },
				{
					type: '/bBzy',
					name: '孢子仪系统',
					imgUrl: require('@/assets/images/bigdata/home/bzy.png')
				},
				{
					type: '/bQxz',
					name: '气象监测系统',
					imgUrl: require('@/assets/images/bigdata/home/qxz.png')
				},
				// {
				// 	type: '/farm',
				// 	name: '农场管理系统',
				// 	imgUrl: require('@/assets/images/bigdata/home/farm.png')
				// },
				{
					type: '/bSy',
					name: '溯源系统',
					imgUrl: require('@/assets/images/bigdata/home/sy.png')
				},
				{
					type: '/equipDistribute',
					name: '设备分布展示',
					imgUrl: require('@/assets/images/bigdata/home/distribute.png')
				},
				{
					type: '/bFourSituations',
					name: '设备综合展示',
					imgUrl: require('@/assets/images/bigdata/home/fourSituations.png')
				}
			]
		}
	},
	mounted() {
		this.swiperInit()
	},
	methods: {
		switchTo(i) {
			this.aIndex = i
			this.certifySwiper.slideTo(i+5, 1000, false)
		},
		swiperInit() {
			let _this = this
			this.certifySwiper = new Swiper('#certify .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,
				//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 * 260 + 'px';
						var scale = 1 - Math.abs(slideProgress) / 5;
						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) > 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);
					}
				},
				//使右边菜单跟着动
				onSlideChangeEnd: function(swiper){
					_this.aIndex = swiper.realIndex //切换结束时，告诉我现在是第几个slide
				}
			})
		},
		goPage(type) {
			const { href } = this.$router.resolve({
				path: type
			})
			window.open(href, '_blank')
		}
	}
}
</script>

<style lang='less' scoped>
body {
	overflow: hidden;
}
.wrap {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	overflow: hidden;
	#certify {
		position: relative;
		width: 1200px;
		margin: 0 auto;
		margin-top: 150px;
	}

	#certify .swiper-container {
		padding-bottom: 60px;
	}

	#certify .swiper-slide {
		width: 500px;
		height: 488px;
		background-size: 75% 100%;
		background-position: center center;
		background-repeat: no-repeat;
	}
	#certify .swiper-slide img {
		display: block;
	}
	#certify .swiper-slide p {
		line-height: 98px;
		padding-top: 0;
		text-align: center;
		color: #636363;
		font-size: 1.1em;
		margin: 0;
	}

	#certify /deep/.swiper-pagination {
		width: 100%;
		bottom: 20px;
	}

	#certify /deep/.swiper-pagination-bullets .swiper-pagination-bullet {
		outline: none;
		margin: 0 5px;
		border: 2px solid #fff;
		background-color: transparent;
		width: 10px;
		height: 10px;
		opacity: 1;
	}

	#certify /deep/.swiper-pagination-bullets .swiper-pagination-bullet-active {
		border: 2px solid #00aadc;
		background-color: transparent;
	}

	#certify .swiper-button-prev {
		left: -30px;
		width: 45px;
		height: 46px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
		outline: none;
	}

	#certify .swiper-button-prev:hover {
		background-position: 0 -46px;
		background-size: 100%;
	}

	#certify .swiper-button-next {
		right: -30px;
		width: 45px;
		height: 46px;
		background-repeat: no-repeat;
		background-position: 0 -93px;
		background-size: 100%;
		outline: none;
	}

	#certify .swiper-button-next:hover {
		background-position: 0 -139px;
		background-size: 100%;
	}
	.btn-box {
		position: absolute;
		right: 0;
		color: #fff;
		top: 50%;
		transform: translateY(-50%);
		line-height: 36px;
		font-size: 15px;
		font-weight: 600;
		text-align: left;
		li {
			padding: 0 30px;
			cursor: pointer;
		}
		li.active {
			background: rgba(255, 255, 255, 0.3);
			border-top-left-radius: 30px;
			border-bottom-left-radius: 30px;
		}
	}
}
</style>