生成效果

預(yù)覽圖

視頻素材去這個網(wǎng)站下載

https://coverr.co/

首先src/view/Login.vue

<template>
  <div class="login-homepage-hero-module">
    <div class="login-video-container">
      <div :style="fixStyle" class="login-filter">
        <LoginForm></LoginForm>
      </div>
      <video :style="fixStyle" autoplay loop muted class="login-fillWidth"
             v-on:canplay="canplay">
        <source src="../assets/video/bgVideo.mp4" type="video/mp4"/>
      </video>
      <div class="login-poster login-hidden" v-if="!videoCanPlay">
        <img :style="fixStyle" src="../assets/img/bgVideo.png" alt="視頻封面">
      </div>
    </div>
  </div>
</template>
<script>
import LoginForm from "@/views/login/LoginForm";

export default {
  name: "Login",
  components: {
    LoginForm
  },
  data() {
    return {
      videoCanPlay: false,
      fixStyle: ''
    }
  },
  methods: {
    canplay() {
      this.videoCanPlay = 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>
.login-homepage-hero-module,
.login-video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.login-video-container .login-poster img,
.login-video-container video {
  z-index: 0;
  position: absolute;
}

.login-video-container .login-filter {
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
}
</style>

上面主要是視頻背景樣式蛮浑，具體的登錄表單這些我們提取出來

src/view/login/LoginForm.vue

<template>
  <div id="loginBox">
    <div class="loginTitle">登錄</div>
    <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">
      <el-form-item label="用戶名" prop="username" >
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item label="驗(yàn)證碼" prop="code">
        <el-input v-model="loginForm.code" style="width: 320px;float: left"></el-input>
        <el-image
            style="width: 120px; height: 40px;margin-left: 10px;float: left;border-radius: 4px"
            :src="captchaImg"
        ></el-image>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button  type="info" @click="submitForm('loginForm')">立即登錄</el-button>
        <el-button @click="resetForm('loginForm')" type="warning">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "LoginForm",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        code: ''
      },
      rules: {
        username: [
          {required: true, message: '請輸入用戶名', trigger: 'blur'},
          {min: 3, max: 10, message: '長度在 3 到 10 個字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '請輸入密碼', trigger: 'blur'},
          {min: 3, max: 10, message: '長度在 3 到 10 個字符', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '請輸入驗(yàn)證碼', trigger: 'blur'},
          {min: 4, max: 4, message: '長度在 4 個字符', trigger: 'blur'}
        ],
      },
      captchaImg: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped lang="scss">
#loginBox {
  .loginTitle {
    color: white;
    font-size: 27px;
    letter-spacing: 10px;
    text-align: center;
  }
  width: 550px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding:30px 40px 0 10px;
  box-shadow: -15px 15px 20px #000000;
  opacity: 1;
  background: linear-gradient(
          230deg,
          rgba(53, 57, 74, 0) 0%,
          rgb(0, 0, 0) 100%
  );
}
.el-form {
  margin-top: 10px;
}
</style>

再檢查一下全局樣式

html, body, #app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#loginBox .el-form-item__label {
color: white;
}

全局樣式需要在main.js中引入一下

參考文章

https://www.cnblogs.com/anu0823/p/11326162.html

http://www.reibang.com/p/8097bb3d9d49