<template >
<div class="box">
<!-- <span @click="onDownload">报名表下载</span> -->
<div class="swiper-container swiper1" style="height: 650px">
<div class="swiper-wrapper">
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!--
<div class="swiper-button-prev"></div> -->
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<!-- <div class="swiper-button-next"></div> -->
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
</div>
</template>
<script>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import * as api from '../../service/api'
import * as utile from '../../common/utile/export'
import {FIELD} from './field.js';
import Swiper,{Autoplay,EffectCoverflow,EffectCube,Pagination,Navigation,EffectCreative,coverflowEffect} from 'swiper';
import "swiper/swiper-bundle.min.css";
// swiper.less/sass/css 决定了基础的样式
import "swiper/swiper.min.css";
Swiper.use([
Autoplay,EffectCoverflow,EffectCube,Pagination, EffectCreative,Navigation,coverflowEffect
])
export default {
name: 'download',
onMounted(){
},
setup () {
console.log(ref, reactive, computed, watch, onMounted, api)
const activeNames = reactive([])
let onDownload = () => {
api.gethotList().then(res => {
console.log('列表返回数据', res)
utile.doExportDataCSV(res.shopList,FIELD, '报名表')
})
}
onMounted(() => {
new Swiper(".swiper1", {
// pagination: {
// el: ".swiper-pagination",
// },
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// hideOnClick: true,
// },
// autoplay: {
// delay: 3000,
// stopOnLastSlide: false,
// disableOnInteraction: false,
// },
// on: {
// navigationShow: function () {
// console.log("按钮显示了");
// },
// effect: "coverflow", //默认就是slide位移,fade淡入淡出,cube3d方块,coverflow 3d流
// },
// speed: 500, //切换过渡速度
// effect:'coverflow',
// centeredSlides:true,
// slideShadows:true,
// coverflowEffect: {
// rotate: 0,
// stretch: 0, // 指的时后面一张图片被前一张图片遮挡的部分
// depth: 100, // 图片缩小的部分
// modifier: 2
// },
// notNextTick:true,
// slidesPerView:4,
// loop:true,
// initialSlide:1,
// direction:"horizontal",
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
})
return {
onDownload,
activeNames
}
},
}
</script>
<style scoped lang="less">
.box {
text-align: left;
margin-top: 20px;
span {
padding: 20px;
text-decoration: underline;
color: blue;
font-size: 20px;
}
}
</style>
<style lang="less">
.swiper-wrapper{
.swiper-slide{
width:150px;
height:100px;
margin-left:10px;
border: 1px solid red;
img{
width:150px;
height:100px;
}
}
}
</style>
