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
File name
Commit message
Commit date
<template>
<div class="w1400">
<section class="join-logo">
<h1>회원가입</h1>
</section>
<section class="join-b">
<div class="join-b-button">
<input type="radio" id="one" v-model="selectedMembership" value="one">
<label for="one" class="radio-t t1"
:style="{ backgroundColor: selectedMembership === 'one' ? '#86868644' : '#e2ecfc' }">기관회원
<img src="../../../../resources/jpg/join-bt2.png" alt=""></label>
<input type="radio" id="two" v-model="selectedMembership" value="two">
<label for="two" class="radio-t t2"
:style="{ backgroundColor: selectedMembership === 'two' ? '#86868644' : '#e6fff1' }">일반회원
<img src="../../../../resources/jpg/join-bt.png" alt=""></label>
</div>
</section>
<div v-if="selectedMembership === 'one'">
<div class="login-info">
<div>
<h3>회원정보</h3>
<hr>
</div>
<section class="join-sec1 joinsub0">
<div class="join-sec-sub ">
<span>아이디</span>
</div>
<div>
<input type="text" value="아이디를 입력하세요.">
</div>
<div>
<button>중복확인</button>
</div>
</section>
<section class="join-sec2 joinsub">
<div class="join-sec-sub">
<span>기관업체</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec3 joinsub">
<div class="join-sec-sub">
<span>비밀번호</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec4 joinsub">
<div class="join-sec-sub">
<span>비밀번호 확인</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec5 joinsub">
<div class="join-sec-sub">
<span>담당자명</span>
</div>
<div>
<input type="text">
</div>
</section>
<section class="join-sec6">
<div class="join-sec-sub">
<span>이메일</span>
</div>
<div class="email-sec">
<div>
<input type="text" name="email_id" id="email_id">
</div>
<div>@</div>
<div>
<input type="text" name="email_dns" id="email_dns">
</div>
<div>
<select name="email_sel" id="email_sel">
<option value="">직접 입력</option>
<option value="naver.com">naver</option>
<option value="hanmail.net">daum</option>
<option value="gmail.com">google</option>
</select>
</div>
</div>
</section>
</div>
<div class="login-info2">
<div>
<h3>회사소개</h3>
<hr>
</div>
<div class="login-info-grid">
<div class="login-info-grid-1">
<section class="join-sec0">
<div>
<p>logo</p>
</div>
</section>
</div>
<div class="login-info-grid-2">
<section class="join-sec1 joinsub0-1">
<div class="join-sec-sub ">
<span>회사명</span>
</div>
<div>
<input type="text" value="회사명을 입력해주세요.">
</div>
</section>
<section class="join-sec2 joinsub">
<div class="join-sec-sub">
<span>우리회사 키워드</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec3 joinsub j-s-3">
<div class="join-sec-sub">
<span>회사소개글</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec4 joinsub">
<div class="join-sec-sub join-sec-1">
<span>회사소개서 <br> 첨부파일</span>
</div>
<div class="join-sub-input">
<input type="file">
</div>
</section>
</div>
</div>
</div>
</div>
<div v-else>
<div class="login-info">
<div>
<h3>회원정보</h3>
<hr>
</div>
<section class="join-sec1 joinsub0">
<div class="join-sec-sub ">
<span>아이디</span>
</div>
<div>
<input type="text" value="아이디를 입력하세요.">
</div>
<div>
<button>중복확인</button>
</div>
</section>
<section class="join-sec2 joinsub">
<div class="join-sec-sub">
<span>기관업체</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec3 joinsub">
<div class="join-sec-sub">
<span>비밀번호</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec4 joinsub">
<div class="join-sec-sub">
<span>비밀번호 확인</span>
</div>
<div class="join-sub-input">
<input type="text">
</div>
</section>
<section class="join-sec5 joinsub">
<div class="join-sec-sub">
<span>담당자명</span>
</div>
<div>
<input type="text">
</div>
</section>
<section class="join-sec6">
<div class="join-sec-sub">
<span>이메일</span>
</div>
<div class="email-sec">
<div>
<input type="text" name="email_id" id="email_id">
</div>
<div>@</div>
<div>
<input type="text" name="email_dns" id="email_dns">
</div>
<div>
<select name="email_sel" id="email_sel">
<option value="">직접 입력</option>
<option value="naver.com">naver</option>
<option value="hanmail.net">daum</option>
<option value="gmail.com">google</option>
</select>
</div>
</div>
</section>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------->
<div class="join-w1400">
<section class="join-email-bt">
<input type="checkbox">
<span>E-mail 구독서비스를 신청하시겠습니까?</span>
</section>
<section class="join-end-bt">
<button>이전</button>
<button @click="showDiv">회원가입</button>
</section>
</div>
</div>
<!-- 회원가입 완료 모달 -->
<div class="joinmodal" v-if="isVisible">
<section class="join-modal-a">
<div>
<h1>회원가입 안내</h1>
</div>
<div>
<p>회원가입 신청이 완료되었습니다. <br>
가입승인이 완료 시까지 특정 서비스는 이용하실 수 없으며 가입승인이 완료되면
AI 디지털 교과서 통합지원센터 서비스를 이용하실 수 있습니다.
또한 해당기업은 같은 기업명으로 중복 가입이
불가합니다.
</p>
</div>
<div>
<button @click="hideDiv">확인</button>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
selectedMembership: 'one',
isVisible: false
}
},
methods: {
showDiv: function () {
this.isVisible = true;
},
hideDiv: function () {
this.isVisible = false;
}
},
watch: {
},
computed: {
},
mounted() {
console.log('Join mounted');
}
}
</script>
<style scoped>
/* 모달 */
.joinmodal {
width: 100%;
height: 100%;
background-color: #33333324;
margin: 0 auto;
text-align: center;
padding: 3rem;
position: fixed;
top: 0;
left: 0;
}
.join-modal-a {
position: fixed;
top: 50%;
left: 50%;
padding: 4rem;
border-radius: 2rem;
background-color: #f9f9f9;
transform: translate(-50%, -50%);
/* margin: 0 auto; */
box-shadow: 2px 2px 5px #86868644;
width: 25%;
}
.join-modal-a h1 {
font-size: 2rem;
padding: 3rem 0 0 0;
}
.join-modal-a p {
width: 85%;
margin: 0 auto;
font-size: 1.5rem;
padding: 3rem;
text-align: left;
}
.join-modal-a button {
width: 20%;
background-color: #3f87f7;
border-radius: 1.5rem;
color: white;
font-family: "Pretendard-Regular";
}
/* ----------------------------------- */
.join-b {
width: 100%;
/* border: 1px solid red; */
}
.join-logo {
padding: 6rem;
}
.join-logo h1 {
font-family: SBaggroM;
color: #0e0077;
font-size: 4rem;
}
.join-b-button {
width: 50%;
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
gap: 6rem;
flex-direction: row;
/* padding: 9rem; */
}
.join-b-button input[type="radio"] {
display: none;
}
.join-b-button button {
height: 20rem;
display: grid;
grid-template-columns: 1fr;
border-radius: 2rem;
text-align: center;
box-shadow: 2px 2px 5px #86868644;
/* padding: 1rem; */
}
.join-b-button button p {
padding: 3rem 0 0;
/* padding: 3rem 0rem 1rem 3rem; */
font-size: 3rem;
font-family: SBaggroM;
color: #014099;
}
.join-b-button button img {
width: 200px;
height: 100px;
text-align: center;
margin: 0 auto;
/* border: 1px solid red; */
background-position: center;
}
.background {
background-color: #000000;
}
.join-b-button button:nth-child(1).background {
background-color: #000000;
}
.light {
z-index: 1;
background-color: #ff0000;
}
.join-b-button button:nth-child(2) {
background-color: #e6fff1;
}
.join-b-button button:nth-child(2) img {
width: 100px;
}
.join-b-button button:nth-child(2) p {
color: #0e5e2e;
}
.radio-t {
padding: 3rem;
height: 25rem;
font-size: 3rem;
border-radius: 2rem;
font-family: SBaggroM;
margin: 0 auto;
box-shadow: 2px 2px 5px #33333330;
text-align: center;
}
.t1 {
padding: 6rem 0;
color: #014099;
background-color: #e2ecfc;
}
.t1 img {
padding: 1rem;
width: 90%;
margin: 0 auto;
}
.t2 img {
padding: 1rem;
width: 50%;
margin: 0 auto;
}
.t2 {
padding: 6rem 0;
color: #0e5e2e;
background-color: #e6fff1;
}
/* 공통요소-------------------------------------------------------------------------*/
hr {
margin: 1rem 0 3rem 0;
border: 1px solid #cbcbcb;
}
section div span {
font-size: 1.5rem;
font-family: "Pretendard-Regular";
float: left;
color: #3f87f7;
padding: 1rem 5rem 1rem 5rem;
}
section div input {
width: 100%;
padding: 1rem;
border: 1px solid #cbcbcb;
color: #cbcbcb;
border-radius: 0.5rem;
}
section div button {
width: 100%;
padding: 1rem;
cursor: pointer;
border-radius: 0.5rem;
}
section div select {
width: 100%;
padding: 1rem;
border: 1px solid #cbcbcb;
border-radius: 0.5rem;
color: #6b6b6b;
font-family: "Pretendard-Regular";
}
/* -------------------------------------------------------------------------------- */
.login-info,
.login-info2 {
width: 50%;
margin: 0 auto;
}
.login-info2 {
display: block;
}
.login-info2.Chacked {
display: none;
}
.login-info h3,
.login-info2 h3 {
color: #0e0077;
font-size: 2rem;
font-family: "Pretendard-Regular";
padding: 3rem 1rem 1rem 1rem;
}
.joinsub0 {
padding: 1rem;
display: grid;
grid-template-columns: 200px 2fr 1fr;
gap: 1rem;
}
.j-s-3 {
display: grid;
grid-template-rows: 30rem;
}
.j-s-3 input {
height: 100%;
}
.join-sec1 button {
font-size: 1.5rem;
color: white;
font-family: "Pretendard-Regular";
background-color: #3f87f7;
}
.joinsub {
padding: 1rem;
display: grid;
grid-template-columns: 200px 2fr;
gap: 1rem;
}
.join-sec6 {
padding: 1rem;
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
}
.join-sec6 div:nth-child(3) {
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
}
.login-info-grid {
display: grid;
grid-template-columns: 100px 1fr;
}
.join-sec0 {
display: grid;
padding: 2rem;
grid-row: 1 / span 3;
}
.join-sec0 div p {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
text-align: center;
color: #333;
font-size: 2.5rem;
font-family: "Pretendard-Regular";
background-color: #b5b5b5;
/* border: 1px solid red; */
box-shadow: 2px 2px 5px #33333328;
}
.joinsub0-1 {
padding: 1rem;
display: grid;
grid-template-columns: 200px 2fr;
}
.join-w1400 {
width: 50%;
margin: 0 auto;
}
.join-email-bt {
font-size: 1.6rem;
padding: 3rem 3rem 3rem 0rem;
}
.join-email-bt input[type=checkbox] {
margin: 1rem;
/* border: 1px solid red; */
transform: scale(1.5);
}
.join-email-bt span {
color: #898989;
font-family: "Pretendard-Regular";
}
.join-end-bt {
display: grid;
grid-template-columns: 25% 73%;
gap: 1rem;
padding: 6rem 0rem 6rem 0rem;
}
.join-end-bt button {
padding: 2rem;
cursor: pointer;
border-radius: 1.2rem;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
}
.join-end-bt button:nth-child(2) {
background-color: #3f87f7;
color: white;
}
.login-info2 {
width: 50%;
}
.email-sec {
display: grid;
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
@media all and (max-width:479px) {
.join-logo h1 {
font-size: 3rem;
}
.join-b {
/* border: 1px solid red; */
width: 100%;
}
.join-b-button {
padding: 2rem;
gap: 2rem;
width: 100%;
}
.login-info {
width: 90%;
}
.login-info2 {
width: 90%;
}
hr {
display: none;
}
.joinsub0 {
grid-template-columns: 1fr;
}
.joinsub {
grid-template-columns: 1fr;
}
.join-sec6 {
grid-template-columns: 1fr;
}
.login-info-grid {
grid-template-columns: 1fr;
}
.join-sec0 {
place-items: center;
}
.joinsub0-1 {
grid-template-columns: 1fr;
}
.j-s-3 input {
height: 100%;
}
.join-w1400 {
width: 100%;
padding: 1rem;
}
.login-info h3,
.login-info2 h3 {
font-size: 1.8rem;
text-align: center;
}
section div {}
section div input {
width: 100%;
/* border: 1px solid red; */
}
.join-email-bt {
text-align: center;
}
.email-sec {
display: grid;
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
.join-sec-sub {
margin: 0 auto;
}
.join-sec-1 span br {
display: none;
}
.j-s-3 {
display: grid;
gap: 0;
height: 50rem;
grid-template-rows: 4rem;
}
}
@media all and (min-width: 479px) and (max-width: 767px) {
.join-logo h1 {
font-size: 2.2rem;
}
.login-info,
.login-info2 {
width: 100%;
padding: 1rem;
}
.join-b-button {
padding: 4rem;
/* gap: 1rem; */
width: 100%;
}
.login-info {
width: 100%;
}
.joinsub0 {
grid-template-columns: 1fr;
}
.joinsub {
grid-template-columns: 1fr;
}
.join-sec6 {
grid-template-columns: 1fr;
}
.login-info-grid {
grid-template-columns: 1fr;
}
.join-sec0 {
place-items: center;
}
.joinsub0-1 {
grid-template-columns: 1fr;
}
.j-s-3 input {
height: 100%;
}
.join-w1400 {
width: 100%;
padding: 1rem;
}
.login-info h3,
.login-info2 h3 {
font-size: 1.8rem;
text-align: center;
}
section div {}
section div input {
width: 100%;
/* border: 1px solid red; */
}
.join-email-bt {
text-align: center;
}
.email-sec {
display: grid;
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
.join-sec-sub {
margin: 0 auto;
}
.join-sec-1 span br {
display: none;
}
.j-s-3 {
display: grid;
gap: 0;
height: 50rem;
grid-template-rows: 4rem;
}
}
@media all and (min-width: 767px) and (max-width: 1023px) {
.join-b-button {
width: 80%;
}
.login-info {
width: 80%;
padding: 3rem 0;
}
.email-sec {
width: 100%;
display: grid;
/* border: 1px solid red; */
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
.login-info2 {
width: 80%;
}
.join-w1400 {
width: 80%;
}
}
@media all and (min-width: 1023px) and (max-width: 1268px) {
.email-sec {
width: 100%;
display: grid;
/* border: 1px solid red; */
grid-template-columns: 1fr 30px 1fr 1fr;
}
.email-sec div {
/* padding: 2rem; */
padding: 1rem 0;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
/* border: 1px solid red; */
text-align: center;
gap: 1rem;
}
.email-sec div:nth-child(2) {
padding: 2rem 0;
}
.login-info2 {
width: 50%;
}
}
</style>