You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1002 B
49 lines
1002 B
<template>
|
|
<div class="carousel">
|
|
<EffectFade :list="list">
|
|
<template v-slot="{ item }">
|
|
<div class="banner-wrapper">
|
|
<img :src="config.sourceUrl + item" alt="" class="banner" />
|
|
</div>
|
|
</template>
|
|
</EffectFade>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useStore } from '@/store/root'
|
|
import { getTrafficList } from '@/http/api'
|
|
import EffectFade from '../EffectFade/EffectFade.vue'
|
|
|
|
const store = useStore()
|
|
const { config } = storeToRefs(store)
|
|
|
|
const list = ref([])
|
|
getTrafficList().then(({ data }) => {
|
|
list.value = data?.fileList ?? []
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.carousel {
|
|
position: relative;
|
|
width: 870px;
|
|
height: 1300px;
|
|
margin-top: 58px;
|
|
margin-left: 170px;
|
|
margin-right: 40px;
|
|
}
|
|
.banner-wrapper {
|
|
width: 870px;
|
|
height: 1300px;
|
|
overflow: hidden;
|
|
}
|
|
.banner {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|
|
|