<script setup>
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
import { onMounted, reactive } from "vue"
import videoSrc from "@/static/video-1.mp4"
component: {
    videoPlay
}

const options = reactive({
    id: 'vvv',
    width: '100%',
    height: '200px',
    src: videoSrc,
    control: true
})

const onplay = () => {
    console.log('播放一下视频')
}

onMounted(() => {
    window.scrollTo(0, 0)
})
</script>

<template>
    <main>
        <div class="indexCont">
            <div class="sprayTop">
                <img class="sprayTop-img" src="@/static/mobile/teamImg01.png" alt="" />
                <img class="sprayTop-arrow" src="@/static/mobile/secretImg08.png" alt="" />
            </div>
            <img class="indexCont-img" src="@/static/mobile/teamImg02.png" alt="" />
            <img class="indexCont-img" src="@/static/mobile/teamImg03.png" alt="" />
            <img class="indexCont-img" src="@/static/mobile/teamImg04.png" alt="" />
            <img class="indexCont-img" src="@/static/mobile/teamImg05.png" alt="" />
        </div>
    </main>
</template>

<style scoped>
.indexCont {
    width: 100%;
    margin-top: 60px;
}

.indexCont-img {
    width: 100%;
    display: block;
}

.sprayTop {
    position: relative;
    width: 100%;
    padding-top: 61%;
}

.sprayTop-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.sprayTop-arrow {
    width: 20px;
    position: absolute;
    left: calc(50% - 10px);
    bottom: 2%;
    animation: bounce-down 2s linear infinite;
}

@keyframes bounce-down {
    25% {
        transform: translateY(-2px);
    }
    50%,
    100% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(2px);
    }
}
</style>
