39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<template>
|
|
<swiper class="banner-swiper" :indicator-dots="true" :autoplay="false" circular>
|
|
<swiper-item v-for="(v, idx) in videos" :key="'v' + idx">
|
|
<video class="banner-swiper__video" :src="fullUrl(v)" controls />
|
|
</swiper-item>
|
|
<swiper-item v-for="(img, idx) in images" :key="'i' + idx">
|
|
<image class="banner-swiper__image" :src="fullUrl(img)" mode="aspectFill" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { BASE_URL } from '../utils/request'
|
|
|
|
const props = defineProps<{
|
|
images: string[]
|
|
video?: string | string[]
|
|
}>()
|
|
|
|
const videos = computed(() => {
|
|
if (!props.video) return []
|
|
if (Array.isArray(props.video)) return props.video
|
|
return [props.video]
|
|
})
|
|
|
|
function fullUrl(path: string): string {
|
|
if (!path) return ''
|
|
if (path.startsWith('http')) return path
|
|
return BASE_URL + path
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.banner-swiper { width: 100%; height: 600rpx; }
|
|
.banner-swiper__image { width: 100%; height: 600rpx; }
|
|
.banner-swiper__video { width: 100%; height: 600rpx; }
|
|
</style>
|