解决footer会遮盖内容的问题

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.6.5",
     "element-ui": "^2.15.8",
     "mavon-editor": "^2.10.4",
+    "mui-player": "^1.6.0",
     "vue": "^2.6.11",
     "vue-router": "3.5.2"
   },

src/App.vue

@@ -21,7 +21,6 @@ html, body, #app{
 	height: 100%;
   width: 100%;
   border: 0;
-
 	font-size: 100%;
   line-height: 1.2;
 	font: inherit;      /* 所有元素字体一致 */

src/assets/css/Footer.css

@@ -1,5 +1,5 @@
 .footer{
-    position: fixed;
+    position: absolute;
     bottom: 0;
     height: 11.3vw;
     width: 100%;

src/assets/css/common.css

@@ -1,5 +1,6 @@
 .content{
     margin: 2vw 6vw;
+
 }
 
 .breadcrumb{

src/components/Video.vue

@@ -0,0 +1,41 @@
+<template>
+  <div id="mui-player" />
+</template>
+
+<script>
+import 'mui-player/dist/mui-player.min.css'
+import MuiPlayer from 'mui-player'
+
+export default {
+  props: {
+    src: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  name: "Video",
+  data() {
+    return {}
+  },
+  mounted() {
+    var mp = new MuiPlayer({
+      container: '#mui-player',
+      title: this.title,
+      src: this.src
+    })
+    // 音量调节时触发
+    mp.on('volume-change', function(e) {
+      mp.video().volume = e.size;
+    });
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/layout/HomeLayout.vue

@@ -1,8 +1,12 @@
 <template>
-  <div>
-    <Header></Header>
-    <router-view></router-view>
+  <div style="position: relative; min-height: 100%">
+    <div style="padding-bottom: 11.3vw">
+      <Header></Header>
+      <router-view></router-view>
+    </div>
     <Footer></Footer>
+
+
   </div>
 </template>
 

src/pages/Home.vue

@@ -1,17 +1,25 @@
 <template>
   <div class="content">
-
+    <Video
+    :title="videoTitle"
+    :src="videoSrc"></Video>
   </div>
 </template>
 
 <script>
 // import 'mavon-editor/dist/css/index.css'
+import Video from "../components/Video";
 
 export default {
   name: "Home",
+  components: {
+    Video
+  },
   data(){
     return{
-      data: ""
+      data: "",
+      videoTitle:"标题",
+      videoSrc:"https://outin-396971199eed11e991a100163e1c7426.oss-cn-shanghai.aliyuncs.com/sv/34277901-180465b8b73/34277901-180465b8b73.mp4"
     }
   }
 }

yarn.lock

@@ -5632,6 +5632,11 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mui-player@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/mui-player/-/mui-player-1.6.0.tgz#8bf130a58faa54fd5b5ad8baf9e95f155c8d684a"
+  integrity sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA==
+
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"