login page 的样式显示如图，代码是直接粘贴过来的应该没啥问题吧？

代码如下： login.vue

<template>

<form class="login-form" @submit="doSubmit">

<h1>

<span>Login</span>

<span class="error-msg" v-show="errorMsg">{{errorMsg}}</span>

</h1>

<input

type="text"

class="login-input"

placeholder="User Name"

v-model="username"

>

<input

type="password"

class="login-input"

placeholder="Password"

autocomplete="new-password"

v-model="password"

>

<button type="submit" class="login-btn">登 录</button>

</form>

</template>

<script>

export default {

metaInfo: {

title: 'Login Page'

},

data () {

return {

username: '',

password: '',

errorMsg: ''

}

},

methods: {

doSubmit (e) {

e.preventDefault()

if (this.validate()) {

// api

}

},

validate () {

if (!this.username.trim()) {

this.errorMsg = 'User name should not be null.'

return false

}

if (!this.password.trim()) {

this.errorMsg = 'Password should not be null.'

return false

}

this.errorMsg = ''

return true

}

}

}

</script>

<style lang="stylus" scoped>

.login-form

display flex

flex-direction column

align-items flex-start

width 350px

margin 0 auto

padding 20px

background-color #fff

h1

font-weight 100

color #3d3d3d

.login-input

appearance none

padding 0 10px

line-height 30px

margin-bottom 20px

border 1px solid #aaa

width 100%

border-radius 0

box-shadow 0 0 0

.login-btn

appearance none

width 100%

line-height 30px

text-align center

background-color #0d60c7

color #eaeaea

cursor pointer

border-color #0d60c7

transition all .3s

&:hover

color #fff

background-color darken(#0d60c7, 10)

.error-msg

font-size 12px

color red

@media screen and (max-width: 600px) {

.login-form {

width 90%

}

.login-input{

line-height 40px

}

}

</style>

麻烦老师帮忙看下，这个input的右边界貌似之前也出现过这样的问题，搞不太懂