|
|
@@ -0,0 +1,105 @@
|
|
|
+<template>
|
|
|
+ <Teleport to="body">
|
|
|
+ <view class="video-viewer" v-if="isShowVideo">
|
|
|
+ <video :playsinline="isMo"
|
|
|
+ :src="isMo ? 'https://eurs3.4dkankan.com/showcase/hklongxiang/video/opening-new.mp4' : 'https://eurs3.4dkankan.com/showcase/hklongxiang/video/opening-new.mp4'"
|
|
|
+ muted autoplay @play="onVideoPlaying" @end="onVideoEnd">
|
|
|
+ </video>
|
|
|
+ <div v-if="showStepper" class="step-in" @click="closeVideo"> 跳過</div>
|
|
|
+ <div class="mo_b"></div>
|
|
|
+ </view>
|
|
|
+ </Teleport>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted, inject } from 'vue';
|
|
|
+const isShowVideo = ref(true);
|
|
|
+const showStepper = ref(false);
|
|
|
+const isMo = inject("isMo");
|
|
|
+var showTimer;
|
|
|
+const emits = defineEmits(['done']);
|
|
|
+
|
|
|
+const closeVideo = () => {
|
|
|
+ isShowVideo.value = false
|
|
|
+ emits('done')
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+
|
|
|
+})
|
|
|
+const onVideoPlaying = () => {
|
|
|
+
|
|
|
+ showTimer && clearTimeout(showTimer);
|
|
|
+ showTimer = setTimeout(() => {
|
|
|
+ showStepper.value = true
|
|
|
+ }, 3000);
|
|
|
+
|
|
|
+}
|
|
|
+const onVideoEnd = () => {
|
|
|
+ emits('done')
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.video-viewer {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .step-in {
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 30px;
|
|
|
+ padding: 10px 30px;
|
|
|
+ border-radius: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ object-fit: fill;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.isMo {
|
|
|
+ .video-viewer {
|
|
|
+ .mo_b {
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ filter: blur(2px);
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ display: block;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ video {
|
|
|
+ object-fit: scale-down;
|
|
|
+ z-index: 1001;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-in {
|
|
|
+ bottom: 80px;
|
|
|
+ top: initial;
|
|
|
+ color: white;
|
|
|
+ background: rgba(0, 0, 0, 1);
|
|
|
+ transform: translateX(-50%);
|
|
|
+ left: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ position: fixed;
|
|
|
+ padding: 10px;
|
|
|
+ width: 60px;
|
|
|
+ z-index: 10000;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
gemercheung
