feat(login): 实现手机号登录功能
- 新增手机号登录页面组件 - 添加手机号输入和验证码获取功能 - 实现验证码输入和登录功能 - 优化页面样式和布局
This commit is contained in:
parent
9092b59027
commit
64536663d7
@ -1,16 +1,70 @@
|
||||
<script setup>
|
||||
const phoneNum=ref('')
|
||||
const code=ref('')
|
||||
|
||||
const pane=ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-[url('@/static/images/asdfsdd.png')] w-[100vw] h-[100vh] bg-cover pt-[86px]">
|
||||
<div class="w-full flex justify-center">
|
||||
<img class="w-[189px] h-[105px]" src="@/static/images/ghfggff.png" alt="">
|
||||
<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>
|
||||
|
||||
<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>
|
@ -1,32 +0,0 @@
|
||||
import type { UserConfig } from '@commitlint/types'
|
||||
import { RuleConfigSeverity } from '@commitlint/types'
|
||||
|
||||
const Configuration: UserConfig = {
|
||||
extends: ['@commitlint/config-conventional'],
|
||||
formatter: '@commitlint/format',
|
||||
rules: {
|
||||
'type-enum': [
|
||||
RuleConfigSeverity.Error,
|
||||
'always',
|
||||
[
|
||||
'feat',
|
||||
'fix',
|
||||
'perf',
|
||||
'style',
|
||||
'docs',
|
||||
'test',
|
||||
'refactor',
|
||||
'build',
|
||||
'ci',
|
||||
'chore',
|
||||
'revert',
|
||||
'wip',
|
||||
'workflow',
|
||||
'types',
|
||||
'release',
|
||||
],
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
export default Configuration
|
@ -1,9 +0,0 @@
|
||||
import antfu from '@antfu/eslint-config'
|
||||
import nuxt from './.nuxt/eslint.config.mjs'
|
||||
|
||||
export default nuxt(
|
||||
antfu({
|
||||
unocss: true,
|
||||
formatters: true,
|
||||
}),
|
||||
)
|
@ -21,11 +21,8 @@
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^3.12.1",
|
||||
"@iconify-json/carbon": "^1.2.5",
|
||||
"@nuxt/eslint": "^0.7.4",
|
||||
"@pinia/nuxt": "^0.9.0",
|
||||
"@unocss/eslint-plugin": "0.65.2",
|
||||
"@unocss/nuxt": "0.65.2",
|
||||
"@unocss/preset-rem-to-px": "0.65.2",
|
||||
"@vant/nuxt": "^1.0.6",
|
||||
|
Loading…
Reference in New Issue
Block a user