Code - jichoi/lms

<template> <div class="login-container"> <div class="login-bg"> <div> </div> </div> <div class="login "> <div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div> <div class="join-box"> <div class="flex align-center justify-start mb40"> <img src="../resources/img/icon1.png" alt="" class="mr20"> <h2>회원가입</h2> </div> <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> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab3" /> 선생님 </label>  <form @submit.prevent="submitForm" class="login-form mt20" v-if="selectedTab === 'tab1'"> <div class="mb10 flex justify-between align-center"> <p class="title" for="username">아이디</p> <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> </div> <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호 확인</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">이름</p> <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username" > <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학교</p> <div class="search-wrap" style="width: 100%;"> <input type="text" placeholder="검색하세요."> <button @click="buttonSearch" type="button" title="위원회 검색"> <img src="../resources/img/look_t.png" alt=""> </button> </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학교</p> <div class="search-wrap flex justify-end mb20" style="width: 100%;"> <select name="" id="" class="mr10 data-wrap"> <option value="">학년</option> </select> <select name="" id="" class="mr10 data-wrap"> <option value="">반</option> </select> <select name="" id="" class="data-wrap"> <option value="">번호</option> </select> </div> </div> <div class="flex justify-end align-center mb10"> <input type="checkbox" class="ui-checkbox mr10"> <p class="title2" for="password">개인정보 수집 동의</p> </div> <button style="width: 100%;" class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/btn_.png" alt=""> <p>로그인</p> </button> </form>  <form @submit.prevent="submitForm" class="login-form mt20" v-else-if="selectedTab === 'tab2'"> <div class="mb10 flex justify-between align-center"> <p class="title" for="username">아이디</p> <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> </div> <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호 확인</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">이름</p> <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username" > <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > </div> </div> <div class="flex justify-between mb20"> <p class="title " for="username"><em class="yellow">학생 정보</em></p> <div class="flex justify-end align-center mb10"> <img src="../resources/img/img192_78p.png" alt=""> <p class="title2 ml10" for="password">자녀 추가하기</p> </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학교</p> <div class="search-wrap" style="width: 100%;"> <input type="text" placeholder="검색하세요."> <button @click="buttonSearch" type="button" title="위원회 검색"> <img src="../resources/img/look_t.png" alt=""> </button> </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학생 정보</p> <div class="search-wrap flex justify-end mb20" style="width: 100%;"> <select name="" id="" class="mr10 data-wrap"> <option value="">학년</option> </select> <select name="" id="" class="mr10 data-wrap"> <option value="">반</option> </select> <select name="" id="" class=" data-wrap"> <option value="">번호</option> </select> </div> </div> <div class="flex justify-end align-center mb10"> <input type="checkbox" class="ui-checkbox mr10"> <p class="title2" for="password">개인정보 수집 동의</p> </div> <button style="width: 100%;" class="login-btn mt50" type="submit" ><img src="../resources/img/btn_.png" alt=""> <p>로그인</p> </button> </form>  <form @submit.prevent="submitForm" class="login-form mt20" v-else-if="selectedTab === 'tab3'"> <div class="mb10 flex justify-between align-center"> <p class="title" for="username">아이디</p> <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> </div> <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img194_78p.png" alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호 확인</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">이름</p> <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username" > <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학교</p> <div class="search-wrap" style="width: 100%;"> <input type="text" placeholder="검색하세요."> <button @click="buttonSearch" type="button" title="위원회 검색"> <img src="../resources/img/look_t.png" alt=""> </button> </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학교</p> <div class="search-wrap flex justify-end mb20" style="width: 100%;"> <select name="" id="" class="mr10 data-wrap"> <option value="">학년</option> </select> <select name="" id="" class="mr10 data-wrap"> <option value="">반</option> </select> <select name="" id="" class="data-wrap"> <option value="">번호</option> </select> </div> </div> <div class="flex justify-end align-center mb10"> <input type="checkbox" class="ui-checkbox mr10"> <p class="title2" for="password">개인정보 수집 동의</p> </div> <button style="width: 100%;" class="login-btn mt50" type="submit" ><img src="../resources/img/btn_.png" alt=""> <p>로그인</p> </button> </form> </div> </div> </div> <div v-show="searchOpen" class="popup-wrap"> <div class="popup-box "> <div class="flex justify-between mb30"> <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="mb30 flex justify-between align-center"> <p class="title1" for="username" style="width: 12rem;">시/도</p> <div class="search-wrap flex justify-end" style="width: 100%;"> <select name="" id="" class="mr10 data-wrap"> <option value="">시</option> </select> <select name="" id="" class=" data-wrap"> <option value="">도</option> </select> </div> </div> <div class="mb10 flex justify-between align-center"> <p class="title1" for="username" style="width: 12rem;">학교명</p> <div class="search-wrap" style="width: 100%;"> <input type="text" placeholder="검색하세요."> <button @click="buttonSearch" type="button" title="위원회 검색"> <img src="../resources/img/look_t.png" alt=""> </button> </div> </div> <p class="title2 mb20 flex align-center help" for="username" style="margin-left: 10rem;"><img src="../resources/img/img194_78p.png" alt=""><em class="gray ml10">학교명을 입력 후 찾기 버튼을 클릭하십시오.</em></p> <div class="flex justify-center "> <button type="button" title="글쓰기" class="new-btn mr10"> 취소 </button> <button type="button" title="글쓰기" class="new-btn"> 등록 </button> </div> </div> </div> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify, mdiWindowClose } from '@mdi/js'; export default { data() { return { mdiWindowClose: mdiWindowClose, username: '', password: '', selectedTab: 'tab1', // 초기 선택 탭 showModal: false, searchOpen: false, } }, methods: { submitForm() { // 여기에 로그인 로직을 추가하세요. console.log('Username:', this.username); console.log('Password:', this.password); }, goToApp() { this.$router.push('/app.page'); }, closeModal() { this.showModal = false; }, buttonSearch() { this.searchOpen = true; }, closeBtn() { this.searchOpen = false; }, }, components: { SvgIcon }, } </script> <style scoped></style>