Commit 1eccab08 authored by chenqikuai's avatar chenqikuai

fix:修改登录页UI

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