关于login路由的切换登录方式
html：
<div class="login_content">
<form>
<div :class="{on: loginWay}">
<section class="login_message">
<input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
<button :disabled="!isRightPhone || computeTime>0" class="get_verification"
:class="{right_phone_number: isRightPhone}" @click.prevent="sendCode">
{{computeTime>0 ? `已发送(${computeTime}s)` : '获取验证码'}}
</button>
</section>
<section class="login_verification">
<input type="tel" maxlength="8" placeholder="验证码" v-model="code">
</section>
<section class="login_hint">
温馨提示：未注册帐号的手机号，登录时将自动注册，且代表已同意
<a href="javascript:;">《用户服务协议》</a>
</section>
</div>
<div :class="{on: !loginWay}">
<section>
<section class="login_message">
<input type="tel" maxlength="11" placeholder="用户名" v-model="name">
</section>
<section class="login_verification">
<input :type="isShowPwd ? 'text' : 'password'" maxlength="8" placeholder="密码" v-model="pwd">
<div class="switch_button" :class="isShowPwd ? 'on' : 'off'" @click="isShowPwd=!isShowPwd">
<div class="switch_circle" :class="{right: isShowPwd}"></div>
<span class="switch_text">{{isShowPwd ? 'abc' : ''}}</span>
</div>
</section>
<section class="login_message">
<input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
<img ref="captcha" class="get_verification" src="http://localhost:5000/captcha" alt="captcha" @click="updateCaptcha">
</section>
</section>
</div>
<button class="login_submit" @click.prevent="login">登录</button>
</form>
<a href="javascript:;" class="about_us">关于我们</a>
</div>
css：
.login_content
>form
>div
display none
&.on
display block
input
width 100%
height 100%
padding-left 10px
box-sizing border-box
border 1px solid #ddd
border-radius 4px
outline 0
font 400 14px Arial
&:focus
border 1px solid #02a774
.login_message
position relative
margin-top 16px
height 48px
font-size 14px
background #fff
.get_verification
position absolute
top 50%
right 10px
transform translateY(-50%)
border 0
color #ccc
font-size 14px
background transparent
&.right_phone_number
color black
.login_verification
position relative
margin-top 16px
height 48px
font-size 14px
background #fff
.switch_button
font-size 12px
border 1px solid #ddd
border-radius 8px
transition background-color .3s,border-color .3s
padding 0 6px
width 30px
height 16px
line-height 16px
color #fff
position absolute
top 50%
right 10px
transform translateY(-50%)
&.off
background #fff
.switch_text
float right
color #ddd
&.on
background #02a774
>.switch_circle
position absolute
top -1px
left -1px
width 16px
height 16px
border 1px solid #ddd
border-radius 50%
background #fff
box-shadow 0 2px 4px 0 rgba(0,0,0,.1)
transition transform .3s
&.right
transform translateX(27px)
.login_hint
margin-top 12px
color #999
font-size 14px
line-height 20px
>a
color #02a774
.login_submit
display block
width 100%
height 42px
margin-top 30px
border-radius 4px
background #4cd96f
color #fff
text-align center
font-size 16px
line-height 42px
border 0
.about_us
display block
font-size 12px
margin-top 20px
text-align center
color #999
