<template> <div class="login-container"> <div class="login "> <div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div> <div class="login-box"> <div class="flex align-center justify-start mb40"> <img src="../resources/img/icon1.png" alt="" class="mr20"> <h2> 로그인 하기</h2> </div> <form @submit.prevent="submitForm" class="login-form "> <div class="mb30"> <p class="mb15 title" for="username">아이디</p> <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> </div> <div> <p class="mb15 title" for="password">비밀번호</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <button class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/button.png" alt=""> <p>로그인</p> </button> <div class="flex justify-between mt40"> <button> <p class="underline title2" @click="buttonSearch">아이디/비밀번호 찾기</p> </button> <button> <p class="underline title2" @click="goToPage('Join')">회원가입</p> </button> </div> </form> </div> </div> </div> <div v-show="searchOpen" class="popup-wrap"> <div class="popup-box "> <div class="flex justify-end mb10"> <!-- <p class="popup-title">학교 검색</p> --> <button type="button" class="popup-close-btn" @click="closeBtn"> <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> </button> </div> <div class="tab-box" v-show="selectedTab !== 'tab3' && selectedTab !== 'tab4'"> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab1" /> 아이디 찾기 </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab2" /> 비밀번호 찾기 </label> </div> <!-- 아이디 찾기 --> <form @submit.prevent="submitForm" class="find-form mt30" v-if="selectedTab === 'tab1'"> <div class="mb20 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">이름</p> <input class="data-wrap" type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" style="width: 12rem;" type="text" id="username" v-model="username"> <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> </div> </div> <div class="flex justify-center "> <button type="button" title="글쓰기" class="new-btn mr10"> 취소 </button> <button @click="selectedTab = 'tab3'" type="button" title="글쓰기" class="new-btn"> 찾기 </button> </div> </form> <!-- 비밀번호 찾기 --> <form @submit.prevent="submitForm" class="find-form mt30" v-else-if="selectedTab === 'tab2'"> <div class="mb20 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">아이디</p> <input class="data-wrap" type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> </div> <div class="mb20 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">이름</p> <input class="data-wrap" type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title2" for="username" style="width: 12rem;">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" style="width: 12rem;" type="text" id="username" v-model="username"> <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> </div> </div> <div class="flex justify-center "> <button type="button" title="글쓰기" class="new-btn mr10"> 취소 </button> <button @click="selectedTab = 'tab4'" type="button" title="글쓰기" class="new-btn"> 찾기 </button> </div> </form> <!-- 아이디 찾기 결과 --> <div v-else-if="selectedTab === 'tab3'"> <div class="flex justify-center mt30"> <p class="title2">아이디 찾기가 완료 되었습니다.</p> </div> <table class="find-table mt30 mb30"> <tr> <td class="thead">이름</td> <td></td> </tr> <tr> <td class="thead">아이디</td> <td></td> </tr> </table> <div class="flex justify-center "> <button @click="closeBtn" type="button" title="글쓰기" class="new-btn"> 로그인 하기 </button> </div> </div> <!-- 비밀번호 찾기 결과 --> <div v-else-if="selectedTab === 'tab4'"> <div class="flex justify-center mt30"> <p class="title2">비밀번호 찾기가 완료 되었습니다.</p> </div> <table class="find-table mt30 mb30"> <tr> <td class="thead">이름</td> <td></td> </tr> <tr> <td class="thead">비밀번호</td> <td></td> </tr> </table> <div class="flex justify-center "> <button @click="closeBtn" type="button" title="글쓰기" class="new-btn"> 로그인 하기 </button> </div> </div> </div> </div> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify, mdiWindowClose } from '@mdi/js'; export default { data() { return { selectedTab: 'tab1', username: '', password: '', mdiWindowClose: mdiWindowClose, showModal: false, searchOpen: false, } }, methods: { submitForm() { // 여기에 로그인 로직을 추가하세요. console.log('Username:', this.username); console.log('Password:', this.password); }, goToPage(page) { this.$router.push({ name: page }); }, closeModal() { this.showModal = false; }, buttonSearch() { this.searchOpen = true; }, closeBtn() { this.searchOpen = false; }, }, components: { SvgIcon }, } </script> <style scoped></style>