黑色渐变背景css,css-渐变背景，爱了爱了。
好看。嘻嘻！！！
登 录
import md5 from 'js-md5'
import {mapActions} from 'vuex'
export default {
data () {
return {
formInline: {
user: '',
password: ''
},
ruleInline: {
user: [
{ required: true, message: '请填写用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请填写密码', trigger: 'blur' },
{ type: 'string', min: 5, message: '密码长度不能小于5位', trigger: 'blur' }
]
},
toPath: ''// 登录失效，重定向页面
}
},
created () {
this.toPath = this.$route.query.redirect
},
methods: {
...mapActions(['loginHandle']),
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
let params = {
userName: this.formInline.user.trim(),
password: md5(this.formInline.password.trim())
}
this.loginHandle(params).then(res => {
if (this.toPath) {
this.$router.push(this.toPath)
} else {
this.$router.push({
path: '/home'
})
}
})
.catch(error => { console.log(error) })
.finally((msg) => {
console.log(msg)
})
} else {
return false
}
})
}
}
}
.container{
height: 100vh;
background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);
}
.login-wrapper{
background-color: #fff;
width: 350px;
height: 500px;
border-radius: 15px;
padding: 0 20px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.login-wrapper .header{
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 200px;
}
标签：toPath,formInline,背景,渐变,50%,blur,message,password,css
来源： https://www.cnblogs.com/wenshaochang123/p/13572206.html