테스트

<template>

    <div class="wrap">

        <Header></Header>

        <section class="content">

            <button @click="showContents" :value="showConten1">1</button> <br />

            <button @click="showContents" :value="showConten2">2</button> <br />

 

            <div class="cnt_box pd_type5">

                <div class="join_step step4">

                    <ol>

                        <li><span>1</span></li>

                        <li><span>2</span></li>

                        <li><span>3</span></li>

                        <li><span>4</span></li>

                    </ol>

                    <p class="tit">가입완료</p>

                    <!-- <p class="txt">서브 문구</p> -->

                </div>

                <p class="sp_tit1 pd_b0">

                    <strong class="txt_line0">신세계</strong> 님,

                    <span class="user_underline">shinsegae12</span> ID로

                    <br />신세계포인트 통합 회원 가입이 <br />완료되었습니다.

                </p>

            </div>

            <div class="cnt_box pd_type1 bg0">

                <ul class="user_sign_wrap">

                    <li>

                        <p class="sp_txt0"><strong>회원정보</strong></p>

                        <div class="user_info">

                            <dl>

                                <dt>휴대폰 번호</dt>

                                <dd>010-9876-5432</dd>

                            </dl>

                            <dl>

                                <dt>이메일</dt>

                                <dd>asdf1234@asdf.com</dd>

                            </dl>

                            <dl>

                                <dt>주소</dt>

                                <dd>04529</dd>

                                <dd>도로명: 서울 중구 남대문시장 10길2, 1(회현동1가)</dd>

                                <dd>지번: 서울 중구 회현동1가 204번지 MESA 1</dd>

                            </dl>

                        </div>

                    </li>

                    <li class="info_consent">

                        <p class="sp_txt0"><strong>광고 정보 수신동의</strong></p>

                        <div class="user_info end">

                            <dl>

                                <dt>동의</dt>

                                <dd>이메일, APP PUSH</dd>

                            </dl>

                            <dl>

                                <dt>비동의</dt>

                                <dd>문자, DM, TM</dd>

                            </dl>

                        </div>

                    </li>

                </ul>

            </div>

            <div class="cnt_box pd_type5">

                <p class="sp_tit1 pd_b0">

                    <strong class="txt_line0">신세계</strong> 님,<br />

                    통합 ID로 더 다양한 서비스를 이용할 수 있습니다!

                </p>

                <div class="agree_form_wrap">

                    <ul>

                        <li>

                            <div v-if="authTabIdx1" class="company complate">

                                <a href="javascript:;" class="logo_btn">

                                    <span class="company_logo"></span>

                                    <span class="company_title">이마트</span>

                                    <div>

                                        <img src="@/assets/images/member/stamp_emart.png" alt="" />

                                    </div>

                                    <span class="company_sc">바로가기</span>

                                </a>

                            </div>

                            <div v-else class="company">

                                <button class="logo_btn" @click="shows(1)">

                                    <span class="company_logo"></span>

                                    <span

                                        class="company_arrow"

                                        :class="{ on: showConten1 === true }"

                                    ></span>

                                </button>

                                <div class="agree_lists" :class="{ on: showConten1 === true }">

                                    <div class="agree_list btn_type0">

                                        <div class="agree_form">

                                            <div class="chk_box">

                                                <input type="checkbox" id="checkbox01" />

                                                <label for="checkbox01">[필수] 이마트 필수약관</label>

                                            </div>

                                            <button class="agree_show">

                                                <span>내용보기</span>

                                            </button>

                                        </div>

                                        <button class="agree_btn" @click="authTabIdx1 = true">

                                            <span>동의하기</span>

                                        </button>

                                    </div>

                                </div>

                            </div>

                        </li>

 

                        <li>

                            <div v-if="authTabIdx2" class="company complate">

                                <a href="javascript:;" class="logo_btn">

                                    <span class="company_logo"></span>

                                    <span class="company_title">신세계백화점</span>

                                    <div>

                                        <img

                                            src="@/assets/images/member/stamp_shinsegae.png"

                                            alt=""

                                        />

                                    </div>

                                    <span class="company_sc">바로가기</span>

                                </a>

                            </div>

                            <div v-else class="company">

                                <button class="logo_btn" @click="shows(2)">

                                    <span class="company_logo"></span>

                                    <span

                                        class="company_arrow"

                                        :class="{ on: showConten2 === true }"

                                    ></span>

                                </button>

                                <div class="agree_lists" :class="{ on: showConten2 === true }">

                                    <div class="agree_list btn_type0">

                                        <div class="agree_form">

                                            <div class="chk_box">

                                                <input type="checkbox" id="checkbox02" />

                                                <label for="checkbox02"

                                                    >[필수] 신세계백화점 필수약관</label

                                                >

                                            </div>

                                            <button class="agree_show">

                                                <span>내용보기</span>

                                            </button>

                                        </div>

                                        <button class="agree_btn" @click="authTabIdx2 = true">

                                            <span>동의하기</span>

                                        </button>

                                    </div>

                                </div>

                            </div>

                        </li>

 

                        <li>

                            <div v-if="authTabIdx3" class="company complate">

                                <a href="javascript:;" class="logo_btn">

                                    <span class="company_logo"></span>

                                    <span class="company_title">사이먼</span>

                                    <div>

                                        <img src="@/assets/images/member/stamp_simon.png" alt="" />

                                    </div>

                                    <span class="company_sc">바로가기</span>

                                </a>

                            </div>

                            <div v-else class="company">

                                <button class="logo_btn" @click="shows(3)">

                                    <span class="company_logo"></span>

                                    <span

                                        class="company_arrow"

                                        :class="{ on: showConten3 === true }"

                                    ></span>

                                </button>

                                <div class="agree_lists" :class="{ on: showConten3 === true }">

                                    <div class="agree_list btn_type0">

                                        <div class="agree_comment">

                                            <span>

                                                사이먼 이용약관 및 개인정보 수집·이용동의 내용을

                                                확인하였으며, 아래 내용에 동의합니다.

                                            </span>

                                            <p>(주)사이먼 귀중</p>

                                        </div>

                                        <div class="agree_form">

                                            <div class="chk_box">

                                                <input type="checkbox" id="checkbox03" />

                                                <label for="checkbox03">[필수] 사이먼 필수약관</label>

                                            </div>

                                            <button class="agree_show">

                                                <span>내용보기</span>

                                            </button>

                                        </div>

                                        <div class="agree_form">

                                            <div class="chk_box">

                                                <input type="checkbox" id="checkbox04" required />

                                                <label for="checkbox04"

                                                    >[필수] 개인정보 수집 및 이용 동의</label

                                                >

                                            </div>

                                            <button class="agree_show">

                                                <span>내용보기</span>

                                            </button>

                                        </div>

                                        <div class="agree_form">

                                            <div class="chk_box">

                                                <input type="checkbox" id="checkbox05" />

                                                <label for="checkbox05"

                                                    >[선택] 이벤트 정보 제공을 위한 개인정보 수집</label

                                                >

                                            </div>

                                            <button class="agree_show">

                                                <span>내용보기</span>

                                            </button>

                                        </div>

                                        <button class="agree_btn" @click="authTabIdx3 = true">

                                            <span>동의하기</span>

                                        </button>

                                    </div>

                                </div>

                            </div>

                        </li>

 

                        <li>

                            <div v-if="authTabIdx4" class="company complate">

                                <a href="javascript:;" class="logo_btn">

                                    <span class="company_logo"></span>

                                    <span

                                        class="company_title"

                                        :class="{ on: showConten4 === true }"

                                        >시코르</span

                                    >

                                    <div>

                                        <img src="@/assets/images/member/stamp_chicor.png" alt="" />

                                    </div>

                                    <span class="company_sc">바로가기</span>

                                </a>

                            </div>

                            <div v-else class="company">

                                <button class="logo_btn" @click="shows(4)">

                                    <span class="company_logo"></span>

                                    <span

                                        class="company_arrow"

                                        :class="{ on: showConten4 === true }"

                                    ></span>

                                </button>

                                <div class="agree_lists" :class="{ on: showConten4 === true }">

                                    <div class="agree_list btn_type0">

                                        <div class="agree_comment">

                                            <span>

                                                시코르 이용약관 및 개인정보 수집·이용동의 내용을

                                                확인하였으며, 아래 내용에 동의합니다.

                                            </span>

                                            <p>(주)시코르 귀중</p>

                                        </div>

                                        <div class="agree_form">

                                            <div class="chk_box">

                                                <input type="checkbox" id="checkbox06" />

                                                <label for="checkbox06">[필수] 시코르 필수약관</label>

                                            </div>

                                            <button class="agree_show">

                                                <span>내용보기</span>

                                            </button>

                                        </div>

                                        <div class="agree_form">

                                            <div class="chk_box">

                                                <input type="checkbox" id="checkbox07" />

                                                <label for="checkbox07"

                                                    >[필수] 개인정보 수집 및 이용 동의</label

                                                >

                                            </div>

                                            <button class="agree_show">

                                                <span>내용보기</span>

                                            </button>

                                        </div>

                                        <div class="agree_form">

                                            <div class="chk_box">

                                                <input type="checkbox" id="checkbox08" />

                                                <label for="checkbox08"

                                                    >[선택] 이벤트 정보 제공을 위한 개인정보 수집</label

                                                >

                                            </div>

                                            <button class="agree_show">

                                                <span>내용보기</span>

                                            </button>

                                        </div>

                                        <button class="agree_btn" @click="authTabIdx4 = true">

                                            <span>동의하기</span>

                                        </button>

                                    </div>

                                </div>

                            </div>

                        </li>

                    </ul>

                    <div class="sp_login">

                        <button @click="shows">신세계포인트 로그인하기</button>

                    </div>

                </div>

            </div>

        </section>

        <Footer></Footer>

    </div>

</template>

 

<script>

import Header from '@/pages/common/header/sub/header.vue';

import Footer from '@/pages/common/footer.vue';

 

export default {

    components: { Header, Footer },

    data() {

        return {

            showConten: false,

            authTabIdx1: false,

            authTabIdx2: false,

            authTabIdx3: false,

            authTabIdx4: false,

            showConten1: false,

            showConten2: false,

            showConten3: false,

            showConten4: false,

            wrap: [],

        };

    },

    methods: {

        showContents(e) {

            this.showConten = console.log(e.target.value);

        },

        shows(idx) {

            if (idx === 1) {

                this.showConten1 = !this.showConten1;

                // this.showConten2 = false;

                // this.showConten3 = false;

                // this.showConten4 = false;

            } else if (idx === 2) {

                this.showConten2 = !this.showConten2;

                // this.showConten1 = false;

                // this.showConten3 = false;

                // this.showConten4 = false;

            } else if (idx === 3) {

                this.showConten3 = !this.showConten3;

                this.showConten1 = false;

                this.showConten2 = false;

                this.showConten4 = false;

            } else if (idx === 4) {

                this.showConten4 = !this.showConten4;

                this.showConten1 = false;

                this.showConten2 = false;

                this.showConten3 = false;

            }

        },

    },

};

</script>

 

<style>

.user_underline {

    color: #ff8022;

    position: relative;

}

.user_underline::after {

    content: '';

    display: block;

    clear: both;

    width: 100%;

    height: 2px;

    position: absolute;

    left: 0;

    background: #ff8022;

}

.join_step {

    padding-bottom: 40px;

}

.join_step .tit {

    font-size: 25px;

    padding: 20px 0 0 0;

}

.join_step .txtP {

    padding-top: 15px;

}

/* .info_tit {

    width: 80%;

    padding-bottom: 0;

    margin: 0;

} */

.join_step ol {

    display: flex;

}

.join_step ol li {

    background: #e5e5e5;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 10px;

}

 

.join_step.step1 ol li:nth-child(1) {

    background: #ff8022;

    box-shadow: 0px 7px 10px 0px rgba(255, 128, 34, 0.15);

    text-shadow: 0px 7px 10px rgba(255, 128, 34, 0.15);

}

 

.join_step.step2 ol li:nth-child(2) {

    background: #ff8022;

    box-shadow: 0px 7px 10px 0px rgba(255, 128, 34, 0.15);

    text-shadow: 0px 7px 10px rgba(255, 128, 34, 0.15);

}

.join_step.step2 ol li:nth-child(1) {

    background: #ff8022;

}

 

.join_step.step3 ol li:nth-child(3) {

    background: #ff8022;

    box-shadow: 0px 7px 10px 0px rgba(255, 128, 34, 0.15);

    text-shadow: 0px 7px 10px rgba(255, 128, 34, 0.15);

}

.join_step.step3 ol li:nth-child(1),

.join_step.step3 ol li:nth-child(2) {

    background: #ff8022;

}

 

.join_step.step4 ol li:nth-child(4) {

    background: #ff8022;

    box-shadow: 0px 7px 10px 0px rgba(255, 128, 34, 0.15);

    text-shadow: 0px 7px 10px rgba(255, 128, 34, 0.15);

}

.join_step.step4 ol li:nth-child(1),

.join_step.step4 ol li:nth-child(2),

.join_step.step4 ol li:nth-child(3) {

    background: #ff8022;

}

 

.join_step ol li:first-child {

    margin-left: 0;

}

.join_step ol li span {

    color: #fff;

    font-size: 9px;

}

 

.user_sign_wrap .sp_txt0 {

    padding: 0 0 15px;

    margin: 0;

}

.user_info {

    border-top: 1px solid #222;

    padding: 0 0 40px;

}

.user_info dt {

    font-size: 15px;

    font-weight: 500;

    line-height: 24px;

    padding-top: 20px;

    flex: 1 1 60px;

}

.user_info dd {

    font-size: 15px;

    color: #666;

    line-height: 24px;

    flex: 1 1 90%;

}

.user_info.end {

    padding: 0;

}

.info_consent .user_info dl {

    display: flex;

    align-items: baseline;

}

.info_consent .user_info dl:nth-child(2) dt {

    padding-top: 0;

}

.agree_form_wrap li {

    margin-bottom: 10px;

}

.agree_form_wrap li:last-child {

    margin-bottom: 0px;

}

.agree_form_wrap li:nth-child(2) .company .logo_btn {

    background: #999999;

}

.agree_form_wrap li:nth-child(3) .company .logo_btn {

    background: #a1005b;

}

.agree_form_wrap li:nth-child(4) .company .logo_btn {

    background: #000;

}

.agree_form_wrap li:nth-child(3) .agree_form,

.agree_form_wrap li:nth-child(4) .agree_form {

    margin-bottom: 20px;

}

.agree_form_wrap {

    padding-top: 30px;

}

 

.company .logo_btn {

    display: flex;

    padding: 0 20px;

    background: #ffd040;

    width: 100%;

    justify-content: space-between;

    align-items: center;

    height: 60px;

    color: #fff;

    box-sizing: border-box;

}

.agree_form_wrap li:first-child .company.complate .company_sc {

    color: #666;

}

.agree_form_wrap li:first-child .logo_btn {

    color: #222;

}

.company .logo_btn img {

    width: 51px;

}

.agree_list .agree_comment {

    margin-bottom: 25px;

}

.agree_comment span,

.agree_comment p {

    font-size: 14px;

}

.agree_list .agree_comment p {

    margin-top: 15px;

}

.agree_lists {

    padding: 25px 18px;

    border: 1px solid #dddddd;

    display: none;

}

.agree_lists.on {

    display: block;

}

.company .company_logo {

    background: url('~@/assets/images/member/logo_emart.png') no-repeat 0 0;

    height: 13px;

    background-size: 34px;

    width: 34px;

}

.agree_form_wrap li:nth-child(2) .company .company_logo {

    background: url('~@/assets/images/member/logo_shinsegae.png') no-repeat 0 0;

    height: 16px;

    background-size: 78px;

    width: 78px;

}

.agree_form_wrap li:nth-child(3) .company .company_logo {

    background: url('~@/assets/images/member/logo_simon.png') no-repeat 0 0;

    height: 11px;

    background-size: 54px;

    width: 54px;

}

.agree_form_wrap li:nth-child(4) .company .company_logo {

    background: url('~@/assets/images/member/logo_chicor.png') no-repeat 0 0;

    height: 12px;

    background-size: 50px;

    width: 50px;

}

.company .company_title {

    font-size: 15px;

    position: absolute;

    left: 112px;

}

.company .company_sc {

    font-size: 13px;

}

.company.complate {

    position: relative;

}

.company.complate div {

    position: absolute;

    right: 82px;

}

.agree_form_wrap ul li:first-child .company .company_arrow {

    background: url('~@/assets/images/member/logo_arrow_top.png') no-repeat 0 0;

    height: 9px;

    background-size: 100% 100%;

    width: 13px;

}

.company .company_arrow.on {

    transform: rotate(180deg);

}

.company .company_arrow {

    background: url('~@/assets/images/member/logo_arrow_top_w.png') no-repeat 0 0;

    height: 9px;

    background-size: 100% 100%;

    width: 13px;

}

.agree_form {

    display: flex;

    align-items: center;

}

.agree_btn {

    font-size: 15px;

    line-height: 15px;

    width: 210px;

    background: #b0a9a2;

    color: #fff;

    padding: 13px 0;

    margin: 25px auto 0;

    display: block;

}

 

.sp_login {

    background: #ff8022;

    text-align: center;

    margin-top: 30px;

}

.sp_login button {

    color: #fff;

    font-size: 18px;

    padding: 13px;

}

 

/*약관보기 텍스트 노출*/

.agree_list.btn_type0 .agree_form .agree_show {

    text-indent: 0;

    width: auto;

    background: none;

    font-size: 0;

}

.agree_list.btn_type0 .agree_form .agree_show span {

    text-indent: 0;

    width: auto;

    background: none;

    line-height: 24px;

    font-size: 13px;

}

.company .company_sc {

    text-indent: 0;

    width: auto;

    background: none;

    line-height: 24px;

}

.agree_list.btn_type0 .agree_form .agree_show span:after {

    content: '';

    display: inline-block;

    vertical-align: top;

    width: 6px;

    height: 10px;

    margin: 8px 0 0 3px;

}

 

.company .company_sc:after {

    content: '';

    display: inline-block;

    vertical-align: top;

    width: 6px;

    height: 10px;

    margin: 8px 0 0 3px;

    background: url(~@/assets/images/member/terms_arr2_w.png) no-repeat 0 0;

    background-size: 100% 100%;

}

.agree_list.btn_type0 .agree_form .agree_show span:after {

    background: url(~@/assets/images/member/terms_arr2_g.png) no-repeat 0 0;

    background-size: 100% 100%;

}

.agree_form_wrap li:first-child .company.complate .company_sc:after {

    background: url(~@/assets/images/member/terms_arr2_g.png) no-repeat 0 0;

    background-size: 100% 100%;

}

 

/*약관 label 폰트 사이즈*/

.agree_list.txt_type0 .chk_box label {

    font-size: 10px;

}

.agree_list.txt_type0.btn_type0 .agree_form .agree_show {

    font-size: 10px;

}

.agree_form_wrap li:nth-child(3) .chk_box label,

.agree_form_wrap li:nth-child(4) .chk_box label {

    font-size: 10px;

}

.agree_form_wrap li:nth-child(3) .company button.agree_show span,

.agree_form_wrap li:nth-child(4) .company button.agree_show span {

    font-size: 10px;

}

</style>