131 lines
4.3 KiB
Vue
131 lines
4.3 KiB
Vue
<template>
|
||
<div class="Carousel-container" :style="styleContainer">
|
||
<!--
|
||
initialSlide：默认选中第几张
|
||
modules：引入模块
|
||
navigation：左右的按钮
|
||
pagination：分页器导航
|
||
autoplay：自动播放
|
||
loop：循环
|
||
swiperStyle：自定义样式
|
||
-->
|
||
|
||
<swiper id="swiper" ref="swiperRef"
|
||
:initialSlide="0"
|
||
:modules="modules"
|
||
:navigation="{ clickable: true }"
|
||
:pagination="{ clickable: true }"
|
||
:autoplay="{delay: 10000}"
|
||
:loop="true"
|
||
:style="swiperStyle"
|
||
class="carousel-box"
|
||
>
|
||
<swiper-slide v-for="item in banner_list">
|
||
<div class="carousel-items animate__animated animate__fadeIn animate__slow">
|
||
<img alt="" :src="item.banner_img">
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 引入模块
|
||
import { Pagination, Navigation, Autoplay } from 'swiper'
|
||
// noinspection ES6CheckImport
|
||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
||
import 'swiper/css'
|
||
import 'swiper/css/pagination'
|
||
import 'swiper/css/navigation'
|
||
|
||
// 获取轮播图列表
|
||
const banner_list = ref([
|
||
{
|
||
banner_img:`/img/home/10012.jpg`,
|
||
},
|
||
{
|
||
banner_img:`/img/home/10013.jpg`,
|
||
},
|
||
])
|
||
const params = reactive({
|
||
page: 1,
|
||
limit: 10
|
||
})
|
||
// const getBannerListFun = async () => {
|
||
// await get("/Banner.Banner/getBannerList", params).then(res => {
|
||
// let data = JSON.parse(res.value).data
|
||
// banner_list.value = data
|
||
// }).catch((err) => {
|
||
// })
|
||
// }
|
||
//
|
||
// setTimeout(() => {
|
||
// (async () => {
|
||
// await getBannerListFun()
|
||
// })()
|
||
// })
|
||
// 获取海报
|
||
useFetch('/api/banner/getBanner',{ params: { banner_location: 1 } }).then(res => {
|
||
banner_list.value = JSON.parse(res.data.value).data
|
||
})
|
||
|
||
|
||
/**整体轮播图样式*/
|
||
let styleContainer = reactive({
|
||
height: '46vw',
|
||
})
|
||
const modules = ref([Pagination, Navigation, Autoplay])
|
||
const swiperStyle = conversionStyleVal(reactive({
|
||
/**轮播图样式*/
|
||
color: '', //设置字体颜色
|
||
height: '46vw', //设置高度
|
||
width: '100%', //设置高度
|
||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: '', //设置背景颜色
|
||
/**右边按钮样式*/
|
||
buttonNext: {
|
||
color: 'rgb(255, 255, 255,0.5)', //设置字体颜色
|
||
height: '', //设置高度
|
||
width: '', //设置高度
|
||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: '' //设置背景颜色
|
||
},
|
||
/**左边按钮样式*/
|
||
buttonPrev: {
|
||
color: 'rgb(255, 255, 255,0.5)', //设置字体颜色
|
||
height: '', //设置高度
|
||
width: '', //设置高度
|
||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: '' //设置背景颜色
|
||
},
|
||
/**小圆点样式*/
|
||
pagination: {
|
||
color: '', //设置字体颜色
|
||
height: '8px', //设置高度
|
||
width: '8px', //设置高度
|
||
margin: '0 10px ', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: 'rgb(255, 255, 255)' //设置背景颜色
|
||
},
|
||
/**选中的小圆点样式*/
|
||
paginationActive: {
|
||
color: '', //设置字体颜色
|
||
height: '8px', //设置高度
|
||
width: '8px', //设置高度
|
||
margin: '0 10px', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: 'rgb(255, 255, 255)' //设置背景颜色
|
||
}
|
||
}), 'swiper')
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</script>
|
||
<style scoped src="~/assets/css/Carousel/index.scss"></style>
|
||
<style scoped src="~/assets/css/Carousel/media.scss"></style> |