login背景

dsk-srm-server/src/App.vue

 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style lang="scss">
-
+@import url("~@/assets/styles/public.scss");
 </style>

dsk-srm-server/src/assets/styles/public.scss

+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+#app {
+  width: 100%;
+  height: 100%;
+}

dsk-srm-server/src/login.vue

 <template>
-    <div class="main">
-        <div class="video">
-            <video autoplay loop>
-                <source src="@/assets/background.mp4" type="video/mp4">
-            </video>
-        </div>
+  <div class="main">
+    <div class="video">
+      <video autoplay loop class="login-video">
+        <source src="@/assets/background.mp4" type="video/mp4">
+      </video>
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {}
-        },
-        computed: {},
-        mounted() {},
-        methods: {}
-    }
+export default {
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() { },
+  methods: {}
+}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.main {
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  .login-video {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
 
+    source {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>

dsk-srm-server/src/views/AboutView.vue

+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

dsk-srm-server/src/views/HomeView.vue

+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'HomeView',
+  components: {
+    HelloWorld
+  }
+}
+</script>