zouma-short/src/components/ProductBanner.vue

<template>
    <div class="detail-top">
        <img src="../assets/png-bg-shangping.png" class="bg-img" alt="" />
        <div class="detail-info">
            <swiper @swiper="setSwiperRef" class="mySwiper" v-if="banners.length > 0">
                <swiper-slide v-for="(item, index) in banners" :key="index">
                    <!-- <img :src="item" /> -->

                    <!-- <div class="video-box" v-if="isVideo(item)">
                        <van-icon color="#fff" size="60" name="play-circle" />
                    </div> -->
                    <van-image
                        @click="preview(index, banners)"
                        :src="item"
                        width="calc(100vw - 134px)"
                        height="calc(100vw - 134px)"
                        fit="cover"
                    />
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'

import 'swiper/swiper.min.css'
import 'swiper/swiper-bundle.min.css'
import { showImagePreview } from 'vant'
import { watch, ref, computed } from 'vue'
import { useWindowSize } from '@vant/use'
export default {
    setup() {
        const { width, height } = useWindowSize()

        let swiperRef = null

        const setSwiperRef = swiper => {
            swiperRef = swiper
        }

        watch([width, height], () => {
            swiperRef.update(true)
        })

        return { swiperRef: null, setSwiperRef }
    },
    props: {
        info: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    components: {
        Swiper,
        SwiperSlide
    },
    computed: {
        banners() {
            return this.info.pic || []
        }
    },
    methods: {
        preview(index = 0, list = []) {
            // showImagePreview({
            //     images: [...list],
            //     closeable: true
            // })
        }
    }
}
</script>

<style lang="less" scoped>
@radius: 30px;
.detail-top {
    position: relative;
    width: 100vw;
    // height: 100vw;
    .detail-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 50px;
    }
    .bg-img {
        display: block;
        width: 100vw;
    }
    .mySwiper {
        border-radius: @radius;
        border: 2px solid var(--ion-text-color);
        padding: 5px;
        overflow: hidden;
        .detail-animate();
        width: calc(100vw - 124px);
        .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            :deep(.van-image) {
                border: 2px solid #2f2f2f;
                border-radius: @radius;
                overflow: hidden;
                background-color: transparent;
            }
        }
    }
}

.share-content {
    display: flex;
    margin-top: 20px;
}
.share-icon {
    img {
        width: 18px;
        height: 18px;
        display: inline-block;
        vertical-align: middle;
    }
    span {
        font-size: 14px;
        color: #949699;
        line-height: 24px;
        vertical-align: middle;
        margin-left: 2px;
    }

    &.shareLeft {
        margin-left: 30px;
    }
}

.video-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--ion-text-color-rgb), 0.5);
    .f();
    justify-content: center;

    .van-icon {
        color: rgba(0, 0, 0, 0.5) !important;
    }
}

.setAvatar {
    .f();
    img {
        width: 18px;
        height: 18px;
        display: block;
    }

    span {
        font-size: 12px;
        color: #949699;
        line-height: 24px;
        margin-left: 3px;
    }
}

@keyframes flipY {
    0% {
        transform: perspective(500px) rotateX(0deg) rotateY(15deg);
    }
    50% {
        transform: perspective(500px) rotateX(0deg) rotateY(-15deg);
    }
    100% {
        transform: perspective(500px) rotateX(0deg) rotateY(15deg);
    }
}
@keyframes flipYLight {
    0% {
        left: -100vw;
        opacity: 0.3;
        width: 25px;
    }
    25% {
        left: 45vw;
        opacity: 0;
        width: 45px;
    }
    50% {
        left: 150vw;
        opacity: 0.3;
        width: 25px;
    }
    75% {
        left: 45vw;
        opacity: 0;
        width: 45px;
    }
    100% {
        left: -100vw;
        opacity: 0.3;
        width: 25px;
    }
}

.detail-animate() {
    animation: flipY 6s ease-in-out infinite;
    position: relative;
    &::after {
        content: '';
        background-color: #fff;
        position: absolute;
        background: #fff;
        width: 25px;
        height: 100vw;
        top: 0;
        left: 45px;
        opacity: 0;
        transform: skewX(-25deg);
        z-index: 2;
        animation: flipYLight 6s ease-in-out infinite;
    }
}
</style>