88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<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>
|