|
@@ -1,50 +1,61 @@
|
|
|
<template>
|
|
|
<div class="home-swiper">
|
|
|
- <el-carousel height="484px" :interval="4000" v-if="swiperList">
|
|
|
- <el-carousel-item v-for="(item, index) in swiperList" :key="index"><el-image :src="item" alt="" class="swiper-img" /></el-carousel-item>
|
|
|
+ <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';
|
|
|
+import { loadIndexs } from '@/api/index.js';
|
|
|
export default {
|
|
|
- data(){
|
|
|
+ data() {
|
|
|
return {
|
|
|
- swiperList:[]
|
|
|
- }
|
|
|
+ swiperList: []
|
|
|
+ };
|
|
|
},
|
|
|
created() {
|
|
|
- this.getSwiperList()
|
|
|
+ this.getSwiperList();
|
|
|
},
|
|
|
- methods:{
|
|
|
+ methods: {
|
|
|
getSwiperList() {
|
|
|
- let obj = this
|
|
|
+ let obj = this;
|
|
|
+ console.log(obj);
|
|
|
loadIndexs().then(res => {
|
|
|
- let list = res.data.list.map( item => {
|
|
|
- return item.image_input[0]
|
|
|
- })
|
|
|
- obj.swiperList= list
|
|
|
- })
|
|
|
- },
|
|
|
+ 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;
|
|
|
- height: 484px;
|
|
|
- // background: pink;
|
|
|
- margin: -20px auto 24px;
|
|
|
- el-carousel {
|
|
|
- max-width: 1920px;
|
|
|
- min-width: 1200px;
|
|
|
- el-carousel-item {
|
|
|
- max-width: 1920px;
|
|
|
- min-width: 1200px;
|
|
|
- height: 484px;
|
|
|
+ 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 {
|