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-content flex ">
<div class="login-logo flex justify-end"></div>
<div class="flex justify-between login-wrap gd-12">
<div class="login-imgbox">
<input type="file" @change="handleFileUpload" id="fileUpload" accept="image/*"
style="display: none;">
<label for="fileUpload" style="display: block; width: 100%; height: 100%; cursor: pointer;">
<img v-if="imagePreview" :src="imagePreview" alt="Image preview"
style="width: 100%; height: 100%;">
<div v-else style="width: 100%; height: 100%;"></div>
</label>
</div>
<div class="flex-column gd-6">
<h1 class="mb4">LOGIN</h1>
<div class="login-box ">
<div class="login-user mb2">
<p>아이디</p>
<input type="text ">
</div>
<div class="login-pw mb2">
<p>비밀번호</p>
<input type="password">
</div>
<div class="flex justify-between mb2 button-wrap">
<div class="flex align-center">
<input type="checkbox" class="ui-checkbox" name="" id="a">
<label for="a">ID 저장하기</label>
</div>
<button class="small-btn " @click="pwchange">비밀번호 변경하기</button>
</div>
<button class="blue-btn large-btn "
style="padding: 10px !important; font-size: 1.5rem !important;" @click="login">로그인</button>
</div>
<!-- 비밀번호 변경 페이지 -->
<div class="pwchange-modal pt10" v-show="isActive" >
<div class="flex justify-between pwchange-header">
<h1 class="mt1 mb4">비밀번호 변경</h1>
<button @click="pwChangeBtn"></button>
</div>
<div class="login-box ">
<div class="pwchange-user mb2">
<p>비밀번호 변경</p>
<input type="text ">
</div>
<div class="pwchange-pw mb2">
<p>비밀번호 확인</p>
<input type="password">
</div>
<button class="blue-btn large-btn "
style="padding: 10px !important; font-size: 1.5rem !important;"
@click="pwChangeBtn">비밀번호 변경하기</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// import axios from 'axios';
// import { useStore } from 'vuex';
// import store from '../AppStore'
export default {
data() {
return {
imagePreview: null,
isActive: false,
}
},
methods: {
login() {
this.$emit('login');
},
handleFileUpload(event) {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = e => {
this.imagePreview = e.target.result;
};
reader.readAsDataURL(file);
}
},
pwchange() {
this.isActive = true;
},
pwChangeBtn(){
this.isActive = false;
}
},
watch: {
},
computed: {
},
mounted() {
}
}
</script>
<style scoped></style>