<template>
    <div class="bg">
        <div class="center">
       <div class="welcome">
           <img src="../assets/images/pt1.png" alt="">
       </div>
       <div class="box1">
           <div class="input1" ><input placeholder="用户名"/></div>
           <div class="input2"><input placeholder="密码"/></div>
           <el-checkbox class="checkbox1">记住密码</el-checkbox>
           <router-link class="login" to="./home">登 录</router-link>


            <p>
           <span>还没有账号?<a>立即注册</a></span>
       </p>
       </div>
       </div>
       
      
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    methods:{
        
    }
   
}
</script>
<style scoped>
a {
    text-decoration: none;
}
.bg {
     position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            min-width: 800px;
            z-index: -10;
            zoom: 1;
            background: url(../assets/images/bg1.png) no-repeat center 0;
            background-color: #fff;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
             background-position: center 0; 
    
}
.center {
    width: 434.5px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.welcome {
    width: 286px;
    height: 30.5px;
    position: absolute;
    top: 90px;
    left:60px;
}
.box1 {
    width: 434.5px;
    height: 369px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background:url(../assets/images/2.png);
    color: #5D5D5D;
}
.input1,.input2 {
    position: relative;
    box-sizing: border-box;
    width: 368.5px;
    height: 47px;
    background-color: #fff;
    position: absolute;
    left: 33px;
    line-height: 47px;
    padding-left: 54.5px;
    font-size: 15px;
    overflow: hidden;
}
.input1 {
    top: 54.5px;
}
.input1::before {
    position:absolute;
    top: 12.5px;
    left: 19.5px;
    content: "";
    width: 24.95px;
    height: 22px;
    background:url(../assets/images/User.png);
}
.input2 {
    top: 123px;
}
.input2::before {
     position:absolute;
    top: 12.5px;
    left: 19.5px;
    content: "";
    width: 24.95px;
    height: 22px; 
    background:url(../assets/images/Key.png);
}
.checkbox1 {
    position: absolute;
    top: 200px;
    left: 32.5px;
}
.login {
    position: absolute;
    top: 253px;
    left: 33px;
    display: block;
    width: 369.5px;
    height: 52.5px;
    background-color:#529BFF;
    text-align: center;
    line-height: 52.5px;
    font-size: 20px;
    color: #fff;

}
.box1 p {
    position: absolute;
    bottom: 20px;
    left: 31px;
    font-size: 14px;

}
.box1 p a {
    color: rgb(0, 153, 255)
}
.input2 input,.input1 input {
    width: 100%;
    height: 45px;
    border: none;
    outline: none;
}
</style>
