71 lines
2.1 KiB
Vue
71 lines
2.1 KiB
Vue
<script setup>
|
||
const phoneNum=ref('')
|
||
const code=ref('')
|
||
|
||
const pane=ref(0)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="h-[100vh] w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-cover px-[31px] pt-[86px]">
|
||
<div class="w-full flex justify-center mb-[100px]">
|
||
<img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt="">
|
||
</div>
|
||
<div v-if="pane===0">
|
||
<div class="">
|
||
<div class="w-full flex justify-between">
|
||
<div class="text-[16px] text-[#000]">
|
||
中国（大陆）
|
||
</div>
|
||
<div><van-icon color="#777" name="arrow" size="14" /></div>
|
||
</div>
|
||
<div class="border-b-[1.7px] mt-[8px]">
|
||
<van-field v-model="phoneNum" clearable placeholder="请输入手机号">
|
||
<template #label>
|
||
<div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
|
||
+86
|
||
</div>
|
||
</template>
|
||
</van-field>
|
||
</div>
|
||
<div />
|
||
</div>
|
||
<div class="mt-[55px]">
|
||
<van-button v-if="phoneNum" type="primary" block style="height: 48px" >获取验证码</van-button>
|
||
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px" >获取验证码</van-button>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<div class="flex mb-[16px]">
|
||
<div class="text-[16px] text-[#BDBDBD] mr-[10px]">已发送验证码至</div>
|
||
<div class="text-[16px] text-[#000]">15834362333</div>
|
||
</div>
|
||
<van-password-input
|
||
:value="code"
|
||
:gutter="10"
|
||
focused
|
||
/>
|
||
<div class="text-#2B53AC text-14px">
|
||
重新发送
|
||
</div>
|
||
<div class="mt-[17px]">
|
||
<van-button v-if="code.length === 6" type="primary" block style="height: 48px" >登录</van-button>
|
||
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px" >登录</van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
:deep(.van-cell.van-field){
|
||
padding-left: 0;
|
||
}
|
||
:deep(.van-password-input){
|
||
margin: 0;
|
||
}
|
||
:deep(.van-password-input__item){
|
||
border: 1px solid #E5E5E5;
|
||
width: 41px;
|
||
height: 41px;
|
||
}
|
||
</style>
|