62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<template>
|
|
<view style="background: linear-gradient(354deg, #f3fcff, #ffffff);" :style="{minHeight:height}">
|
|
<swiper v-if="banner && banner.length > 0" :indicator-dots="banner.length > 1" :autoplay="false" :interval="interval" :style="{height:height}">
|
|
<swiper-item v-for="(item,index) in banner" :key="item.id">
|
|
<view v-if="isvideo(item.img)">
|
|
<cover-image v-if="vmuted" @tap="vmute" class="_swiper_mute" :style="{opacity: vop}" :src="file_stor('/img/wav2.png')"></cover-image>
|
|
<cover-image v-else @tap="vmute" class="_swiper_mute" :style="{opacity: vop}" :src="file_stor('/img/wav1.png')"></cover-image>
|
|
<video @tap="showop" object-fit="cover" :poster="file_stor(item.img + '.jpg')" :src="file_stor(item.img)" controls autoplay loop show-mute-btn :muted="vmuted" :enable-progress-gesture="false" style="width:100%;height:80vw;"></video>
|
|
</view>
|
|
<image v-else @tap="gourl" :data-url="item.url" :src="file_stor(item.img)" style="width:100%;height:100%;" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
banner: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
height: {
|
|
type: [String, Number],
|
|
default: ''//min-height:80vw;
|
|
},
|
|
interval: {
|
|
type: [String, Number],
|
|
default: '3000'//min-height:80vw;
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
vmuted: false,
|
|
vop: 0.2,
|
|
}
|
|
},
|
|
watch: {
|
|
},
|
|
created() {
|
|
},
|
|
methods: {
|
|
showop() {
|
|
this.vop = 2;
|
|
},
|
|
vmute() {
|
|
this.vmuted = !this.vmuted;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
._swiper_mute {
|
|
position: absolute;
|
|
right: 0.5em;
|
|
top: 0.5em;
|
|
z-index: 100;
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
}
|
|
</style> |