File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="login-page">
<div class="login-wrap flex-column justify-center align-center">
<div class="login-content">
<div class="logo">
<!-- <img src="../../../resources/img/logo.png" alt="" /> -->
</div>
<div class="login-zone">
<div class="input-wrap">
<div class="inputContainer">
<input required="" class="customInput" type="text" v-model="member.userId" v-on:keyup.enter="login" >
<label class="inputLabel">ID</label>
<div class="inputUnderline"></div>
</div>
<div class="inputContainer">
<input required="" class="customInput" type="password" v-model="member.userPassword" v-on:keyup.enter="login">
<label class="inputLabel">PASSWORD</label>
<div class="inputUnderline"></div>
</div>
</div>
<div class="found-zone flex justify-center">
<router-link to="">아이디찾기</router-link>
<router-link to="">비밀번호 찾기</router-link>
<router-link to="/register.page">회원가입</router-link>
</div>
</div>
<button class="blue-btn large-btn" @click="login">로그인</button>
</div>
</div>
</div>
</template>
<script>
// import axios from 'axios';
// import { useStore } from 'vuex';
// import store from '../AppStore'
export default {
data() {
return {
}
},
methods: {
},
watch: {
},
computed: {
},
mounted() {
}
}
</script>
<style scoped>
.login-page {
width: 100%;
height: 100%;
}
.login-content {
min-width: 400px;
max-width: 400px;
padding: 30px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 20px #ddd;
}
.logo {
width: 200px;
/* height: 50px; */
margin: 0 auto;
margin-bottom: 50px;
}
.logo>img {
display: block;
height: 100%;
margin: auto;
}
.inputContainer {
position: relative;
margin-bottom: 40px;
}
.inputContainer:last-child{
margin-bottom: 0;
}
.customInput {
width: 100%;
padding: 10px;
font-size: 13px;
background-color: transparent;
border: none;
outline: none;
transition: border-color 0.3s ease;
}
.inputLabel {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
padding: 5px;
font-size: 13px;
color: #eee;
transform: translateY(-80%);
}
.inputUnderline {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #eee;
}
.found-zone {
padding: 20px 0;
}
.found-zone>a {
font-size: 1.3rem;
padding: 0 10px;
}
.login-page .blue-btn {
margin-left: 0;
padding: 10px 0;
}</style>