vue套用原生html代码，环境出错，未完全解决

在vue中套用html页面做首页，别人的比较精美，但是相同的代码在hbuix上能运行，但是vue中出现错误

<style>
        body {
            margin: 0;
            padding: 0;
        }

        video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -9999;
            /*在webkit内个出黑白效果*/
            /*-webkit-filter:grayscale(100%);*/
        }

        p {
            font-family:"幼圆","宋体";
            text-align: center;
            color: white;
            font-size: 100px;
            vertical-align: middle;
            /*overflow: hidden;*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        span{
            font-size: 120px;
        }
        .test{
            width: 100px;
            height: 100px;
            background-color:rebeccapurple
        }
         * {
                    margin: 0;
                    padding: 0;
                }
                html {
                    height: 100%;
                }
                body {
                    height: 100%;
                }
                .container {
                    height: 100%;
                  
                }
                .login-wrapper {
                      background-color: rgba(255, 255, 255, 0.5);  
                    width: 260px;
                    height: 480px;
                    border-radius: 15px;
                    padding: 0 50px;
                    position: relative;
                    left: 50%;
                    top: 300px;
                    transform: translate(-50%,-50%);
                }
                .header {
                    font-size: 38px;
                    font-weight: bold;
                    text-align: center;
                    line-height: 200px;
                }
                .input-item {
                    display: block;
                    width: 100%;
                    margin-bottom: 20px;
                    border: 0;
                    padding: 10px;
                    border-bottom: 1px solid rgb(128,125,125);
                    font-size: 15px;
                    outline: none;
                }
                .input-item::placeholder {
                    text-transform: uppercase;
                }
                .btn {
                    text-align: center;
                    padding: 10px;
                    width: 100%;
                    margin-top: 10px;
                    background-image: linear-gradient(to right,#a6c1ee, #fbc2eb);
                    color: #fff;
                }
                .msg {
                    text-align: center;
                    line-height: 88px;
                }
                a {
                    text-decoration-line: none;
                    color: #1b25ee;
                }
               .form-wrapper{   
                  
                    position: relative;  
                     left: -13px;  
               }
               .ale{
                   height: 100%;
                   width: 100%;
               }
    </style>



<template>
<div class="ale">
   <div class="container">
           <div class="login-wrapper">
               <div class="header">Login</div>
               <div class="form-wrapper">
                   <input type="text" name="username" placeholder="请输入账号" class="input-item">
                   <input type="password" name="password" placeholder="请输入密码" class="input-item">
                   <div class="btn">Login</div>
               </div>
               <div class="msg">
                   Don't have account?
                   <a href="#">Sign up</a>
               </div>
           </div>
    </div>  
    <video autoplay muted loop>
    <source src="@/views/video/video.mp4" type="video/mp4">
    </video>
  </div>
</template>




<script>


/* eslint-disable */
/* eslint-disable */
</script>

错误地方为 .login-wrapper class选择器中的  left: 50%;
                    top: 50%;

中top：50%不运行，或许是被什么顶了（但是不在vue中运行就没问题）

解决办法：，改成px就好了