背景图片整屏平铺

第一种css

body{
      background:url(./login_01.jpg)  no-repeat center center;
      background-size:cover;
      background-attachment:fixed;
      background-color:#CCCCCC;
    }

第二种js

<template>
    <el-row>
        <el-col :span="24">
            <div ref='changeH' class="container">
              <div class="login-info">
                    <span class="login"></span>
                     <Login></Login>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { Row, Col } from "element-ui";
import Login from './login/Login.vue'
export default {
  data() {
    return {
      cHeight: 0
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.initHeight();
  },
  watch: {
    cHeight: function() {
      this.changeHeight(this.cHeight);
    }
  },
  methods: {
    changeHeight(h) {
      this.$refs.changeH.style.height = h + "px";
    },
    initHeight() {
      this.cHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      window.onresize = () => {
        this.cHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      };
    }
  },
  components: {
    Row,
    Col,
    Login
  }
};
</script>

<style scoped lang="scss" rel="stylesheet/sass">
.container{
  min-width: 1200px;
  background: url("./login_01.jpg") no-repeat center;
  background-size: 100% 100%;
}
@media screen and (min-width: 600px) {
   .login-info{
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    padding:60px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-281px;
    margin-top:-219px;
    width: 400px;
      .login{
      margin-bottom: 50px;
      width:160px;
      height:35px;
      display:inline-block;
      background:url('./logo_03.png');
      background-size:100% 100%;
      }
  }
} 
@media screen and (min-width: 1920px) {
   .login-info{
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    padding:80px 120px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-496px;
    margin-top:-239px;
    width: 752px;
    height:358px;
      .login{
      margin-bottom: 80px;
      width:160px;
      height:35px;
      display:inline-block;
      background:url('./logo_03.png');
      background-size:100% 100%;
      }
  }
    
}
a {
  outline: none !important;
}
</style>

第三种vh

html,body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-size: cover;
}