Skip to content

N
Neuromorphic
Commit 170070a4 by 제남의
Options

login 페이지 홈으로 변경

parent 8d3d8dae
Showing with 64 additions and 83 deletions
front-end/src/views/Home.vue
<template> <template>
<div class="container"> <div class="container">
<div class="admin"> <form action="">
<img src="../assets/img/icon_admin.png" alt="" id="icon_admin"> <h1>LOGIN</h1>
<h1>관리자페이지</h1> <div class="form-group">
<p>Admin page</p> <label for="">ID</label>
<button type="button" @click="$router.push('login')">시작</button> <input type="text" class="form-control" required>
</div> </div>
<div class="user"> <div class="form-group">
<img src="../assets/img/icon_user.png" alt="" id="icon_user"> <label for="">PASSWORD</label>
<h1>사용자페이지</h1> <input type="password" class="form-control" required>
<p>User page</p>
<button type="button" @click="$router.push('user')">시작</button>
</div> </div>
<input type="submit" class="btn" value="LOGIN">
</form>
</div> </div>
</template> </template>
...@@ -20,85 +20,65 @@ export default { ...@@ -20,85 +20,65 @@ export default {
} }
</script> </script>
<style> <style>
.container { @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
display: flex; *{
justify-content: center; margin: 0;
margin-top: 150px; padding: 0;
} box-sizing: border-box;
}
.admin {
display: inline-block;
text-align: center;
background-color: #448ccb;
width: 600px;
height: 600px;
margin-right: 10px;
border-radius: 30px;
box-shadow: 2px 2px 30px #bababa;
} .container{
margin: auto;
.admin img { width: 500px;
margin-top: 150px; max-width: 90%;
} }
.admin h1 {
font-size: 50px;
color: #fff;
} .container form{
.admin p {
font-size: 30px;
color: #fff;
}
.container button{
font-size:16px;
width: 200px;
height: 50px;
border: solid 2px #fff;
border-radius: 8px;
background-color: rgba(0, 0,0, 0);
color: #fff;
padding: 5px;
}
.container button:hover{ width: 100%;
background-color: #fff; height: 100%;
color:#448ccb padding:20px;
background: white;
border-radius: 4px;
box-shadow: 0 8px 16px rgba(0,0,0,.3);
}
} .container form h1{
.user {
display: inline-block;
text-align: center; text-align: center;
background-color: #3cb878; margin-bottom: 24px;
width: 600px; color: #222;
height: 600px; }
margin-left: 10px;
border-radius: 30px; .container form .form-control{
box-shadow: 2px 2px 30px #bababa; width:100%;
height: 40px;
} background: white;
border-radius: 4px;
.user img { border:1px solid silver;
margin-top: 150px; margin: 10px 0 18px 0;
} padding: 0 10px;
}
.user h1 {
font-size: 50px; .container form .btn{
color: #fff; margin-left: 50%;
transform: translateX(-50%);
} width: 120px;
height: 34px;
.user p { border:none;
font-size: 30px; outline: none;
color: #fff; background: skyblue;
cursor: pointer;
} font-size: 16px;
text-transform: uppercase;
color:white;
border-radius: 4px;
transition: .3s;
}
.container form .btn:hover{
opacity: .7;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment