vue+element 登录注册模板

  <div class="homepage-hero-module">
    <div class="video-container">
      <div :style="fixStyle" class="filter">
        <!--内容-->
      </div>
      <video
        :style="fixStyle"
        autoplay
        loop
        muted
        class="fillWidth"
        @canplay="canplay"
      >
        <source src="../assets/video.mp4" type="video/mp4" />
        浏览器不支持 video 标签，建议升级浏览器。
      </video>
    </div>
    <div class="formBox">
      <img src="../assets/back.png" class="backImg" alt="" @click="Inv = 1" v-if="Inv != 1">
      <div class="title">
        <img src="../assets/logo.png" alt="" class="logo">
      </div>
      <el-form ref="form" :model="form" label-width="60px" v-if="Inv == 1">
        <el-form-item label="账号">
          <el-input v-model="form.name" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.name" placeholder="请输入密码"></el-input>
        </el-form-item>
        <div class="loginbtn" @click="login">登 录</div>
      </el-form>
      <el-form ref="form" :model="form" label-width="60px" v-if="Inv == 2">
        <el-form-item label="手机号">
          <el-input v-model="form.name" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="form.name" placeholder="请输入验证码"></el-input>
          <span class="getCode">获取验证码</span>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.name" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <div class="loginbtn" @click="login">注 册</div>
        <div class="flex">
          <el-checkbox v-model="checked">用户注册协议</el-checkbox>
        </div>
      </el-form>
      <el-form ref="form" :model="form" label-width="70px" v-if="Inv == 3">
        <el-form-item label="手机号">
          <el-input v-model="form.name" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="form.name" placeholder="请输入验证码"></el-input>
          <span class="getCode">获取验证码</span>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="form.name" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="重复密码">
          <el-input v-model="form.name" placeholder="请输入重复密码"></el-input>
        </el-form-item>
        <div class="loginbtn" @click="login">设 置</div>
      </el-form>
      <div class="forget" v-if="Inv == 1">
          <span @click="Inv = 2">注册</span>
          <span @click="Inv = 3">忘记密码？</span>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Inv:1,
      checked: false,
      vedioCanPlay: false,
      fixStyle: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  mounted() {
    this.onResizeHandler();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    canplay() {
      this.vedioCanPlay = true;
    },
    onResizeHandler() {
      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",
          };
        }
      };
    },
    login(){
      this.$router.push({
        path:'/information'
      })
    }
  },
};
</script>

<style lang="scss" 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;
  width: 100%;
}

.fillWidth {
  width: 100%;
}

.formBox {
  width: 500px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px 60px;
  box-sizing: border-box;
  z-index: 3;

  .backImg{
    position: absolute;
    left: 20px;
    top: 20px;
    width: 30px;
    cursor: pointer;
  }

  .getCode{
    position: absolute;
    right: 20px;
    color: #e14343;
    z-index: 100;
    cursor: pointer;
  }
  .title{
    text-align: center;
    font-size: 28px;
    padding: 40px 0;
    .logo{
      width: 130px;
    }
  }

  .loginbtn{
    background:#e14343;
    color: #fff;
    height: 45px;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    width: 50%;
    cursor: pointer;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 3px #bdbdbd;
    
  }

  .flex{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .forget{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #838383;
    font-size: 14px;
    margin-left: 60px;
    cursor: pointer;
  }
}
</style>

里面是用视频做的背景，logo和返回图标和背景代码需要更换地址