feat: 将视频嵌入页面

src/App.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { useRoute } from 'vue-router'
+import VideoView from '@/views/Video/src/VideoView.vue'
+const route = useRoute()
 </script>
 
 <template>
-  <RouterView />
+  <VideoView v-if="route.name === 'User Guide Video'" />
+  <RouterView v-else />
 </template>
 
 <style scoped></style>

src/router/index.ts

@@ -178,7 +178,11 @@ const router = createRouter({
             breadName: 'Modify Booking',
             activeMenu: '/destination-delivery'
           }
-        }
+        }, {
+          path: '/user-guide-video',
+          name: 'User Guide Video',
+          component: () => import('../views/Video'),
+        },
       ]
     }
   ]

src/views/Video/index.ts

@@ -0,0 +1 @@
+export { default } from './src/VideoView.vue'

src/views/Video/src/VideoView.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="video-view">
+    <video controls style="width: calc(100% - 20px); height: 100%">
+      <source src="/videos/user-guide-video.mp4" type="video/mp4" />
+    </video>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.video-view {
+  width: 100%;
+  height: 100%;
+  padding: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #000;
+}
+</style>