不多说,copy即可
rc.mp4:
链接:https://pan.baidu.com/s/1ku_-GbDkVYZCrAlhsY1obg
提取码:shgp
<template>
<div style="text-align: center">
<div class="homepage-hero-module">
<div class="video-container">
<div :style="fixStyle" class="filter" >
<div class="box" >
<!--此处填写代码-->
<el-form style="margin-top: 25%">
<el-form-item >
<el-input class="in1" v-model="user.username" prefix-icon="el-icon-user-solid" placeholder="请输入姓名" size="large"></el-input>
</el-form-item>
<el-form-item >
<el-input class="in2" v-model="user.password" prefix-icon="el-icon-hot-water" placeholder="请输入密码" size="large" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="login" round>登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
<!--此处为视频,注意修改路径,也可放到video目录下-->
<video :style="fixStyle" autoplay loop muted class="fillWidth" v-on:canplay="canplay">
<source src="../../video/rc.mp4" type="video/mp4"/>
<source src="../../video/rc.mp4" type="video/webm"/>
</video>
</div>
</div>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
vedioCanPlay: false,
fixStyle: '',
user:{
username:"",
password:""
}
}
},
methods: {
login(){
//此处做登录处理
},
canplay() {
this.vedioCanPlay = true
}
},
mounted: function() { //屏幕自适应
window.onresize = () => {
const windowWidth = document.body.clientWidth
const windowHeight = document.body.clientHeight
const windowAspectRatio = windowHeight / windowWidth
let videoWidth
let videoHeight
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth
videoHeight = videoWidth * 0.5625
this.fixStyle = {
height: windowWidth * 0.5625 + 'px',
width: windowWidth + 'px',
'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
'margin-left': 'initial'
}
} else {
videoHeight = windowHeight
videoWidth = videoHeight / 0.5625
this.fixStyle = {
height: windowHeight + 'px',
width: windowHeight / 0.5625 + 'px',
'margin-left': (windowWidth - videoWidth) / 2 + 'px',
'margin-bottom': 'initial'
}
}
}
window.onresize()
}
}
</script>
<style scoped>
.homepage-hero-module,
.video-container {
position: relative;
height: 100vh;
overflow: hidden;
}
.video-container .poster img{
z-index: 0;
position: absolute;
}
.video-container .filter {
z-index: 1;
position: absolute;
background: rgba(0, 0, 0, 0);
text-align: center;
width: 100%;
}
.fillWidth {
width: 200%;
}
.box{
position: absolute;
text-align: center;
z-index: 100;
width: 100%;
height: 100%;
}
.in1{ /*s2是我的输入框class*/
margin-top: 30px; /*调整边距*/
width: 380px; /*调整整个组件的宽度*/
}
.in1>>>.el-input__inner{ /*或者 .s2>>>.el-input__inner */
background:rgba(0,0,0,0.2); /*调整inner的背景色,透明*/
height: 44px; /*调整inner的高度*/
border-radius: 22px; /*输入框圆角值*/
border-color: azure;
}
.in2{ /*s2是我的输入框class*/
margin-top:10px; /*调整边距*/
width: 380px; /*调整整个组件的宽度*/
}
.in2>>>.el-input__inner{ /*或者 .s2>>>.el-input__inner */
background:rgba(0,0,0,0.2); /*调整inner的背景色,透明*/
height: 44px; /*调整inner的高度*/
border-radius: 22px; /*输入框圆角值*/
border-color: azure;
}
.el-button{
width: 200px;
}
</style>