feat: video cover

packages/mobile/src/components/VideoCover.vue

@@ -0,0 +1,61 @@
+<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-m.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: 33px;
+    bottom: 58px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 120px;
+    height: 47px;
+    font-size: 24px;
+    color: white;
+    border-radius: 50px;
+    background: #9d222d;
+    overflow: hidden;
+    border: 1px solid #f5dd8c;
+    cursor: pointer;
+    z-index: 1;
+  }
+}
+</style>

packages/mobile/src/views/exhibition/components/Footer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="footer">
-    <div class="footer__btn" @click="goToScene">虚拟展厅</div>
+    <div class="footer__btn" @click="showVideo = true">虚拟展厅</div>
 
     <div class="footer-toolbar">
       <img
@@ -16,18 +16,16 @@
 
   <Search v-model:visible="searchVisible" />
   <Sidebar v-model:visible="sidebarVisible" v-bind="$attrs" />
+  <VideoCover v-if="showVideo" />
 </template>
 
 <script setup>
 import { ref } from "vue";
 import Search from "@/views/search/index.vue";
 import Sidebar from "./Sidebar.vue";
-import { SCENE_URL } from "@syjy/base/utils";
-
-const goToScene = () => {
-  location.href = SCENE_URL;
-};
+import VideoCover from "@/components/VideoCover.vue";
 
+const showVideo = ref(false);
 const searchVisible = ref(false);
 const sidebarVisible = ref(false);
 </script>

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

@@ -6,7 +6,7 @@
       <img src="./images/a1-min.jpg" />
       <p>静态展示</p>
     </div>
-    <div class="cover" @click="goToScene">
+    <div class="cover" @click="showVideo = true">
       <img src="./images/a2-min.jpg" />
       <p>虚拟展厅</p>
     </div>
@@ -24,14 +24,15 @@
 
     <img class="logo2" src="@/assets/images/logo-min.png" />
   </div>
+
+  <VideoCover v-if="showVideo" />
 </template>
 
 <script setup>
-import { SCENE_URL } from "@syjy/base/utils";
+import { ref } from "vue";
+import VideoCover from "@/components/VideoCover.vue";
 
-const goToScene = () => {
-  location.href = SCENE_URL;
-};
+const showVideo = ref(false);
 </script>
 
 <style scoped lang="scss">

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

@@ -232,6 +232,7 @@ import { data } from "@syjy/base";
 import { flattenData } from "@syjy/base/utils";
 import { ElScrollbar, ElTooltip } from "element-plus";
 import { useRoute } from "vue-router";
+import { SCENE_URL } from "@syjy/base/utils";
 // import VideoPopup from "@/components/VideoPopup/index.vue";
 import VideoCover from "@/components/VideoCover/index.vue";