generated from nuxt/nuxt_site
140 lines
4.7 KiB
Vue
140 lines
4.7 KiB
Vue
<template>
|
||
<div class="Carousel-container" :style="styleContainer">
|
||
<!--
|
||
initialSlide：默认选中第几张
|
||
modules：引入模块
|
||
navigation：左右的按钮
|
||
pagination：分页器导航
|
||
autoplay：自动播放
|
||
loop：循环
|
||
swiperStyle：自定义样式
|
||
-->
|
||
<div style="padding-top: 20px;">
|
||
|
||
<swiper id="swiper" ref="swi perRef" :initialSlide="0" :modules="modules" :navigation="{ clickable: true }"
|
||
:pagination="{ clickable: true }" :autoplay="{ delay: 10000 }" :loop="true" :style="swiperStyle"
|
||
class="carousel-box">{{ banner_list }}
|
||
<swiper-slide v-for="item in banner_list">
|
||
<nuxt-link :to="item.banner_link" >
|
||
<div class="carousel-items animate__animated animate__fadeIn animate__slow">
|
||
|
||
<!-- <img alt="" src="img/home/banner2-2.jpg" > -->
|
||
<img alt="" :src="item.banner_img">
|
||
</div>
|
||
</nuxt-link>
|
||
</swiper-slide>
|
||
</swiper>
|
||
|
||
</div>
|
||
|
||
</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 { t, locale } = useI18n()
|
||
|
||
// 获取轮播图列表
|
||
const banner_list = ref([
|
||
{
|
||
// banner_img:`img/home/banner2-2.jpg`,
|
||
},
|
||
])
|
||
const params = reactive({
|
||
page: 1,
|
||
limit: 10
|
||
})
|
||
// await get("/api/banners/getBannerList", params).then(res => {
|
||
// let data = JSON.parse(res.value).data
|
||
// console.log(data);
|
||
// banner_list.value = data
|
||
// })
|
||
const getBannerListFun = async () => {
|
||
useFetch('/api/banner/getBanner', { params: { banner_location: 1, locale: locale.value } }).then(res => {
|
||
banner_list.value = JSON.parse(res.data.value).data
|
||
console.log(banner_list.value, '@@@@banner_list');
|
||
})
|
||
.catch((err) => {
|
||
banner_list.value = [{
|
||
banner_img: `img/home/banner2-2.jpg`,
|
||
banner_img: `img/home/banner2-2.jpg`,
|
||
}]
|
||
// console.log(banner_list.value,'@');
|
||
})
|
||
}
|
||
|
||
setTimeout(() => {
|
||
(async () => {
|
||
await getBannerListFun()
|
||
})()
|
||
})
|
||
// 获取海报
|
||
|
||
|
||
|
||
/**整体轮播图样式*/
|
||
let styleContainer = reactive({
|
||
height: '33vw',
|
||
})
|
||
const modules = ref([Pagination, Navigation, Autoplay])
|
||
const swiperStyle = conversionStyleVal(reactive({
|
||
/**轮播图样式*/
|
||
color: '', //设置字体颜色
|
||
height: '33vw', //设置高度
|
||
width: '100%', //设置高度
|
||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: '', //设置背景颜色
|
||
/**右边按钮样式*/
|
||
buttonNext: {
|
||
color: '#a8232a', //设置字体颜色
|
||
height: '', //设置高度
|
||
width: '', //设置高度
|
||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: '' //设置背景颜色
|
||
},
|
||
/**左边按钮样式*/
|
||
buttonPrev: {
|
||
color: '#a8232a', //设置字体颜色
|
||
height: '', //设置高度
|
||
width: '', //设置高度
|
||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: '' //设置背景颜色
|
||
},
|
||
/**小圆点样式*/
|
||
pagination: {
|
||
color: '#fff', //设置字体颜色
|
||
height: '8px', //设置高度
|
||
width: '8px', //设置高度
|
||
margin: '0 10px ', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: 'rgb(255, 255, 255)' //设置背景颜色
|
||
},
|
||
/**选中的小圆点样式*/
|
||
paginationActive: {
|
||
color: '#a72027', //设置字体颜色
|
||
height: '8px', //设置高度
|
||
width: '8px', //设置高度
|
||
margin: '0 10px', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||
background: '#a72027' //设置背景颜色
|
||
}
|
||
}), 'swiper')
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</script>
|
||
<style scoped src="~/assets/css/Carousel/index.scss"></style>
|
||
<style scoped src="~/assets/css/Carousel/media.scss"></style> |