<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>
