feat: video cover

packages/pc/src/components/VideoCover/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="video-cover">
+    <video
+      :src="StartVideo"
+      :autoplay="true"
+      :muted="true"
+      x5-playsinline="true"
+      playsinline="true"
+      webkit-playsinline="true"
+      x-webkit-airplay="true"
+      x5-video-player-type="h5-page"
+      @ended="goToScene"
+    />
+
+    <div class="video-cover__btn" @click="goToScene">跳过</div>
+  </div>
+</template>
+
+<script setup>
+import { SCENE_URL } from "@syjy/base/utils";
+import StartVideo from "@syjy/base/videos/start.mp4";
+
+const goToScene = () => {
+  location.href = SCENE_URL;
+};
+</script>
+
+<style lang="scss" scoped>
+.video-cover {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  &__btn {
+    position: absolute;
+    right: 34px;
+    bottom: 39px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 36px;
+    font-size: 18px;
+    color: white;
+    border-radius: 50px;
+    overflow: hidden;
+    border: 1px solid #f5dd8c;
+    cursor: pointer;
+    z-index: 1;
+  }
+}
+</style>

packages/pc/src/views/exhibition/index.vue

@@ -60,7 +60,7 @@
             <img
               draggable="false"
               src="@/assets/images/icon-quanjing-min.png"
-              @click="goToScene"
+              @click="showVideo = true"
             />
           </div>
         </div>
@@ -223,18 +223,20 @@
     :url="checkedPoint?.target"
     :title="checkedPoint?.name"
   /> -->
+  <VideoCover v-if="showVideo" />
 </template>
 
 <script setup>
 import { ref, computed, watch } from "vue";
 import { data } from "@syjy/base";
 import { flattenData } from "@syjy/base/utils";
-import { SCENE_URL } from "@syjy/base/utils";
 import { ElScrollbar, ElTooltip } from "element-plus";
 import { useRoute } from "vue-router";
 // import VideoPopup from "@/components/VideoPopup/index.vue";
+import VideoCover from "@/components/VideoCover/index.vue";
 
 const route = useRoute();
+const showVideo = ref(false);
 const activeMenu = ref(0);
 const activeSecondMenu = ref(0);
 const activeThirdMenu = ref(0);
@@ -297,10 +299,6 @@ const point = computed(() => {
   return null;
 });
 
-const goToScene = () => {
-  location.href = SCENE_URL;
-};
-
 watch(list, (v) => {
   const stack = [];
   for (let i = 0; i < v.length; i++) {

packages/pc/src/views/home/index.vue

@@ -37,21 +37,22 @@
           <img src="./images/1-min.jpg" draggable="false" />
           <p>静态展示</p>
         </div>
-        <div class="home-main__inner-item" @click="goToScene">
+        <div class="home-main__inner-item" @click="showVideo = true">
           <img src="./images/2-min.jpg" draggable="false" />
           <p>虚拟展厅</p>
         </div>
       </div>
     </div>
   </div>
+
+  <VideoCover v-if="showVideo" />
 </template>
 
 <script setup>
-import { SCENE_URL } from "@syjy/base/utils";
+import { ref } from "vue";
+import VideoCover from "@/components/VideoCover/index.vue";
 
-const goToScene = () => {
-  location.href = SCENE_URL;
-};
+const showVideo = ref(false);
 </script>
 
 <style lang="scss" scoped>