指引

src/main.ts

@@ -14,4 +14,5 @@ app.use(Icon);
 app.use(Button);
 app.use(Swipe);
 app.use(SwipeItem);
+
 app.use(router).mount("#app");

src/views/Guide/Index/components/VideoDialog/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="video-dialog df ai-c jc-c" v-if="dialogVisible">
+    <span class="close" style="color: #fff;" @click="dialogVisible = false"
+      >关闭</span
+    >
+    <video class="player" controls autoplay>
+      <source
+        src="https://www.runoob.com/try/demo_source/movie.ogg"
+        type="video/ogg"
+      />
+      <object data="movie.mp4" width="320" height="240">
+        <embed
+          width="320"
+          height="240"
+          src="https://www.runoob.com/try/demo_source/intro.swf"
+        />
+      </object>
+    </video>
+    <div class="player"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref, watch, onMounted } from "vue";
+export default defineComponent({
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, content) {
+    const player = ref();
+
+    const dialogVisible = computed({
+      get: () => props.visible,
+      set: val => {
+        content.emit("update:visible", val);
+      }
+    });
+    watch(dialogVisible, value => {
+      if (value) document.body.setAttribute("class", "hidden");
+      else document.body.removeAttribute("class");
+    });
+
+    onMounted(() => {
+      console.log(player);
+    });
+    return { dialogVisible, player };
+  }
+});
+</script>
+<style>
+.hidden {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 998;
+  overflow: hidden;
+}
+</style>
+<style lang="scss" scoped>
+.video-dialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 999;
+  background: rgba($color: #000000, $alpha: 0.3);
+  .close {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    z-index: 99;
+  }
+  .player {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+  }
+}
+</style>

src/views/Guide/Index/index.vue

@@ -131,6 +131,7 @@
           class="item df jc-sb ai-c pl16 pr16 pt16 pb16 pointer mt16"
           v-for="item in gameLinks"
           :key="item.image"
+          @click="videoVisible = true"
         >
           <div class=" df ai-c">
             <img class="image" :src="item.image" :alt="item.alt" />
@@ -140,12 +141,15 @@
         </li>
       </ul>
     </div>
+    <VideoDialog v-model:visible="videoVisible" />
   </div>
 </template>
 <script lang="ts">
 import { defineComponent, ref, reactive } from "vue";
 import { useRouter } from "vue-router";
+import VideoDialog from "./components/VideoDialog/index.vue";
 export default defineComponent({
+  components: { VideoDialog },
   setup() {
     const router = useRouter();
     const active = ref(0);
@@ -205,6 +209,7 @@ export default defineComponent({
         title: "盖房子 操作教程"
       }
     ]);
+    const videoVisible = ref(false);
 
     const $_change = (index: number) => {
       active.value = index;
@@ -214,7 +219,13 @@ export default defineComponent({
       router.push(path);
     };
 
-    return { active, change: $_change, gameLinks, navigate: $_navigate };
+    return {
+      active,
+      change: $_change,
+      gameLinks,
+      navigate: $_navigate,
+      videoVisible
+    };
   }
 });
 </script>