134 lines
4.4 KiB
Vue
134 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
definePageMeta({
|
|
layout: 'empty'
|
|
});
|
|
|
|
const dummy = ref('phone');
|
|
const domain = ref(''); // 도메인 선택 부분
|
|
|
|
const domains = [
|
|
{ value: 'gmail.com', label: 'gmail.com' },
|
|
{ value: 'naver.com', label: 'naver.com' },
|
|
{ value: 'daum.net', label: 'daum.net' },
|
|
{ value: '직접 입력', label: '직접 입력' }
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<a-row justify="center" class="w-full h-full items-center">
|
|
<a-col :span="12">
|
|
<a-card
|
|
bordered
|
|
style="padding: 24px; background-color: #f9f9f9; border-radius: 8px"
|
|
>
|
|
<!-- 아이디 찾기 타이틀 -->
|
|
<h2 style="text-align: center; font-weight: bold; font-size: 24px">
|
|
아이디 찾기
|
|
</h2>
|
|
|
|
<!-- 검색 방법 선택 -->
|
|
<div style="display: flex; justify-content: center; margin: 16px 0">
|
|
<a-radio-group v-model:value="dummy">
|
|
<a-radio value="phone">휴대폰으로 찾기</a-radio>
|
|
<a-radio value="email">이메일로 찾기</a-radio>
|
|
</a-radio-group>
|
|
</div>
|
|
|
|
<a-form :colon="false" label-align="left">
|
|
<!-- 이름 -->
|
|
<a-form-item
|
|
label="이름"
|
|
:label-col="{ span: 4 }"
|
|
:wrapper-col="{ span: 20 }"
|
|
>
|
|
<a-input placeholder="이름을 입력하세요" />
|
|
</a-form-item>
|
|
|
|
<!-- 자동입력방지문자 (라디오 값이 'phone'일 때만 표시) -->
|
|
<a-form-item
|
|
v-if="dummy === 'phone'"
|
|
label="자동입력방지문자"
|
|
:label-col="{ span: 6 }"
|
|
:wrapper-col="{ span: 18 }"
|
|
>
|
|
<div style="display: flex; gap: 8px">
|
|
<a-input
|
|
disabled
|
|
value="564866"
|
|
style="width: 100px; text-align: center"
|
|
/>
|
|
<a-button>새로고침</a-button>
|
|
<a-button>음성듣기</a-button>
|
|
</div>
|
|
<a-input
|
|
placeholder="자동입력 방지문자를 입력하세요."
|
|
style="margin-top: 8px"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<!-- 휴대전화 (라디오 값이 'phone'일 때만 표시) -->
|
|
<a-form-item
|
|
v-if="dummy === 'phone'"
|
|
label="휴대전화"
|
|
:label-col="{ span: 4 }"
|
|
:wrapper-col="{ span: 20 }"
|
|
>
|
|
<div style="display: flex; gap: 8px">
|
|
<a-input style="width: 60px" maxlength="4" />
|
|
<a-input style="width: 60px" maxlength="4" />
|
|
<a-input style="width: 60px" maxlength="4" />
|
|
<a-button>인증번호</a-button>
|
|
</div>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
v-if="dummy === 'email'"
|
|
label="이메일"
|
|
:label-col="{ span: 4 }"
|
|
:wrapper-col="{ span: 20 }"
|
|
>
|
|
<!-- 이메일 입력 필드 -->
|
|
<a-input v-model="dummy" style="width: 120px" />
|
|
<span> @ </span>
|
|
<!-- 도메인 입력 필드 -->
|
|
<a-input v-model="dummy" style="width: 150px; margin-right: 18px" />
|
|
<!-- 직접 입력 드롭다운 -->
|
|
<a-select
|
|
v-model="domains"
|
|
style="width: 150px"
|
|
@change="handleDomainChange"
|
|
>
|
|
<a-select-option value="직접 입력">직접 입력</a-select-option>
|
|
<a-select-option value="gmail.com">gmail.com</a-select-option>
|
|
<a-select-option value="naver.com">naver.com</a-select-option>
|
|
<a-select-option value="daum.net">daum.net</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<!-- 인증번호 (라디오 값이 'phone'일 때만 표시) -->
|
|
<a-form-item
|
|
v-if="dummy === 'phone'"
|
|
label="인증번호"
|
|
:label-col="{ span: 4 }"
|
|
:wrapper-col="{ span: 20 }"
|
|
>
|
|
<a-input placeholder="인증번호를 입력하세요" />
|
|
</a-form-item>
|
|
|
|
<!-- 아이디 찾기 버튼 -->
|
|
<div style="text-align: center; margin-top: 16px">
|
|
<a-button
|
|
type="primary"
|
|
style="background-color: #1e90ff; color: white; width: 100px"
|
|
>
|
|
아이디 찾기
|
|
</a-button>
|
|
</div>
|
|
</a-form>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|