Commit 1eccab08 authored by chenqikuai's avatar chenqikuai

fix:修改登录页UI

parent b20d4dbd
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="code-input"> <div class="code-input">
<van-field <van-field
:value="code" :value="code"
placeholder="验证码" placeholder="请输入验证码"
label-align="right" label-align="right"
@input="input" @input="input"
> >
...@@ -20,6 +20,7 @@ import { Component, Prop, PropSync, Vue, Watch, Inject, Emit, Model } from 'vue- ...@@ -20,6 +20,7 @@ import { Component, Prop, PropSync, Vue, Watch, Inject, Emit, Model } from 'vue-
import { Action } from 'vuex-class'; import { Action } from 'vuex-class';
import { isCode, isEmail } from '@/const/pattern'; import { isCode, isEmail } from '@/const/pattern';
import { LoginType } from '@/const/enum'; import { LoginType } from '@/const/enum';
import { Toast } from 'node_modules/_vant@2.12.1@vant/types';
/** /**
* 验证码输入框 * 验证码输入框
...@@ -53,7 +54,9 @@ export default class CodeInput extends Vue { ...@@ -53,7 +54,9 @@ export default class CodeInput extends Vue {
} }
private sendCode() { private sendCode() {
if ( this.isCodeBtnDisabled ) { return; } if ( this.isCodeBtnDisabled ) {
this.$toast('请输入正确的⼿手机号')
return; }
this.countDownSync = 60; this.countDownSync = 60;
this.$emit('get-code'); this.$emit('get-code');
const countTimer = setInterval(() => { const countTimer = setInterval(() => {
...@@ -68,7 +71,14 @@ export default class CodeInput extends Vue { ...@@ -68,7 +71,14 @@ export default class CodeInput extends Vue {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.code-input{ .code-input{
border-bottom: 1px solid #E4E4E4;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1F292D;
.code-btn { .code-btn {
border-left: 1px solid #E4E4E4;
padding-left: 11px;
font-size: 16px; font-size: 16px;
color: $fontColorBlue; color: $fontColorBlue;
&.disabled { &.disabled {
......
<template> <template>
<van-field <van-field
:value="email" :value="email"
class="email-input"
@input="input" @input="input"
placeholder="邮箱" placeholder="请输入邮箱"
label-align="right" label-align="right"
:disabled="!canEditEmail" :disabled="!canEditEmail"
clearable clearable
...@@ -30,4 +31,10 @@ export default class EmailInput extends Vue { ...@@ -30,4 +31,10 @@ export default class EmailInput extends Vue {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.email-input{
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1F292D;
}
</style> </style>
\ No newline at end of file
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
:value="pwd" :value="pwd"
@input="input" @input="input"
:type="isShowPwd? 'text': 'password'" :type="isShowPwd? 'text': 'password'"
placeholder="密码" placeholder="请输入密码"
label-align="right" label-align="right"
> >
<template #button> <template #button>
......
<template> <template>
<van-field <van-field
class="phone-input"
:value="phone" :value="phone"
@input="input" @input="input"
placeholder="手机号" placeholder="请输入手机号"
:maxlength="11"
label-align="right" label-align="right"
:disabled="!canEditPhone" :disabled="!canEditPhone"
clearable clearable
...@@ -30,4 +32,10 @@ export default class PhoneInput extends Vue { ...@@ -30,4 +32,10 @@ export default class PhoneInput extends Vue {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.phone-input{
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1F292D;
}
</style> </style>
\ No newline at end of file
...@@ -42,28 +42,35 @@ export default class LoginLayout extends Vue {} ...@@ -42,28 +42,35 @@ export default class LoginLayout extends Vue {}
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
padding: 30px; padding: 22px;
font-size: 16px;
color: $fontColorBlack; color: $fontColorBlack;
header { header {
align-self: flex-end; align-self: flex-end;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #3F79FE;
} }
main { main {
margin-top: 30px; margin-top: 15px;
.title { .title {
margin-bottom: 32px; margin-bottom: 15px;
font-size: 26px;
text-align: left; text-align: left;
font-weight: 500; font-size: 26px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #444348;
} }
.btn { .btn {
margin-top: 60px; margin-top: 30px;
} }
} }
footer { footer {
margin-top: 8px; margin-top: 15px;
font-size: 14px; font-size: 14px;
color: $fontColorBlue; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1F292D;
} }
::v-deep { ::v-deep {
.van-field { .van-field {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment