<template>
  <div class="join-wrap">
    <div class="login-logo mb50">
        <img src="../../../resources/img/content/login_logo.svg" alt="로고">
    </div>
    <div class="login-box join-box">
        <div class="tbl-wrap">
            <table class="tbl data">
                <colgroup>
                    <col style="width: 180px;">
                    <col style="width: auto;">
                </colgroup>
                <tbody>
                    <tr>
                        <th style="background-color: #eff1fa;">아이디</th>
                        <td>
                            <div class="input-group">
                                <input type="text" class="form-control sm" placeholder="3-15자 영문/숫자 조합으로 입력해주세요">
                                <button class="btn sm black">중복확인</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th  style="background-color: #eff1fa;">비밀번호</th>
                        <td><input type="password" class="form-control sm" placeholder="3-16자 영문/숫자 조합으로 입력해주세요"></td>
                    </tr>
                    <tr>
                        <th style="background-color: #eff1fa;">비밀번호 확인</th>
                        <td><input type="password" class="form-control sm" placeholder="3-16자 영문/숫자 조합으로 입력해주세요"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="tbl-wrap">
            <table class="tbl data">
                <colgroup>
                    <col style="width: 180px;">
                    <col style="width: auto;">
                </colgroup>
                <tbody>
                    <tr>
                        <th style="background-color: #eff1fa;">이름</th>
                        <td><input type="text" class="form-control sm" placeholder="한글 15자, 영문 30자까지 가능합니다."></td>
                    </tr>
                    <tr>
                        <th style="background-color: #eff1fa;">이메일</th>
                        <td>
                            <div class="input-group">
                                <input type="text" class="form-control sm" placeholder="3-15자 영문/숫자 조합으로 입력해주세요">
                                <button class="btn sm black">중복확인</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="tbl-wrap last-table">
            <table class="tbl data">
                <colgroup>
                    <col style="width: 180px;">
                    <col style="width: auto;">
                </colgroup>
                <tbody>
                    <tr>
                        <th style="background-color: #eff1fa;border-radius: 1rem 0 0 1rem; ">전화번호</th>
                        <td>
                            <div class="input-group mb10">
                                <input type="text" class="form-control sm" placeholder="-제외 휴대전화 번호를 입력해주세요">
                                <button class="btn sm black">인증번호 발송</button>
                            </div>
                            <div class="input-group">
                                <input type="text" class="form-control sm" placeholder="인증번호 6자리 숫자를 입력해주세요" style="background-color: #ebebeb;">
                                <button class="btn sm black" style="min-width: 119px;">확인</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="layout center justify-center">
            <button class="btn lg netx-btn" @click="stepGo(2)">다음</button>
        </div>

    </div>
  </div>
</template>

<script>

export default {
    data() {
        return {
        };
    },
    methods: {},
    watch: {},
    computed: {},
    components: {},
    created() {},
    mounted() {},
    beforeUnmount() {},
};

</script>