<template>
  <div class="login">
    <div class="wrapper">
      <form class="form-signin">       
          <h2>관리자 로그인</h2>
          <p>Admin Login</p>
          <input id='pwd' type="password" placeholder="비밀번호를 입력하세요">      
          <button id="button1" @click="$router.push('admin')">LOGIN</button>
          <button id="button2" @click="$router.push('/')">CANCEL</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.login{
    background:#448ccb;
    height: 100vh;
}

.wrapper {
  
    padding-top: 180px;
    padding-bottom: 80px;
}

.form-signin {
    text-align: center;
    max-width: 380px;
    height: 350px;
    /* padding: 100px 35px 45px; */
    margin: 0 auto;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 1px 1px 20px #505050;
}

.form-signin h2{
    margin-top: 20px;
    margin-bottom: 20px;
}

.form-signin p{
    margin-top: 20px;
    margin-bottom: 20px;
}

 #pwd{
    width: 258px;
    height: 30px;
    color: red;
    font-size: 12px;
    margin-top: 80px;
    margin-bottom: 40px;
}

#button1{
    width:258px;
    height: 40px;
    color:#fff;
    background: -webkit-linear-gradient(#2068e3, #519bf7);
    background: -moz-linear-gradient(#2068e3, #519bf7);
    background: -o-linear-gradient(#2068e3, #519bf7);
    background: linear-gradient(#2068e3, #519bf7);
    font-size: 18px;
    text-align: center;
    border:none;
    border-radius: 20px;
    margin-bottom: 20px;
}
#button1:hover{
    box-shadow: 1px 1px 20px #519bf7;
}


#button2 {
    width:258px;
    height: 40px;
    color:#fff;
    background: -webkit-linear-gradient(#646d7c, #939aa4);
    background: -moz-linear-gradient(#646d7c, #939aa4);
    background: -o-linear-gradient(#646d7c, #939aa4);
    background: linear-gradient(#646d7c, #939aa4);
    font-size: 18px;
    text-align: center;
    border:none;
    border-radius: 20px;

}

button#button2:hover {
    box-shadow: 1px 1px 20px #646d7c;
}
</style>