<template>
    <div class="join-wrap">
        <div>
            <h1>회원가입</h1>
            <div class="join">
                <table class="join-tabel">
                    <tr>
                        <th>아이디</th>
                        <td>
                            <div class="flex">
                                <input type="text" name="" id="" style="width:80%"><button class="blue-btn">중복확인</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>비밀번호</th>
                        <td><input type="password" name="" id=""></td>
                    </tr>
                    <tr>
                        <th>비밀번호 확인</th>
                        <td><input type="password" name="" id=""></td>
                    </tr>
                    <tr>
                        <th>이메일</th>
                        <td>
                            <div class="flex email">
                                <input type="text" name="" id="" style="width:30%"/><span>@</span><input type="text" disabled style="width:30%"/>
                                <select name="" id="" style="width:30%">
                                    <option value="">직접입력</option>
                                    <option value="naver.com">naver.com</option>
                                    <option value="hanmail.net">hanmail.net</option>
                                    <option value="google.com">google.com</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
  
<script>


const App = {
    data: () => {
        return {
        }
    },

    methods: {

    },

    watch: {

    },

    computed: {

    },

    components: {

    },
    mounted: () => {

    }
}

export default App;
</script>
 
<style scoped>

</style>