login page 粘贴过来样式显示不对
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的右边界貌似之前也出现过这样的问题，搞不太懂
正在回答
相似问题
登录后可查看更多问答，登录/注册
