Skip to content

S
sup-server
Commit ca6ce659 authored by huangjie's avatar huangjie
Browse files
Options

视频

parent 075028ec
Show whitespace changes
Inline Side-by-side
Showing with 27 additions and 5 deletions
dsk-srm-server/public/index.html
View file @ ca6ce659
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body style="margin: 0">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
......
dsk-srm-server/src/login.vue
View file @ ca6ce659
<template> <template>
<div class="main"> <div class="main">
<div class="video"> <div class="video">
<video autoplay loop> <video autoplay loop muted class="homeVideo" :style="{width:widths,height:heights}">
<source src="@/assets/background.mp4" type="video/mp4"> <source src="@/assets/background.mp4" type="video/mp4">
</video> </video>
</div> </div>
...@@ -11,14 +11,36 @@ ...@@ -11,14 +11,36 @@
<script> <script>
export default { export default {
data() { data() {
return {} return {
widths: '',
heights:'',
}
}, },
computed: {}, computed: {},
mounted() {}, mounted() {
this.widths = document.documentElement.clientWidth+'px'
this.heights = document.documentElement.clientHeight+'px'
console.log(this.widths)
},
methods: {} methods: {}
} }
</script> </script>
<style scoped> <style scoped>
.home-video {
z-index: 100;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
object-fit: fill;/*这里是关键*/
width: auto;
height: auto;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
/*background: url(../video/cover.jpg) no-repeat;*/
background-size: cover;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment