tianliPc/src/components/swiper/swiper.vue

<template>
	<div class="home-swiper">
		<el-carousel class="imgBox" :autoplay="false" v-if="swiperList">
			<el-carousel-item class="imgList" v-for="(item, index) in swiperList" :key="index"><el-image :src="item" alt="" class="swiper-img" /></el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
export default {
	data() {
		return {
			swiperList: []
		};
	},
	created() {
		this.getSwiperList();
	},
	methods: {
		getSwiperList() {
			let obj = this;
			console.log(obj);
			loadIndexs().then(res => {
				obj.swiperList = res.data.loop.split(',').map(e => {
					return obj.$store.state.www + e;
				});
			});
		}
	}
};
</script>

<style lang="scss">
.imgBox {
	.is-active {
		.el-carousel__button {
			background-color: #0165b5 !important;
		}
	}
}
.home-swiper {
	max-width: 1920px;
	min-width: 1080px;
	position: relative;
	padding-top: 40.37%;
	.imgBox {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		.imgList {
			width: 100%;
			height: 100%;
		}
		.el-carousel__container {
			height: 100%;
		}
	}
	.swiper-img {
		width: 100%;
		height: 100%;
	}
}
</style>