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
}
},
}
.box {
text-align: left;
margin-top: 20px;
span {
padding: 20px;
text-decoration: underline;
color: blue;
font-size: 20px;
}
}
.swiper-wrapper{
.swiper-slide{
width:150px;
height:100px;
margin-left:10px;
border: 1px solid red;
img{
width:150px;
height:100px;
}
}
}