Skip to content

N
Neuromorphic
Commit 170070a4 by 제남의
Options

login 페이지 홈으로 변경

parent 8d3d8dae
Showing with 74 additions and 93 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> </div>
<button type="button" @click="$router.push('user')">시작</button> <input type="submit" class="btn" value="LOGIN">
</div> </form>
</div> </div>
</template> </template>
<script> <script>
export default { 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; .container{
background-color: #448ccb; margin: auto;
width: 600px;
height: 600px; width: 500px;
margin-right: 10px; max-width: 90%;
border-radius: 30px; }
box-shadow: 2px 2px 30px #bababa;
.container form{
}
.admin img {
margin-top: 150px;
}
.admin h1 {
font-size: 50px;
color: #fff;
} width: 100%;
height: 100%;
.admin p { padding:20px;
font-size: 30px; background: white;
color: #fff; border-radius: 4px;
box-shadow: 0 8px 16px rgba(0,0,0,.3);
} }
.container button{ .container form h1{
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{
background-color: #fff;
color:#448ccb
}
.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