feat: index video

packages/pc/src/views/Index/index.scss

@@ -5,6 +5,39 @@
   overflow: hidden;
   background: url("./images/bg-min.jpg") no-repeat center / cover;
 
+  &-video {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-indent: 0;
+    z-index: 999;
+
+    video {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+    .muted {
+      position: absolute;
+      top: 40px;
+      right: 40px;
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+      z-index: 1;
+    }
+    .skip {
+      position: absolute;
+      right: 40px;
+      bottom: 40px;
+      width: 113px;
+      height: 40px;
+      cursor: pointer;
+      z-index: 1;
+    }
+  }
   &-header {
     position: relative;
     height: utils.vh-calc(60);

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

@@ -1,5 +1,23 @@
 <template>
-  <div class="index">
+  <div v-if="showVideo" class="index-video">
+    <img
+      class="muted"
+      :src="isMuted ? MutedIcon : UnMutedIcon"
+      @click="handleMuted"
+    />
+
+    <video
+      id="bgVideo"
+      autoplay
+      muted
+      src="./index.mp4"
+      @ended="showVideo = false"
+    />
+
+    <img class="skip" src="./images/skip.png" @click="showVideo = false" />
+  </div>
+
+  <div v-else class="index">
     <div class="index-header">
       <ul>
         <li
@@ -23,6 +41,21 @@
   </div>
 </template>
 
+<script setup>
+import { ref } from "vue";
+import MutedIcon from "./images/muted.png";
+import UnMutedIcon from "./images/unmuted.png";
+
+const showVideo = ref(true);
+const isMuted = ref(true);
+
+const handleMuted = () => {
+  const video = document.getElementById("bgVideo");
+  isMuted.value = !isMuted.value;
+  video.muted = isMuted.value;
+};
+</script>
+
 <style lang="scss" scoped>
 @use "./index.scss";
 </style>