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">기관회원
<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">일반회원
<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>
<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>
</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">
<span>회사소개서 <br> 첨부파일</span>
</div>
<div class="join-sub-input">
<input type="file">
</div>
</section>
</div>
</div>
<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>
<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>
</section>
</div>
</div>
</div>
<div v-if="selectedMembership === 'two'">
<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>
<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>
</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>회원가입</button>
</section>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedMembership: 'one'
}
},
methods: {
},
watch: {
},
computed: {
},
mounted() {
console.log('Join mounted');
}
}
</script>
<style scoped>
.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 10px 1fr 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;
}
</style>